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部分的实现下篇博客再完善啦


  • 2018-03-20 23:38:05

    PHP中json_encode与json_decode

    json_encode() 对变量进行JSON编码,json_decode() 对JSON数据进行解码,转换为PHP变量

  • 2018-03-21 22:26:03

    Android BASE64Encoder不能用的问题

    昨天项目与后台交互的接口传参数需要加密,用的是BASE64Encoder加密,可是这个类不能用,谷歌了一下说的是:

  • 2018-03-21 22:28:02

    Java加密算法 AES

    AES 算法 对称加密,密码学中的高级加密标准 2005年成为有效标准

  • 2018-03-24 13:23:26

    Only the original thread that created a view hierarchy can touch its views

    很多网友在Android中使用多线程处理UI相关内容时可能会发现Logcat提示Only the original thread that created a view hierarchy can touch its views这样的错误,这主要是Android的相关View和控件不是线程安全的,我们必须做独立的处理这点比J2ME麻烦一些,这里Android给 我们提供了很多方法,有关线程的

  • 2018-03-26 18:05:09

    MYSQL OR与AND一起 的用法

    查询结果是id = 2且age = 20或者id=1SELECT * from student WHERE id = 1 or id = 2 AND age = 20;12

  • 2018-03-27 11:27:09

    Java中Set集合的使用

    Set类继承了Conllection类,是一种集合类。Set的实现类有三个,下面我们会一一来说这些的不一样。

  • 2018-03-27 11:36:58

    Java中数组、List、Set互相转换

    需要注意的是, Arrays.asList() 返回一个受指定数组决定的固定大小的列表。所以不能做 add 、 remove等操作,否则会报错。

  • 2018-03-27 16:37:57

    Java 8 将List转换为Map

    几个Java 8示例来向您展示如何将一个List对象转换为一个Map,以及如何处理重复的键