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
oraudio
orcanvas
orgif
mimeType
接受 这些值(MDN文档)recorderType
接受MediaStreamRecorder
orStereoAudioRecorder
orWhammyRecorder
orGifRecorder
or 来自这个页面的其他类型timeSlice
接受一个毫秒数; 用它来强制基于间隔的blobondataavailable
将此函数与timeSlice一起传递以获取基于间隔的blobcheckForInactiveTracks
接受 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 WhammyRecordercanvas
接受一个类似对象:{width: 320, height: 240}
;以下Recorder可以传入这个参数 MultiStreamRecorder, CanvasRecorder and WhammyRecordersampleRate
used only by the StereoAudioRecorderbufferSize
used only by the StereoAudioRecordernumberOfAudioChannels
used only by the StereoAudioRecorder