最近碰到的需求：监控探头视频呈现到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. java 如何爬取百度百科词条内容(java如何使用webmagic爬取百度词条)

    这是老师所布置的作业 说一下我这里的爬去并非能把百度词条上的内容一字不漏的取下来(而是它分享链接的一个主要内容概括...)(他的主要内容我爬不到 也不想去研究大家有好办法可以call me) 例如 互 ...

  2. 《YouTube 网站的架构演进》阅读笔记

    概述 YouTube 在国内是个404网站,需要翻墙得见,这是有用的废话,先铺垫一下. 从全球网站来看,它仅次于母公司 Google,全球排名位列第2.每天超过5亿以上视频播放量,平均每个用户点击10 ...

  3. Django（十）模型：django模型类对数据库的：增/删/改/查、自关联、管理器、元选项（指定表名）

    一.插入.更新和删除 调用一个模型类对象的save方法的时候就可以实现对模型类对应数据表的插入和更新. 调用一个模型类对象的delete方法的时候就可以实现对模型类对应数据表数据的删除. 二.自关联 ...

  4. 前端 移动端H5页面 DEBUG

    下载网址:https://github.com/Tencent/vConsole 把这个JS复制到项目里面 然后引入到HTML中 然后在JS上面实例化一下即可 页面就会有一个绿色的,然后点击一下就可以 ...

  5. 定义一个共享数据块DB1 在DB1中定义一个数组 用程序 访问数据里面的某一个成员或者地址连续的成员

    提纲 : 定义一个共享数据块 DB1 在DB1 中定义数组 用SFC21 实现 实现全部数组元素的赋一样的值 实现 给数组中的某一个元素赋值 实现 对数组中的全部元素赋值 实现将数组中的某个 或者 某 ...

  6. C++学习记录——（queue的清空）

    c++自带的queue并没有clear这个方法:所以只能自己写了. 一共三种(其实我决得就是两种): 第一种: 直接赋值 queue<int> MyQue; /* …… */ MyQue ...

  7. 01-JAVA语言基础——课后动手动脑

    1.一个java类文件中真的只能有一个公有类吗? 请使用Eclipse或javac检测一下以下代码,有错吗? public class Test{    public static void main ...

  8. 12.swoole学习笔记--锁机制

    <?php //创建锁对象 $lock=new swoole_lock(SWOOLE_MUTEX);//互斥锁 echo "创建互斥锁\n"; //开始锁定 主进程 $loc ...

  9. Swift 类的使用class

    /* 类属性的介绍 Swift中类的属性有多种 1.存储属性:存储示例的常量和变量 2.计算属性:通过某种方式计算出来的属性 3.类属性:与整个类自身相关的属性 存储属性 存储属性是最简单的属性,它作 ...

  10. MongoDB 数据建模

    版权所有,未经许可,禁止转载 章节 MongoDB 入门 MongoDB 优势 MongoDB 安装 MongoDB 数据建模 MongoDB 创建数据库 MongoDB 删除数据库 MongoDB ...