WebRTC網頁錄製音視訊教程

阿新 • • 發佈：2021-08-22

導語：最近研究了一下網頁錄製音視訊的原理以及實現，現在就目前的實現方法做一個總結。

方法介紹

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: ${error}`);
    }
}

createMedia();

當然了這個stream還有一些方法可以使用，比如

addTrack 給流新增一個新軌道
getAudioTracks包含流中所有的音軌
getVideoTracks 於媒體流中包含的每個視訊軌道
getTracks 此流的中的所有物件

MediaRecorder

這個就是錄製流的一個方法。

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);
    }
}

看下效果

想要體驗的可以開啟這個音視訊錄製，手機上使用更佳。

好了，今天的教程就介紹到這裡，拜拜！