RecordRTC总结

最新推荐文章于 2025-03-14 11:53:07 发布

一MasonChen

最新推荐文章于 2025-03-14 11:53:07 发布

阅读量1.6w

点赞数 9

分类专栏： JavaScript 文章标签： WebRTC RecordRTC

本文链接：https://blog.csdn.net/u014293306/article/details/81287026

版权

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

RecordRTC是一个基于JavaScript的媒体录制库，支持WebRTC标准。它提供了多种媒体录制选项，包括音频、视频、屏幕录制等，并支持多种浏览器。本文介绍如何使用RecordRTC录制音频和视频，包括屏幕和摄像头输入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

RecordRTC总结

概念

RecordRTC：是一个为现代浏览器开发的基于javascript的媒体记录库（支持WebRTC的 getUserMedia API ），它为不同的设备和浏览器进行了优化，带来了全客户端（无插件）的媒体记录方案。
Recorder：通过RecordRTC的API生成的针对不同媒体类型的记录器，支持的媒体类型包括 MediaStreamRecorder （流媒体）、 StereoAudioRecorder（立体声）、 WhammyRecorder 、 GifRecorder（gif动图），其他Recorder类型详见此页面。
Stream：媒体的流对象，通过BOM的api navigator.mediaDevices.getUserMedia 可以获取，此对象在上述api的成功回调作为参数中传入。将此对象传入RecordRTC 的API可以生成Recorder对象，从而进行媒体记录。

流程

获取媒体流 -> 生成recorder -> 开始记录

Demo

安装

npm install recordrtc

var RecordRTC = require('recordrtc');
// or
import RecordRTC from 'recordrtc';

音频记录

以下代码记录了5秒的音频，并打开新窗口播放。

function successCallback(stream) {
      var recordRTC = RecordRTC(stream, { type: 'audio' });
      recordRTC.startRecording();
      setTimeout(() => {
            recordRTC.stopRecording(function(audioURL) {
                  // audioURL为生成音频的URL地址，通过window.open(audioURL)可以实时预览
                  window.open(audioURL);
                  var recordedBlob = recordRTC.getBlob();
                  // 转换为base64
                  recordRTC.getDataURL(function(dataURL) {
                  });
            });
      }, 5000)
}

function errorCallback(error) {
      // maybe another application is using the device
}

var mediaConstraints = { video: false, audio: true };

navigator.mediaDevices.getUserMedia(mediaConstraints).then(successCallback).catch(errorCallback);

HTML元素记录为视频

<script src="https://cdn.WebRTC-Experiment.com/RecordRTC.js"></script>
<script src="https://cdn.webrtc-experiment.com/screenshot.js"></script>

<div id="elementToShare" style="width:100%;height:100%;background:green;"></div>
<script>
var elementToShare = document.getElementById('elementToShare');
var recordRTC = RecordRTC(elementToShare, {
    type: 'canvas'
});
recordRTC.startRecording();
recordRTC.stopRecording(function(videoURL) {
    video.src = videoURL;

    var recordedBlob = recordRTC.getBlob();
    recordRTC.getDataURL(function(dataURL) { });
});
</script>

录屏+音频

getScreenId.js依赖此chrome插件：https://chrome.google.com/webstore/detail/screen-capturing/ajhifddimkapgcifgcodmmfdlknahffk
以下代码可以记录5秒的选择的窗口的视频，以及相同时长的音频，并实时预览，记录完成之后可以播放。

<style>
    html, body, video, canvas {
        margin: 0!important;
        padding: 0!important;
        overflow: hidden!important;
        width: 100%;
        height: 100%;
    }
</style>

<title>Video+Screen recording using RecordRTC</title>
<h1>
    Video+Screen recording using RecordRTC
    (Requires <a href="https://chrome.google.com/webstore/detail/screen-capturing/ajhifddimkapgcifgcodmmfdlknahffk" target="_blank">THIS CHROME EXTENSION</a>)
</h1>

<video controls autoplay></video>

<script src="https://cdn.webrtc-experiment.com/RecordRTC.js"></script>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="https://cdn.WebRTC-Experiment.com/getScreenId.js"></script>
<script>
function captureScreen(cb) {
    getScreenId(function (error, sourceId, screen_constraints) {
        navigator.mediaDevices.getUserMedia(screen_constraints).then(cb).catch(function(error) {
          console.error('getScreenId error', error);
          alert('Failed to capture your screen. Please check Chrome console logs for further information.');
        });
    });
}
function captureCamera(cb) {
    navigator.mediaDevices.getUserMedia({audio: true, video: false}).then(cb);
}
function keepStreamActive(stream) {
    var video = document.createElement('video');
    video.muted = true;
    // setSrcObject是来自于RecordRTC.js的全局方法，将stream设置为传入元素的src，实时预览
    setSrcObject(stream, video);
    video.style.display = 'none';
    (document.body || document.documentElement).appendChild(video);
}
captureScreen(function(screen) {
    keepStreamActive(screen);
    captureCamera(function(camera) {
        keepStreamActive(camera);
        screen.width = window.screen.width;
        screen.height = window.screen.height;
        screen.fullcanvas = true;
        // RecordRTC的第一个参数可以传入数组，同时记录多个媒体流
        var recorder = RecordRTC([screen, camera], {
            type: 'video',
            mimeType: 'video/webm',
            previewStream: function(s) {
                document.querySelector('video').muted = true;
                setSrcObject(s, document.querySelector('video'));
            }
        });
        recorder.startRecording();
        setTimeout(function() {
            recorder.stopRecording(function() {
                var blob = recorder.getBlob();
                document.querySelector('video').src = URL.createObjectURL(blob);
                document.querySelector('video').muted = false;
                [screen, camera].forEach(function(stream) {
                    // 多个视频轨道逐一关闭
                    stream.getVideoTracks().forEach(function(track) {
                        track.stop();
                    });
                    // 多个音频轨道逐一关闭
                    stream.getAudioTracks().forEach(function(track) {
                        track.stop();
                    });
                })
            });
        }, 5 * 1000);
    });
});
</script>

options解读

RecordRTC 的第一个参数是stream，需要传入第二个参数作为配置。

var options = {
    recorderType: MediaStreamRecorder,
    mimeType: 'video/webm\;codecs=vp9'
};
var recordRTC = RecordRTC(stream, options);

也可以通过 startRecording 方法传入

var recordRTC = RecordRTC(stream);

var options = {
    recorderType: MediaStreamRecorder,
    mimeType: 'video/webm\;codecs=vp9'
};
recordRTC.startRecording(options);

type 接受 video or audio or canvas or gif
mimeType 接受这些值(MDN文档)
recorderType 接受 MediaStreamRecorder or StereoAudioRecorder or WhammyRecorder or GifRecorder or 来自这个页面的其他类型
timeSlice 接受一个毫秒数; 用它来强制基于间隔的blob
ondataavailable 将此函数与timeSlice一起传递以获取基于间隔的blob
checkForInactiveTracks 接受 true or false; 用它来禁用默认的 inactive-stream-checker 函数
onTimeStamp MediaStreamRecorder的回调函数; 需要传入timeSlice参数
bitsPerSecond 每秒比特数; 适用于音频和视频的轨道
audioBitsPerSecond 每秒比特数; 只适用于音频轨道
videoBitsPerSecond 每秒比特数; 只适用于视频轨道
disableLogs 接受 true or false; 用它禁用console的日志输出
frameInterval 接受一个毫秒数; 和MultiStreamRecorder, CanvasRecorder and WhammyRecorder一起使用
previewStream 是 MultiStreamRecorder 的回调方法
video 接受一个类似对象: {width: 320, height: 240}; 以下Recorder可以传入这个参数 MultiStreamRecorder, CanvasRecorder and WhammyRecorder
canvas 接受一个类似对象: {width: 320, height: 240};以下Recorder可以传入这个参数 MultiStreamRecorder, CanvasRecorder and WhammyRecorder
sampleRate used only by the StereoAudioRecorder
bufferSize used only by the StereoAudioRecorder
numberOfAudioChannels used only by the StereoAudioRecorder