借助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&
  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值