最近碰到的需求：监控探头视频呈现到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. solus linux 中文输入法

    默认用ibus输入框架,安装ibus-libpinyin sudo eopkg install ibus-libpinyin ibus 安装好后重启 在系统设置 -区域和语言中添加中文,(记得自己设置 ...

  2. 杭电oj1860：统计字符（字符串hash / 水题）

    统计字符 题目链接 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Problem D ...

  3. git杂碎汇总

    1. .gitignore文件使用 1.如果不想某类文件(编译后.配置等文件)加入到git版本管理,可以在这个文件中配置规则,进行过滤筛选: 2.配置规则 以斜杠"/"表示目录:e ...

  4. python数据分析基础

    ---恢复内容开始--- Python数据分析基础(1) //2019.07.09python数据分析基础总结1.python数据分析主要使用IDE是Pycharm和Anaconda,最为常用和方便的 ...

  5. 初学Java(1)

    1.Java基本数据类型: 2.Java的main方法: 被static修饰,类名与文件名相同:void:方法的返回值,无返回值:main方法是程序的入口,有且只有一个: String[] args: ...

  6. netty权威指南学习笔记一——NIO入门（2）伪异步IO

    在上一节我们介绍了四种IO相关编程的各个特点,并通过代码进行复习了传统的网络编程代码,伪异步主要是引用了线程池,对BIO中服务端进行了相应的改造优化,线程池的引入,使得我们在应对大量客户端请求的时候不 ...

  7. 让vscode使用Pipenv工作环境

    1.查看Pipenv的位置 # 先激活Pipenv环境 pipenv shell # 获取当前虚拟环境的位置 pipenv --venv 2.打开setting.json配置文件 Ctrl+Shift ...

  8. 记录第一次制作pypi包的过程

    准备工作 1.创建一个项目文件夹 mkdir dada_openapi_python cd dada_openapi_python 2.创建包文件夹 在里面在创建一个 dada_openapi_cli ...

  9. 062-PHP函数按值传参，交换数值函数

    <?php function swap($x,$y){ //定义交换数值函数 $temp=$x; $x=$y; $y=$temp; } $m=5; $n=15; echo "交换前:& ...

  10. java如何连接Oracle数据库问题

    Oracle数据库纯属自学,不对请留言改正! 在学Oracle前相信已经大致知道mysql或sqlserver数据库,这个跟前面两个不大一样,你安装的时候让你输入一个密码,貌似是一个系统管理员密码,跟 ...