{转} MJPG流媒体在HTML5的呈现方案
最近碰到的需求：监控探头视频呈现到html页面上。
视频源协议：HLS;
视频源格式：Motion JPEG 简称 MJPG;
其中Motion JPEG（M-JPEG或MJPEG，Motion Joint Photographic Experts Group，FourCC:MJPG）是一种视频压缩格式，其中每一帧图像都分别使用JPEG编码。M-JPEG常用在数码相机和摄像头之类的图像采集设备上，非线性剪辑系统也常用这种格式。QuickTime播放器和包括Mozilla Firefox，Google Chrome，Safari在内许多网页浏览器原生支持M-JPEG。
解决方案一：
源文：http://stackoverflow.com/questions/13500558/motion-jpeg-in-html5-canvas?answertab=oldest#tab-top
原理：接收来自流媒体源的信息，每0.01秒渲染一遍指定的canvas。
<html>
<body>
<canvas width='640px' height='480px' >
</canvas>
<script language="JavaScript">
var ctx = document.getElementById('test_canvas').getContext('2d');
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
};
var theDate = new Date();
img.src = "http://ip_or_domainName/xxxx/video.cgi";
window.setInterval("refreshCanvas()", 10);
function refreshCanvas(){
ctx.drawImage(img, 0, 0);
};
</script>
</body>
</html>
解决方案二：
源文：http://wiki.ros.org/mjpegcanvasjs/Tutorials/CreatingASingleStreamCanvas
使用了JS包：mjpegcanvas.min.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://cdn.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
<script type="text/javascript" src="http://cdn.robotwebtools.org/mjpegcanvasjs/current/mjpegcanvas.min.js"></script>
<script type="text/javascript" type="text/javascript">
/**
* Setup all visualization elements when the page is loaded.
*/
function init() {
// Create the main viewer.
var viewer = new MJPEGCANVAS.Viewer({
divID : 'mjpeg',
host : 'ip_or_domainName/xxxx/video.cgi',
width : 640,
height : 480
});
}
</script>
</head>
<body onload="init()">
<h1>MJPG流媒体在HTML5的呈现方案</h1>
<div ></div>
</body>
</html>