本文主要是介绍html 播放mjpeg,在HTML5中渲染MJpeg流,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
如果相机暴露原始JPEG图像(不是.MJPEG扩展名),您必须手动实现它(如果扩展名为.MJPEG,则浏览器将执行所有操作,只需输入正确的src)。如果你有.MJPEG并且想使用原始的.JPEG,请检查你的相机文件。大多数相机都公开.MJPEG和原始.JPEG流(仅在不同的URL上)。
不幸的是,你将无法轻松地通过Ajax获得的图像,但你可以定期改变图像的src。
您可以使用Date.getTime(),并把它添加到查询字符串强制浏览器重新加载图像,并且每次重复加载图像。
如果您使用jQuery的代码会是这个样子:
camera.html
ipCamipCam
//Using jQuery for simplicity
$(document).ready(function() {
motionjpeg("#motionjpeg"); // Use the function on the image
});
motionjpeg.js
function motionjpeg(id) {
var image = $(id), src;
if (!image.length) return;
src = image.attr("src");
if (src.indexOf("?") < 0) {
image.attr("src", src + "?"); // must have querystring
}
image.on("load", function() {
// this cause the load event to be called "recursively"
this.src = this.src.replace(/\?[^\n]*$/, "?") +
(new Date()).getTime(); // 'this' refers to the image
});
}
注意我的例子将发挥MotionJPEG在页面加载时,但不会允许播放/暂停/停止功能
这篇关于html 播放mjpeg,在HTML5中渲染MJpeg流的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!