视频流的三种使用方式：在video标签播放、录制、使用websocket长链接进行传输

持续创作，加速成长！这是我参与「掘金日新计划 · 6月更文挑战」的第29天，点击查看活动详情

本次，我们将一下视频流的三种使用方式：在video标签播放、录制、使用websocket长链接进行传输

如何将摄像头拍到的视频播放出来

1. 首先，我们需要获取视频标签，用来播放
2. 然后调用navigator.mediaDevices.getUserMedia方法，在.then的时候，可以获取到视频流
3. 将获取到的视频流添加到video的srcObject属性上，即可实现播放

// 获取video标签
var videoPlayer = document.querySelector('video#videoId')
// 添加约束
var constrants = {
    video: true,
    audio: true
}
//获取视频流
navigator.mediaDevices.getUserMedia(constrants).then(getMediaStream);
function getMediaStream(stream){
    // 将获取到的流在video上播放
    videoPlayer.srcObject = stream;
    // 将视频流添加到window上
    window.stream = stream;
    var track = stream.getTracks()[0];
    // 打印视频流信息
    console.log('stream track', track)
    // 打印视频流约束
    console.log('stream setting', track.getSettings())
}

控制台打印结果

如何将摄像头拍到的视频录制下来

1. 首先，设置媒体资源类型{mimeType:'video/webm; codecs=vp8}
2. 然后 new 一个 MediaRecorder对象，将上面方法获取到的stream和媒体资源类型传进去
3. 调用mediaRecorder的ondataavailable方法，将获取到的buffer放到一个数组里
4. 调用mediaRecorder的start方法

// 录制视频
var option = {mimeType:'video/webm; codecs=vp8}
var mediaRecorder = new MediaRecorder(window.stream, option)
// 参数传入时间片
mediaRecorder.ondataavailable = handleData;
// 开始录制
mediaRecorder.start(10);
function handleData(e){
    if(e && e.data && e.data.size >0){
        // 添加视频信息到buffer中
        buffer.push(e.data);
    }
}

如何将摄像头拍到的视频使用websocket长链接传输

媒体协商过程比较繁琐，此处就不罗列详细代码了，此处要点是，要先添加流后协商，不可先协商后添加流 实现过程：

1. 先将之前获取到的流window.stream调用getTracks()方法，然后进行遍历，将流添加到peerconnection的addTrack方法中
2. 在createOffer时，添加约束
3. 其它协商流程不变

// 先添加流信息
window.stream.getTracks().forEach((track)=>{
    pc1.addTrack(track, window.stream)
})
// 约束条件
var options = {
    offerToRecieveAudio: 1,
    offerToRecieveVideo: 1
}
// 后进行协商
pc1.createOffer(options).then(getLocalDescription)

这就是视频流的三种使用方式：在video标签播放、录制、使用websocket长链接进行传输