WebRTC网页录制音视频教程

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

目录

• 相关API
• 方法介绍
• 实战演练

相关API

要实现这个功能就涉及到两个js api。

• getUserMedia

• MediaRecorder

方法介绍

getUserMedia

通过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: