利用RecordRTC录制WebRTC中传输的媒体流

最新推荐文章于 2024-05-17 07:18:27 发布

Xieyh@CUC

最新推荐文章于 2024-05-17 07:18:27 发布

阅读量1.6k

点赞数

分类专栏： WebRTC 文章标签： webrtc javascript

本文链接：https://blog.csdn.net/weixin_41821317/article/details/115439620

版权

WebRTC 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

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

3.2 运行结果

播放file.webm显示如下，可根据需要转码至mp4等格式。

Xieyh@CUC

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
4
评论
利用RecordRTC录制WebRTC中传输的媒体流

一、RecordRTC简介参考https://blog.csdn.net/u014293306/article/details/81287026RecordRTC：是一个为现代浏览器开发的基于javascript的媒体记录库（支持WebRTC的 getUserMedia API ），它为不同的设备和浏览器进行了优化，带来了全客户端（无插件）的媒体记录方案。Recorder：通过RecordRTC的API生成的针对不同媒体类型的记录器，支持的媒体类型包括 MediaStreamRecorder （流媒
复制链接

扫一扫

专栏目录