最近碰到的需求：监控探头视频呈现到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. BottomTabBar 套用 recycleview出错问题

    原来不是用这个框架的 是一个不知名的github开源类  开始感觉很不错 后来套用recycleview就出错应该是碎片关系没处理好 ,后来用bottomtabbar    他的傻逼思想深深撼动了我, ...

  2. 一个有意思的html验证码： namesilo验证码

    买域名的时候看到的一个验证码,感觉蛮有意思的(https://www.namesilo.com/create_account.php),这个质感看上去就不一样: 查看页面源码,果然这个验证码是用htm ...

  3. NAND厂商哭晕：减产也阻止不了跌价

    导读 NAND闪存价格已经连跌了6个季度,这让上游NAND厂商三星.东芝.美光等损失惨重,纷纷削减NAND产能.在群联台北电脑展上,群联公司董事长潘建成也预测NAND闪存价格已经跌破了成本,未来跌幅会 ...

  4. poj3405 Corporate Identity

    和上一个1226一样吧,这个还不用翻转 然而本蒟蒻还是写不对,WA一片天,不知道自己搞什么,自从去了长沙感觉就是坑啊 while(1) iq--; /*#include <cstdio> ...

  5. c# 多张图片合成一张图片

    using System; using System.Collections.Generic; using System.Drawing; using System.IO; using System. ...

  6. Java 二叉树深度 判断平衡二叉树

    package cookie; public class BTreeDepthIsBalanced { int depth(BNode head) { if (head == null) { retu ...

  7. 留学英文论文写作Abstract三种类型

    所谓Abstract,就是对所写论文主要内容的精炼概括.Abstract是美国人的说法,英国的科技期刊喜欢称之为Summary.在英文中,有资料是这么对其定义的:Abstract is a sketc ...

  8. Python写一个简单的爬虫

    code #!/usr/bin/env python # -*- coding: utf-8 -*- import requests from lxml import etree class Main ...

  9. 每天一点点之vue框架开发 - History 模式下线上路由报404错误

    vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...

  10. Linux系统学习笔记

    6.启动python cd /root/yq/v4_1_6309a_btc_nw_cq nohup python3 -u v4_1_6309a_btc_nw_cq.py >> 6309a_ ...