RecordRTC总结

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