WebRTC網頁錄製音影片教程_MarkGuan

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

方法介紹

getUserMedia

通過getUserMedia這個介面來獲取裝置的攝像頭和麥克風，返回一個Promise物件。

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

constraints包括一下幾種寫法：

請求音影片

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

請求特定的裝置影片解析度

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

使用前攝像頭（預設）

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

強制使用後置攝像頭

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

例如：

```js 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]);

例如

```js // 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); } ```

實戰演練

頁面結構部分

```html

```

js部分

獲取元素新增事件

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

開始錄製

js // 開始錄製 function start (type) { let option = type == 'audio' ? { audio: true } : { video: true, } createMedia(type, option); }

停止錄製

```js // 停止錄製 function stop (type) { mediaRecorder.stop(); }

通用方法

```js // 全域性引數 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);
}

} ```

看下效果

在這裡插入圖片描述

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

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

WebRTC網頁錄製音影片教程

目錄

相關API

方法介紹

getUserMedia

MediaRecorder

實戰演練