利用RecordRTC錄製WebRTC中傳輸的媒體流

阿新 • • 發佈：2020-12-22

技術標籤：WebRTC webrtc selenium javascript java

一、RecordRTC簡介

參考https://blog.csdn.net/u014293306/article/details/81287026

RecordRTC：是一個為現代瀏覽器開發的基於javascript的媒體記錄庫（支援WebRTC的 getUserMedia API ），它為不同的裝置和瀏覽器進行了優化，帶來了全客戶端（無外掛）的媒體記錄方案。
Recorder：通過RecordRTC的API生成的針對不同媒體型別的記錄器，支援的媒體型別包括 MediaStreamRecorder （流媒體）、 StereoAudioRecorder（立體聲）、 WhammyRecorder 、 GifRecorder（gif動圖），其他Recorder型別詳見此

頁面。
Stream：媒體的流物件，通過BOM的api navigator.mediaDevices.getUserMedia 可以獲取，此物件在上述api的成功回撥作為引數中傳入。將此物件傳入RecordRTC 的API可以生成Recorder物件，從而進行媒體記錄。

二、錄製步驟

2.1 安裝RecordRTC

在專案資料夾中開啟終端，輸入：

npm install recordrtc

安裝完成後，專案資料夾中出現

在recordrtc_demo.html檔案中引入RecordRTC.js

<script src="node_modules/recordrtc/RecordRTC.js" 
></script>

2.2 錄製

開始錄製->停止錄製->下載

1. 當頁面中開始播放視訊時，開始錄製

function handleUserMedia(stream) {
    video.srcObject = stream;

    // recording
    recorder = RecordRTC(stream, {
        type: 'video'
    });
    recorder.startRecording();
}

2.按下stopbutton時，停止錄製

document.getElementById("btn-stop-recording" 
).onclick=function (){
    this.disabled = true;
    recorder.stopRecording(stopRecordingCallback);
}

function stopRecordingCallback() {
    video.src = video.srcObject = null;
    video.src = URL.createObjectURL(recorder.getBlob());
    // 下載
    createDownloadFile();
    recorder.stream.stop();
    recorder.destroy();
    recorder = null;
}

3. 下載至本地

由於檔案是webm格式，因此加上.webm字尾。

function createDownloadFile(){
    var link=document.getElementById('download');
    link.download = "file.webm";
    link.href = URL.createObjectURL(recorder.getBlob());
    link.click();
}

三、demo

3.1 完整寫法

demo由三部分組成：

負責頁面顯示的recordrtc_demo.html
負責媒體流播放、記錄和下載的video_recording_simplified.js
負責自動化測試的test.java

recordrtc_demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>recordrtc_demo</title>
</head>
<div id="mainDiv">
    <h1><code>recordrtc()</code> very simple demo</h1>
    <h2>video_recording</h2>
<!--    <button id="btn-start-recording">Start Recoding</button>-->
    <button id="btn-stop-recording">Stop Recoding</button>
    <a id="download">Download</a>
    <hr>
    <video controls autoplay playsinline></video>
</div>
<script src="node_modules/recordrtc/RecordRTC.js"></script>
<script src="js/video_recording_simplified.js"></script>
</body>
</html>

video_recording_simplified.js

var video = document.querySelector("video");
var constraints = {video: true, audio: true};
var recorder;

navigator.mediaDevices.getUserMedia(constraints).then(handleUserMedia).catch(handleUserMediaError);

function stopRecordingCallback() {
    video.src = video.srcObject = null;
    video.src = URL.createObjectURL(recorder.getBlob());
    // 下載
    createDownloadFile();
    recorder.stream.stop();
    recorder.destroy();
    recorder = null;
}

function createDownloadFile(){
    var link=document.getElementById('download');
    link.download = "file.webm";
    link.href = URL.createObjectURL(recorder.getBlob());
    link.click();
}

function handleUserMedia(stream) {
    video.srcObject = stream;

    // recording
    recorder = RecordRTC(stream, {
        type: 'video'
    });
    recorder.startRecording();
}

function handleUserMediaError(error) {
    alert("Unable to capture your camera. Please check console logs.");
    console.log(error);
}

document.getElementById("btn-stop-recording").onclick=function (){
    this.disabled = true;
    recorder.stopRecording(stopRecordingCallback);
}

demo採用selenium執行，java程式碼如下：

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;

import java.util.concurrent.TimeUnit;

public class test {
    public static void main(String[] args) throws InterruptedException {
        String htmlURL="file:html檔案絕對路徑";
        String FAKE_DEVICE = "--use-fake-device-for-media-stream";
        String FAKE_UI = "--use-fake-ui-for-media-stream";
        String FAKE_VIDEO = "--use-file-for-fake-video-capture=src/BOMBOMBOMBOM.y4m";
        String FAKE_AUDIO = "--use-file-for-fake-audio-capture=src/BOMBOMBOMBOM.wav";
        // 新增啟動引數
        ChromeOptions options=new ChromeOptions();
        options.addArguments("--no-sandbox");
        options.addArguments(FAKE_DEVICE);
        options.addArguments(FAKE_UI);
        options.addArguments(FAKE_VIDEO);
        options.addArguments(FAKE_AUDIO);
        // 啟動Chrome
        WebDriver driver=new ChromeDriver(options);
        driver.get(htmlURL);
        TimeUnit.SECONDS.sleep(30);
        driver.findElement(By.id("btn-stop-recording")).click();
        TimeUnit.SECONDS.sleep(5);
        driver.quit();
    }
}