关于webrtc:WebRTC网页录制音视频教程

导语：最近钻研了一下网页录制音视频的原理以及实现，当初就目前的实现办法做一个总结。

相干 API
办法介绍
实战演练

要实现这个性能就波及到两个 js api。

getUserMedia
MediaRecorder

通过 getUserMedia 这个接口来获取设施的摄像头和麦克风，返回一个 Promise 对象。

语法var stream = navigator.mediaDevices.getUserMedia(constraints);

constraints包含一下几种写法：

申请音视频

const constraints = {
    audio: true,
    video: true
}

申请特定的设施视频分辨率

const constraints = {
    audio: true,
    video: {
        width: {min: 1280},
        height: {min: 720}
    }
}

应用前摄像头（默认）

const constraints = {
    audio: true,
    video: {facingMode: "user"}
}

强制应用后置摄像头

const constraints = {
    audio: true,
    video: {
        facingMode: {exact: "environment"}
    }
}

例如：

const constraints = {
    audio: true,
    video: {
        width: 1280,
        height: 720
    }
};

async function createMedia() {
    try {let stream = await navigator.mediaDevices.getUserMedia(constraints);
        var video = document.querySelector('video');
        video.srcObject = stream;
        video.onloadedmetadata = function (e) {video.play();
        };
    } catch (error) {console.log(`getUserMedia: ${error}`);
    }
}

createMedia();

当然了这个 stream 还有一些办法能够应用，比方

addTrack 给流增加一个新轨道
getAudioTracks蕴含流中所有的音轨
getVideoTracks 于媒体流中蕴含的每个视频轨道
getTracks 此流的中的所有对象

这个就是录制流的一个办法。

start 开始录制
stop 完结录制
onstop 监听完结事件
ondataavailable 实时流数据

语法var mediaRecorder = new MediaRecorder(stream[, options]);

例如

// stream 就是下面获取的音视频流
let options = {
    audioBitsPerSecond : 128000,
    videoBitsPerSecond : 2500000,
}
let mediaRecorder = new MediaRecorder(stream, options);

// 实时的录制流数据
mediaRecorder.ondataavailable = function (e) {console.log(e.data);
}

// 监听进行录制事件并生成播放地址
mediaRecorder.onstop = function () {let blob = new Blob(chunks, {'type': mediaRecorder.mimeType});
    let url = window.URL.createObjectURL(blob);
    console.log(url);
}

页面构造局部

<audio controls src=""></audio>
<video controls src=""style="width: 100%;"></video>
<button id="start"> 开始音频 </button>
<button id="stop"> 完结音频 </button>
<button id="play"> 播放音频 </button>
<button id="startVideo"> 开始视频 </button>
<button id="stopVideo"> 完结视频 </button>
<button id="playVideo"> 播放视频 </button>

js 局部

获取元素增加事件

// 获取按钮
let audioStart = document.querySelector('#start');
let audioStop = document.querySelector('#stop');
let audioPlay = document.querySelector('#play');
let startVideo = document.querySelector('#startVideo');
let stopVideo = document.querySelector('#stopVideo');
let playVideo = document.querySelector('#playVideo');

// 音频操作
audioStart.onclick = function () {start('audio');
}

audioStop.onclick = function () {stop('audio');
}

audioPlay.onclick = function () {document.querySelector('audio').play();}

// 视频操作
startVideo.onclick = function () {start('video');
}

stopVideo.onclick = function () {stop('video');
}

playVideo.onclick = function () {document.querySelector('video').play();}

开始录制

// 开始录制
function start (type) {
    let option = type == 'audio' ? {audio: true} : {video: true,}
    createMedia(type, option);
}

进行录制

// 进行录制
function stop (type) {mediaRecorder.stop();
}

function stopSet (type) {if (type == 'audio') {stream.getAudioTracks()[0].stop();
        stream = null;
    } else {stream.getVideoTracks()[0].stop();}
    stream = null;
    mediaRecorder = null;
    chunks = [];
    meida = null;
}

通用办法

// 全局参数
let stream = null,mediaRecorder = null,chunks = [], media = null;
async function createMedia (type, option) {  
    try {
        // 获取媒体流
        stream = await navigator.mediaDevices.getUserMedia(option);
        media = document.querySelector(type);
        if (type === 'video') {media.srcObject = stream;}
        console.log(type, stream);

        // 录制流
        let options = {
            audioBitsPerSecond : 128000,
            videoBitsPerSecond : 2500000,
        }
        mediaRecorder = new MediaRecorder(stream, options);
        console.log(type, mediaRecorder);

        mediaRecorder.ondataavailable = function (e) {chunks.push(e.data);
        }

        mediaRecorder.start();

        // 进行录制
        mediaRecorder.onstop = function () {let blob = new Blob(chunks, {'type': mediaRecorder.mimeType});
            let url = window.URL.createObjectURL(blob);
            if (type === 'video') {media.srcObject = null;}
            media.src = url;
            stopSet(type);
        }

    } catch (error) {console.log('getUserMedia：', error);
    }
}

看下成果

想要体验的能够关上这个音视频录制，手机上应用更佳。

好了，明天的教程就介绍到这里，拜拜！

目录

相干 API

办法介绍

getUserMedia

MediaRecorder

实战演练