借助MediaSource和SourceBuffer来实现webm格式视频的分片传输

在CloudTV项目的初期曾实现了整段视频的对等传输和播放，但是当视频较大时会产生相当长时间的延迟（具体延迟时间由网络状况和视频文件大小决定）；因此开始尝试视频的切片传输。

基于没有过多的音视频编码基础，所以尝试了对webm格式视频的强制型切片传输。

之所以选择webm格式的视频，一是webm格式被html5和目前大多数浏览器所支持，二是webm格式视频相对编码方式比较单一，所使用的codec比较单一，所以在添加sourcebuffer时直接使用addSourceBuffer('video/webm; codecs="vorbis,vp8"')即可；

其基本思想比较简单：

对于视频发送端，用fileReader读取文件后，使用slice()函数将文件切片，然后将每个segment逐一传输到对等接收端；

对于视频接收端，将接收到得每一个文件片append到<video>标签对应的sourcebuffer上（在上一篇文章中已经讲过如何将sourcebuffer对应到video标签上）

但是具体实现时使用了一下几个技巧来解决一些问题：

（1）在发送端开始发送视频数据之前，需要先向对等端发送初始化消息通知（video command： start）对等端准备接受视频数据

对等端接收到初始化消息后，开始初始化工作：

if(data['type']=="video_com"){if(data['content']=="start"){var oSourceBuffer, oMediaSource = new MediaSource();var url = window.URL.createObjectURL(oMediaSource);video.src = url;oMediaSource.addEventListener(prefix +'sourceopen', function () {oSourceBuffer = oMediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');//oSourceBuffer = oMediaSource.addSourceBuffer('video/mp4; codecs="avc1.4d401f,mp4a.40.2"');mediaSource = oMediaSource;sourceBuffer = oSourceBuffer;console.debug('MediaSource readyState: <', this.readyState, '>');}, false);//video.src = window.URL.createObjectURL(oMediaSource);seg_num=0;}if(data['content']== "end"){mediaSource.endOfStream();}}

（2）对等端接收到分片的视频数据之后会将数据append到sourcebuffer上

if(data['type'] == "video_seg"){console.debug("get the " + seg_num + " segment");var uint8array = new window.Uint8Array(data['content']);sourceBuffer.appendBuffer(uint8array);if(seg_num==20){video.play();}seg_num++;}

此处需注意;append()函数时需要一定的执行时间的，如果在很短的时间内接收到两片及以上的数据，就会引发两次append()函数，在前次append()函数未执行结束的情况下再次调用append()函数会产生错误从而导致该sourcebuffer被移除从而出现错误

对于这个问题的解决方法有两种：

一是在接收端建立一个List或者Queue来按序存放接收到得视频数据片，然后按顺序append到sourcebuffer上，此时可以通过检测sourcebuffer的appendingstate来检测当然的append函数是否执行完毕，当前一次执行完毕后再新append一个数据片

二是在发送端设置一定的发送间隔，为append()函数留出一定的执行时间，当然这个时间间隔的设置要合理。

实现代码为：

function inner_streamer() {reader = new window.FileReader();reader.onload = function (e) {//self.push(new window.Uint8Array(e.target.result));var send_data = new window.Uint8Array(e.target.result);myconn.send({type:"video_seg",content:send_data});startIndex += plus;if (startIndex <= size){setTimeout('inner_streamer()',100);}else {//self.push({end: true});myconn.send({type:"video_com",content:"end"});}};reader.readAsArrayBuffer(send_blob.slice(startIndex, startIndex + plus));}

借助MediaSource和SourceBuffer来实现webm格式视频的分片传输相关推荐

webm格式视频怎么转换成mp4
当我们接触的视频格式多了,对每种格式视频所具备的属性也就了解的清楚了.其实很多视频格式,如果我们想要做到随时随地的进行播放,并不是一个拿起来就能操作的事项.因为很多视频格式.因为自身的兼容性,以及格式 ...
JavaCV音视频开发宝典：vb8和vp9编码的webm格式视频文件转成mp4文件
<JavaCV音视频开发宝典>专栏目录导航 <JavaCV音视频开发宝典>专栏介绍和目录前言 mp4不用多说,我们日常生活中,手机上或者浏览器网页中使用最多的视频文件就是 ...
ffserver服务器实现WebM格式视频直播
WebM格式视频流播放可以通过HTML5在浏览器中实现,目前Chrome和FireFox都已经支持了该视频格式.WebM解码器在VP8引擎中实现,并且针对互联网特点做了很多优化.优点是在HTML5中实 ...
Ubuntu系统录屏webm格式mp4格式方法
录屏快捷键:ctrl+alt+shift+r 默认录屏时长 30 秒录屏结果是 .webm 格式视频可以采用 ffmpeg 方法转换成 .mp4 格式要安装 ffmpeg,请在终端中键入以下行: ...
webm格式怎么转换成mp4？四招快速转换！
众所周知,视频是我们生活工作中的重要内容,也是传播信息.促进交流的关键工具.随着各类短视频平台的兴起和发展,视频技术也在不断创新.目前,视频格式相对较多,而一些社交网站.短视频软件对视频格式有一定的限 ...
如何将webm格式转换成mp4格式？
如何将webm格式转换成mp4格式? webm是一种免费的开放的媒体文件格式,其由谷歌开发的一种高质量视频格式,但是需要专用的播放器进行打开使用.如果大家想在非专用的播放器上打开,那么就需要将webm ...
webm格式如何转换成mp4格式？
webm格式如何转换成mp4格式?其实现在互联网上能转换视频格式的方法和工具层出不穷,以前需要格式转换的病人不多,所以方法也没那么多种.而现在随着互联网的发展,接触这些东西的人群逐年增加,所以类似的需 ...
Adobe Premiere Pro 打开webm格式插件的下载使用||如何解决Pr不能导入webm格式的问题？
1. 下载插件插件地址:https://www.fnordware.com/WebM/ Win版本点击Download Win 下载Win版本的插件 Mac(苹果电脑)版本点击Download ...
PNG序列帧转webm格式视频播放时有白边问题
项目需求将UE5渲染输出的带透明通道的视频放在网页上播放. 操作方法然后我的具体操作方法是: 1.在ue中导出带透明通道的PNG序列 2.将PNG序列导入到AE中进行修改(剪切和尺寸调整) 3.从 ...

借助MediaSource和SourceBuffer来实现webm格式视频的分片传输

借助MediaSource和SourceBuffer来实现webm格式视频的分片传输相关推荐

最新文章

热门文章