WebRTC網頁錄製音影片教程

語言: CN / TW / HK

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

目錄

  • 相關API
  • 方法介紹
  • 實戰演練

相關API

要實現這個功能就涉及到兩個js api。

方法介紹

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

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

通用方法

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

} ```

看下效果

在這裡插入圖片描述 在這裡插入圖片描述

在這裡插入圖片描述

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

好了,今天的教程就介紹到這裡,拜拜!