最近碰到的需求：监控探头视频呈现到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 id='test_canvas' width='640px' height='480px' style='border:1px solid #d3d3d3'>
</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 id="mjpeg"></div> </body> </html>