最近碰到的需求：监控探头视频呈现到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. 014.Delphi插件之QPlugins，MDI窗口

    不知道为什么,这个DEMO编译出来报错,运行不了,在QDAC群里问了一下也没人响应. 效果如下 主程序代码如下 unit Frm_Main; interface uses Winapi.Windows ...

  2. System.Reflection.ReflectionTypeLoadException

    引用了一个第三方dll, 此dll经过混淆,但是未签名. 然后,主程序无法反射了, 取消主程序的签名后正常反射.

  3. 吴裕雄--天生自然java开发常用类库学习笔记：RumTime类

    public class RuntimeDemo01{ public static void main(String args[]){ Runtime run = Runtime.getRuntime ...

  4. JuJu团队11月26号工作汇报

    JuJu团队11月26号工作汇报 JuJu   Scrum 团队成员 今日工作 剩余任务 困难 于达 对原始文本进行预处理, 并转换成可被julia读入的格式 完成预处理并用julia读入. 读入后按 ...

  5. tab选项卡，不带自动切换定时器

    <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...

  6. Linux每日练习-awk命令的内外部变量传递20200225

  7. UVA - 1572 Self-Assembly（图论模型+拓扑排序）

    题意:判断利用给出的正方形是否能拼接出无限延伸的结构. 分析:正方形上的字母看做点,正方形看做有向边. 例如: 若上下两个正方形能拼接,需要B+~C+是个有向边. 对输入的处理是:把A+,A-分别映射 ...

  8. 小程序填坑：2018最新getPhoneNumber功能详解

    本篇博客主要详解getPhoneNumber组件的功能,填补网上那些到处是漏洞的博客.加上小程序官方本身也是满满的漏洞. 惯例先上总纲: ##主要内容 1.前端页面组件书写 2.JS内组件用法 3.接 ...

  9. Java基础（接口，list和ArrayLIst）

    1,使用接口的目的:不是10类都有getName()方法,则10个类都继承一个接口来实现.接口本身是一种规范,在具体业务有需求的时候才用接口. 具体例子: I充电设备 x = new 手机(" ...

  10. 二、react开发环境配置与webpack入门

    Webpack 模块打包工具(module bundler)功能: 将 CSS.图片与其他资源打包 打包之前预处理(Less.CoffeeScript.JSX.ES6 等)档案 依 entry 文件不 ...