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>

录屏+音频

<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
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页