本编博客记录桌面虚拟化移动端预研。

完整demo: https://github.com/MarkRepo/wfs.js

常见的直播方案有RTMP RTSP HLS 等等, 由于这些流都需要先传输到服务器,然后进行推流,延时比较大,RTMP可以优化到1s,hls延时最高,大概10s左右。

虚拟桌面要求延时能在100ms以内。经过google查找资料发现有以下几种方案可以实现:

1. 用websocket 传输h264编码数据,在浏览器中使用broadway开源库进行解码,调用html5 canvas绘制图像。在github上有一个demo,经过测试,broadway解码效率不高。(测试环境 chrome book)

参考: https://github.com/131/h264-live-player

2. 使用webRTC 进行点对点直播,找了一个demo,搭建了一个聊天室测试,延时效果大概在500ms左右,应该可以优化。webRTC的接口封装的很好,只有三个接口。

demo: https://github.com/LingyuCoder/SkyRTC-demo   参考:https://segmentfault.com/a/1190000000436544

上面的demo有一个地方需要注意: 使用http服务无法获取到视频流,浏览器报错,提示需要https服务。改成https服务之后,测试成功。

这个方案可行,但是需要自己去改webRTC的源码,工作量比较大,所以没有采用。

3. 使用MSE(Media Source Extension, 具体参考W3C标准)扩展实现 HTML5 video tag的流式直播。(最终采用的方案)

方案描述: 使用websocket 从服务端传输h264编码数据到浏览器, 在浏览器端使用JS 解析h264数据 , 封装成fMP4 fragment, 喂给media source 中的sourceBuffer, 浏览器video tag自动获取sourceBuffer中的数据进行解码渲染。

最后实现的demo体验效果良好,延时能达到100ms以内,使用笔记本软解、硬解, chrome book 软解表现都很完美,唯独chrome book 硬解会缓冲一帧数据,是一个瑕疵, 不过这个缺点可以在服务器端多发一帧数据解决。(见后文)

下面主要记录预研过程中出现的重要问题和解决方案:

(1)解析h264数据,封装fMP4 fragment。

  这一步比较复杂,由于之前没有JS开发经验,没有选择自己写,在github找了一个开源实现。参考:https://github.com/ChihChengYang/wfs.js; 根据wfs.js搭建的直播方案,主要出现三个问题(只有第一个延时是wfs.js库的问题,其余是自己的问题):

(2)第一个是延时问题,延时很大,在3~5s左右

原因有两个: 1. wfs.js库中做了缓存,收到一定的数据之后才执行fMP4 fragment的封装。

       2. chrome浏览器的解码器默认不是以直播流的模式解码视频帧,所以会在解码的时候缓存4帧数据。

解决方法:    1. 把wfs.js库中的缓存去掉,每来一帧数据都执行fMP4 fragment的封装

      2. 设置mvhd.duration = 0,如果有mehd的话,设置mehd.fragmentDuration = 0, 这样chrome 会进入“low delay mode”, 不会缓存数据。

具体参考: https://stackoverflow.com/questions/36364943/frame-by-frame-decode-using-media-source-extension

      https://bugs.chromium.org/p/chromium/issues/detail?id=465324

(3)第二个就是解码问题,解码花屏

原因: 虚拟机spice服务端使用了websokify代理(python 写的)。首先,这个代理服务器是流式的(出现数据帧被分割和合并的现象),浏览器端js没有进行数据帧边界的解析; 第二,代理缓冲区过小,导致数据帧被分割传输。

解决方法:1. 修改websokify代理的接收缓冲区大小。

        2. 在wfs.js库中对收到的数据进行解析,一帧一帧的提交数据,封装fMP4 fragment。

(4)第三是屏幕倒转问题

原因: spice服务端发过来的h264数据就是倒的,在终端平台,是由终端处理的。

解决方法: 利用css的画面旋转功能,以x轴为旋转轴, 旋转180度。如:

<style type="text/css" media="screen">
video.rotate180{
  width:100%;
  height:100%;
  transform:rotateX(180deg);
  -moz-transform:rotateX(180deg);
  -webkit-transform:rotateX(180deg);
  -o-transform:rotateX(180deg);
  -ms-transform:rotateX(180deg);
  }
</style>

(5)关于chrome book硬解码缓存一帧问题解决办法

通过看chrome源码 decoder部分,发现decoder处理几个数据类型会直接flush缓冲区,所以可以在wfs.js每收到一帧数据,

就构造一帧这种类型的空数据,喂给video tag, 把缓冲的一帧flush出来,同时把播放时间缩短一半即可(否则会帧堵塞)。示例:

var copy2 = new Uint8Array(4);
copy2[0] = 0, copy2[1] = 0, copy2[2] = 1, copy2[3] = 10; //类型10,11 都可以,但是10可以兼容软解     
this.wfs.trigger(Event.H264_DATA_PARSING, {data: copy2});

use html5 video tag with MSE for h264 live streaming的更多相关文章

  1. [转载]在網頁上加入HTML5 的Video Tag,直接播放MP4、OGG…等

    在之前有一篇文章提到HTML5(為何iPhone,iPod,iPad不支援Flash,HTML5將更普及於網路世界!!)的重要性,而Html 5的主要革新是在他的語意標籤,像是<video> ...

  2. Html5 Video 实现方案

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

  3. 使用jQuery和CSS自定义HTML5 Video 控件 简单适用

    Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的原生态浏览器视频空间.我们制作自定义视频控件为了在所有的浏览器中 ...

  4. 关于html5 video

    获取视频长度 <video id="video" width="200px" height="auto" src="vide ...

  5. DCloud-Video:Html5 Video 实现方案

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

  6. 移动端HTML5<video>视频播放优化实践

    遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...

  7. HTML5 video标签播放视频下载原理

    HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...

  8. 隐藏原生html5 video controls

    隐藏原生html5 video controls 凤凰视频焦点项目mobile html5播放器测试时bug,由于没有用原生的controls而是自己写的custom controls,虽然设置了co ...

  9. HTML5 <video> - 使用 DOM 进行控制

    HTML5 <video> 元素同样拥有方法.属性和事件. 其中的方法用于播放.暂停以及加载等.其中的属性(比如时长.音量等)可以被读取或设置.其中的 DOM 事件能够通知您,比方说,&l ...

随机推荐

  1. JdbcTemplate中的exectue和queryForList方法的性能对比

    @Autowired JdbcTemplate jdbcParam; pstm =                 jdbcParam.getDataSource()                ...

  2. JAVA转化Unicode编码

    package yyl.example.basic.codec; import java.util.Locale; import java.util.regex.Matcher; import jav ...

  3. android studio 中配置androidAnnotation 的新版正确配置

    apply ].processResources.manifestFile resourcePackageName 'com.peiandsky.firstandroidstudio' }}

  4. Squares - poj 2002(hash)

    枚举两个点作为一条边,求出正方形的另外两个点,利用hash查找另外两个点. #include<stdio.h> #include<string.h> #include<s ...

  5. linux—mysql安装步骤

    一.检查系统中是否已经安装过mysql. rpm -qa | grep mysql 如果存在,则需要删除. yum -y remove mysql* 继续检查一下是否还存在mysql rpm -qa ...

  6. linux常用指令--防火墙

    centos7 iptables :  如果你想使用iptables静态路由规则,那么就禁用centos7默认的firewalld,并安装ipteables-services, 启用iptables和 ...

  7. CRF++使用说明

    摘选自 :CRF++: Yet Another CRF toolkit Usage: 1.输入输出文件 He PRP B-NP reckons VBZ B-VP the DT B-NP current ...

  8. Windows 动态库创建和使用 part 2

    一.Windows动态库的创建: 1.先选择 "DLL" 和 “控项目” 2.添加一个头文件,一个源文件  CppDll.h,CppDll.cpp,一个模块定义文件 CppDll. ...

  9. 【BZOJ】3300: [USACO2011 Feb]Best Parenthesis(模拟)

    http://www.lydsy.com/JudgeOnline/problem.php?id=3300 这个细节太多QAQ 只要将所有的括号'('匹配到下一个')'然后dfs即可 简单吧,,, #i ...

  10. cobbler setting dnsmasq

    Currently cobbler can help generate a ISC DHCP configuration (package name: dhcpd) it can also alter ...