webRTC与MSE(media source extensions)实现p2p视频的一些思路和尝试(1)

最新推荐文章于 2024-07-22 10:29:37 发布

66-genius

最新推荐文章于 2024-07-22 10:29:37 发布

阅读量7.7k

点赞数 2

分类专栏：技术文章标签： html5 webrtc 视频 p2p mse

本文链接：https://blog.csdn.net/yu_genius/article/details/54024421

版权

本文探讨了如何结合HTML5的MSE（Media Source Extensions）与WebRTC技术，实现在Web端进行P2P视频流传输。通过服务器发送视频流数据，Web客户端接收并通过WebRTC转发给其他用户，利用MSE将二进制数据转化为视频流播放。文章提供了部分代码示例，并简要介绍了关键API的使用。

摘要由CSDN通过智能技术生成

最近flv.js的事好像有点火，又重新把mse这个东西提上来了。
MSE(media source extensions)是html5的新功能，大致的作用就是可以实现流媒体功能。
如果MSE配合webRTC再加上js的二进制处理，那么可以实现服务器发送视频给其中一个浏览器用户，这个浏览器用户再将视频流传输给其他用户的功能。算是web端在p2p功能上的一种探索吧

思路

server发送视频流的二进制数据给web，web通过webRTC的dataChannel发送给其他web用户。再通过MSE将二进制数据转换成视频流播出。

MSE相关API解析

MediaSource.addSourceBuffer()
- 添加数据到buff
MediaSource.removeSourceBuffer()
- 移除数据
MediaSource.endOfStream()
- 流结束
MediaSource.addEventListener()
- 添加事件响应函数

example

完整的代码见https://github.com/yuyugenius/js_video_p2p_demo
web端使用nodejs，启动方式为 node index.js
由于本人并不是写前端和js的，只是在这方面做了点尝试，所以代码丑陋bug频出请见谅。
由于代码是好几个月前写的，描述不清请见谅
部分webRTC代码来自google

web端获取码流数据

web端获取码流数据可以通过很多方法，我这里是ajax.

/**
 * FILE LOADING
 * method:XMLHttpRequest
 */
function get(filename, callback) {
   
    var request = new XMLHttpRequest();
    request.responseType = 'arraybuffer';