webRtc 的简单学习

学习自 李超的 《从0打造音视频直播系统》

1. 检查当前设备

//判断浏览器是否支持这些 API
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
  console.log("enumerateDevices() not supported.");
  return;
}

// 枚举 cameras and microphones.
navigator.mediaDevices.enumerateDevices()
.then(function(deviceInfos) {
  //打印出每一个设备的信息
  deviceInfos.forEach(function(deviceInfo) {
    console.log(deviceInfo.kind + ": " + deviceInfo.label +
                " id = " + deviceInfo.deviceId);
  });
})
.catch(function(err) {
  console.log(err.name + ": " + err.message);
});

当前获得的设备信息中的label都为空，是因为需要使用 https ，暂时没有这个条件，就不做测试了
当使用的设备改变之后，会有change事件触发 navigator.mediaDevices.ondevicechange，可以在这个事件当中修改对应的逻辑

2. 获取当前的设备数据流

如下代码所示，通过 navigator.mediaDevices.getUserMedia获取视频流，并分别通过video canvas绘制到了页面上了

<video autoplay playsinline></video>
<canvas width="1024" height="720"></canvas>

var videoplay = document.querySelector('video');
var canvas = document.querySelector('canvas')
var constraints = {
    video : {
        width: 1024,
        height: 720,
    },
    audio : false
}
//采集音视频数据流
navigator
 .mediaDevices
 .getUserMedia(constraints)
 .then((stream) {
    videoplay.srcObject = stream;
    // startRecord(stream)
    setTimeout(() => {
 		canvas.getContext('2d').drawImage(videoplay, 0, 0)
    }, 1000)
 })

2.1 getUserMedia的api参数

3. 录制当前的视屏

1. 收集当前的视屏数据

webRtc 有一个 MediaRecorder对象，能对视屏数据进行处理，并且会触发 ondataavailable事件，方便开发者处理对应的数据

var buffer = []; // 变量放外面，方便后面进行播放
function startRecord(stream){
    var mediaRecorder;

    try{
        //创建录制对象
        mediaRecorder = new MediaRecorder(stream, {
            // 录制的文件格式
            mimeType: 'video/webm;codecs=vp8'
        });
    }catch(e){
        console.error('Failed to create MediaRecorder:', e);
        return;
    }

    //当有音视频数据来了之后触发该事件
    mediaRecorder.ondataavailable = function (e) {
        console.log(e.timeStamp)
        if(e && e.data && e.data.size > 0){
            // 对数据进行收集
            buffer.push(e.data);
        }
    };
    //开始录制
    // 这里的参数代表着的是录制的片段，每一段有多长在，
    // 这里写的是10ms，但是经过实际测试，大概是在30ms左右
    mediaRecorder.start(10);
}

2. 对当前的视屏进行回放

当第一步的缓冲数据收集到一定之后，就可以开始尝试播放了

<video id="replay"></video>

function replay() {
    var videorelpay = document.querySelector('#replay');
    // 对当前已经缓存的数据处理成二进制数据
    var blob = new Blob(buffer, {type: 'video/webm'});
    videorelpay.src = window.URL.createObjectURL(blob);
    videorelpay.controls = true;
    videorelpay.play();
}

3. 下载当前已经录制好的视屏

下载视屏的话，就使用了 h5中的 download属性了

function download () {
    var blob = new Blob(buffer, {type: 'video/webm'});
    var url = window.URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.href = url;
    a.style.display = 'none';
    a.download = 'dc.webm';
    a.click();
}

4. 录制当前的屏幕

在mac下测试时，可以共享整个屏幕、某个应用程序的使用、浏览器的某个标签页

//抓取桌面
function shareDesktop(){ 
        //开始捕获桌面数据 
    navigator.mediaDevices
        .getDisplayMedia({video: true}) 
        .then((stream) => { 
            var deskVideo = document.querySelector("video");
            localStream = stream;
            deskVideo.srcObject = stream;
        }) 
        .catch((err) => {
            console.log(err)
        }); 
}

接下来想要处理的话，就可以执行 3. 录制当前的视屏 的过程

5. 连接建立的过程

RTCPeerConnection

5.1

RTCPeerConnection建立连接后查看发送、接受情况 chrome://webrtc-internals/