最近碰到的需求：监控探头视频呈现到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>

{转} MJPG流媒体在HTML5的呈现方案的更多相关文章

  1. DCloud-Video：Html5 Video 实现方案

    ylbtech-DCloud-Video:Html5 Video 实现方案 1.返回顶部 1.1. http://ask.dcloud.net.cn/article/569 1.2. 一. Html5 ...

  2. App 开发：Hybrid 架构下的 HTML5 应用加速方案

    在移动 App 开发领域,主流的开发模式可分为 Native.Hybrid.WebApp 三种方式.然而 2013 年,纯 WebApp 开发模式的发展受到一定挫折,以 Facebook 为代表的独立 ...

  3. Html5 Video 实现方案

    来源:http://ask.dcloud.net.cn/article/569 源码下载 前言: 最近项目中需要用到html5 视频播放功能,于是稍微研究了解了下,遇到了很多坑,特此记录下. 一. H ...

  4. HTML5数据存储方案data与jQuery数据存储方案$.data()的区别

    我们先看下$.fn.data()的使用,这个和$.data()是不一样的,前者是和某个jquery对象相关,后者则是全局方法.主要有data()和removeData()这2个实例方法.通过下面的例子 ...

  5. 实时监控、直播流、流媒体、视频网站开发方案流媒体服务器搭建及配置详解：使用nginx搭建rtmp直播、rtmp点播、,hls直播服务配置详解

    注意:这里不会讲到nginx流媒体模块如何安装的问题,只研究rtmp,hls直播和录制相关的nginx服务器配置文件的详细用法和说明.可以对照这些命令详解配置nginx -rtmp服务 一.nginx ...

  6. px单位html5响应式方案

    移动端h5响应式方案最近这几年用得最多的最多的就是rem方案了.这个需要计算根元素的font-size来实现响应式. 但这种方案也有一个缺点,那就是font-size不为整数的时候一些字体使用rem单 ...

  7. 移动端HTML5开发 选择方案

    如今出现了大量的CSS前端框架,但真正优秀的框架只有少数几个. 本文将会比较其中五个最佳的框架.每个框架都有自己的优点和缺点,以及具体的应用领域,你可以根据自己的具体项目需求进行选择.此外,许多选项都 ...

  8. Sencha Touch 手机移动开发框架 HTML5 项目压缩方案;

    Sencha Touch框架生成基本项目目录结构 Index.html/ App.js App.json /touch[sdk]/ /Sencha-touch.js /src Resources/ A ...

  9. native和html5的通信方案

    一.jsbridge 重写WebView中WebChromeClient类的onJsPrompt()方法 二.url里面带参数 三.在js里面写全局函数,在native中调用

随机推荐

  1. RPC_E_SERVERFAULT excel com操作错误

    遇到多次了,以管理员身份启动excel,禁用第三方加载项,解决. 我遇到几次都是 foxit pdf reader导致的.

  2. MS SQLSERVER 自增ID列竟然会重复

    MS SQLSERVER 2008 R2 datacenter edition 自增的ID列,设为了主键. 从没遇到过的情况.

  3. 如何用naviecat批量创建mysql数据

    1.参考博文:https://blog.csdn.net/lelly52800/article/details/87267096 2.excel要与表结构一致 3.右键,导入向导,选择相应版本,点击“ ...

  4. IO流常用模式

    主要运用2个设计模式,适配器和装饰者模式.

  5. asp.net mvc邮箱激活

    1.发送邮件 public ActionResult SendEmail() { var member = dbSession.MemberRepository.LoadEntities(p => ...

  6. PHP页面跳转以及伪登录实例

    PHP页面跳转一.header()函数header()函数是PHP中进行页面跳转的一种十分简单的方法.header()函数的主要功能是将HTTP协议标头(header)输出到浏览器. header() ...

  7. bzoj 1912: [Apio2010]patrol 巡逻

    呵呵呵呵呵呵,自己画图,大概半个小时,觉的连上边会成环(是不是该交仙人掌了??)然后求环不重合部分最大就好了, 结果写了一坨DP,最后写不下去了,再次扒了题解. 发现我真的是个sb. k==1,直接是 ...

  8. css快速浏览

    meta <meta charset="utf-8" /> <meta name="keywords" content="key1, ...

  9. 十七、JavaScript之幂运算

    一.代码如下 二.执行效果如下 <!DOCTYPE html> <html> <meta http-equiv="Content-Type" cont ...

  10. Oozie笔记

    简介 Oozie 是用于 Hadoop 平台的开源的工作流调度引擎. 用于管理 Hadoop 属于web应用程序, 由 Oozie client 和 Oozie Server 两个组件构成. Oozi ...