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

2020-12-17 10:59:28

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

最近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';
    request.onreadystatechange = function () {
        if (request.readyState == 4 && (request.status == 200 || request.status == 304)) {
            callback(request.response);
        }
    };    var file = 'chunks/' + filename;
    request.open('GET', file, true);
    request.send();
};12345678910111213141516

添加MSE的事件响应

_mediaSource.addEventListener('sourceopen',sourceOpenCallback, false);
_mediaSource.addEventListener('webkitsourceopen',sourceOpenCallback, false);123

设置事件响应,当MSE里有buffer,就播放,这里用的格式是vp8+vorbis,同时开始一个startFileLoading(0)函数。

function sourceOpenCallback() {
    console.log('mediaSource readyState: ' + this.readyState);    // Create the source buffer where we are going to append the
    // new chunks.
    _sourceBuffer = _mediaSource.addSourceBuffer('video/webm; codecs="vp8,vorbis"');    //_sourceBuffer.addEventListener('updateend', loadNextBuffer, false);
    _sourceBuffer.mode = 'sequence';    // Start
    startFileLoading(0);
}1234567891011

_sourceBuffer.mode = 'sequence';mode的值此时表示按队列顺序播放,如果为segments则表示按时间戳播放,具体可以参考html标准的SourceBuffer.
startFileLoading(i)的作用是从服务器上读取视频码流,这里用的是读取视频文件,我的测试代码里预设了一个文件列表。

/**
 * start File LOADING
 */function startFileLoading(i) {
    // Load the chunk
    get(_files[i], function (result) {

        console.log('XMLHttpRequest: loaded', _files[i]);        // Cache the buffer
        _loadedBuffers.push(result);        //if connect with webRTC ,sendMediaData to anothoer user
        if (_isConnection) {            //peer.sendData(result);
            for (var index = 0; index < _peerIndex; index++) {
                peerlist[index].sendData(result);
            }
        }        if (!_sourceBuffer.updating) {            //setTimeout(loadNextBuffer,3000); 
            loadNextBuffer();
        }        if (i == 0) {            // Start playback
            if (video.paused) {
                video.play();
            }
        }

        i++;        if (i == _files.length) {
            i = 0;
        }        // Recursively load next chunk (if one exists)
        if (i < _files.length) {
            setTimeout(function () { startFileLoading(i); }, 9000);            //startFileLoading(i);
        }
    });
}12345678910111213141516171819202122232425262728293031323334353637383940414243

如果当前的web端已经通过webRTC连接了其他web用户,那么就可以通过如果方式将从服务器读取的视频数据发送给其他用户,此时就相当于第二个以后的web用户获得的视频不是从服务器获取,而是从第一个用户那获取。

//if connect with webRTC ,sendMediaData to anothoer userif (_isConnection) {    //peer.sendData(result);
    for (var index = 0; index < _peerIndex; index++) {
        peerlist[index].sendData(result);
    }
}1234567

loadNextBuffer就是读取下一段buffer并且添加进MSE,这样MSE就可以连续不断的播放视频,可以不用等视频完全加载完成才播放,也可以利用这个实现直播效果。

/**
 * video stuff
 * It appends puts the next cached buffer into the source buffer.
 */function loadNextBuffer() {
    if (_loadedBuffers.length) {
        console.log('SourceBuffer: appending', _itemsAppendedToSourceBuffer);        // append the next one into the source buffer.
        _sourceBuffer.appendBuffer(_loadedBuffers.shift());
        _itemsAppendedToSourceBuffer++;
    }    /*
    if (_itemsAppendedToSourceBuffer >= _files.length && !_sourceBuffer.updating) {
        // else close the stream
        _mediaSource.endOfStream();
    }
    */}12345678910111213141516171819

webRTC部分

js/peer.js文件中就是关于webRTC实现的相关操作,有关webRTC部分的实现下篇博客再完善啦


  • 2019-12-04 10:47:59

    nuxt.js项目中全局捕获异常并生成错误日志全过程

     需求:客户在使用过程中页面报错时,可以生成错误记录传回服务器,以便改进。   步骤:     一.全局捕获异常,     二.发送到服务端,     三.生成错误日志。   一.全局捕获异常 如图,vue提供了errorHandle这个方法来处理全局异常,更多详细内容参见官网。

  • 2019-12-04 10:48:18

    vue 项目资源文件 static 和 assets 不说区别直接使用?

    assets中资源会webpack构建压缩到你代码中,而static文件直接引用。 static 中长存放类包、插件等第三方的文件,assets里放属资源文件比如自己资源图片、css文件、js文件。 引入资源的方式static文件夹可以使用~/static/方式引入, assets文件夹可以使用 ~@/assets 方式引入

  • 2019-12-05 17:01:36

    Vue 结合 Axios 接口超时统一处理

    当网路慢的时候。又或者公司服务器不在内地的时候,接口数据请求不回来超时报错的情况相信大家肯定遇到过的,这里我把我公司项目请求超时的处理方法分享下,希望看过后有帮助。

  • 2019-12-05 17:13:40

    JS模板工具lodash.template的简单用法

    lodash是从underscore分支的一个项目,之前我写了一篇JS模板工具underscore.template的简单用法,lodash跟underscore很相似,这也简单介绍一下lodash的template方法。 先把underscore的文章中用过的代码贴过来,把underscore的js文件换成lodash的js,其他一字不改,然后我们试试:

  • 2019-12-06 10:47:29

    date-fns日期工具的使用方法详解

    isToday() 判断传入日期是否为今天 isYesterday() 判断传入日期是否为昨天 isTomorrow() 判断传入日期是否为 format() 日期格式化 addDays() 获得当前日期之后的日期 addHours() 获得当前时间n小时之后的时间点 addMinutes() 获得当前时间n分钟之后的时间 addMonths() 获得当前月之后n个月的月份 subDays() 获得当前时间之前n天的时间 subHours() 获得当前时间之前n小时的时间 subMinutes() 获得当前时间之前n分钟的时间 subMonths() 获得当前时间之前n个月的时间 differenceInYears() 获得两个时间相差的年份 differenceInWeeks() 获得两个时间相差的周数 differenceInDays() 获得两个时间相差的天数 differenceInHours() 获得两个时间相差的小时数 differenceInMinutes() 获得两个时间相差的分钟数

  • 2019-12-06 10:49:39

    npm 查看源 换源

    npm,cnpm,查看源,切换源,npm config set registry https://registry.npmjs.org

  • 2019-12-06 11:01:31

    npm发布包流程详解 有demo

    npm发布包步骤,以及踩过的坑(见红颜色标准): 1.注册npm账号,并完成Email认证(否则最后一步提交会报Email错误) 2.npm添加用户或登陆:npm adduser 或 npm login

  • 2019-12-06 13:16:18

    vue mixins组件复用的几种方式

    最近在做项目的时候,研究了mixins,此功能有妙处。用的时候有这样一个场景,页面的风格不同,但是执行的方法,和需要的数据非常的相似。我们是否要写两种组件呢?还是保留一个并且然后另个一并兼容另一个呢? 不管以上那种方式都不是很合理,因为组件写成2个,不仅麻烦而且维护麻烦;第二种虽然做了兼容但是页面逻辑造成混乱,必然不清晰;有没有好的方法,有那就是用vue的混合插件mixins。混合在Vue是为了提出相似的数据和功能,使代码易懂,简单、清晰。