RecordRTC.js | 在线演示

用于音频+视频+屏幕+画布（2D+3D动画）录制的WebRTC JavaScript库

Chrome扩展或数十个简单演示，它是开源的并且有API文档

使用Promise的演示：

let stream = await navigator.mediaDevices.getUserMedia({video: true, audio: true});
let recorder = new RecordRTCPromisesHandler(stream, {
  type: 'video'
});
recorder.startRecording();

const sleep = m => new Promise(r => setTimeout(r, m));
await sleep(3000);

await recorder.stopRecording();
let blob = await recorder.getBlob();
invokeSaveAsDialog(blob);

使用常规编码的演示：

navigator.mediaDevices.getUserMedia({
  video: true,
  audio: true
}).then(async function(stream) {
  let recorder = RecordRTC(stream, {
    type: 'video'
  });
  recorder.startRecording();

  const sleep = m => new Promise(r => setTimeout(r, m));
  await sleep(3000);

  recorder.stopRecording(function() {
    let blob = recorder.getBlob();
    invokeSaveAsDialog(blob);
  });
});

• 观看YouTube视频演示/教程

浏览器支持

编解码器支持

CDN

<!-- 推荐 -->
<script src="https://www.WebRTC-Experiment.com/RecordRTC.js"></script>

<!-- 使用5.6.2或cdnjs上的任何其他版本 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/RecordRTC/5.6.2/RecordRTC.js"></script>

<!-- NPM，即 "npm install recordrtc" -->
<script src="node_modules/recordrtc/RecordRTC.js"></script>

<!-- bower -->
<script src="bower_components/recordrtc/RecordRTC.js"></script>

配置

const recorder = RecordRTC(stream, {
  // 音频、视频、画布、gif
  type: 'video',

  // audio/webm
  // audio/webm;codecs=pcm
  // video/mp4
  // video/webm;codecs=vp9
  // video/webm;codecs=vp8
  // video/webm;codecs=h264
  // video/x-matroska;codecs=avc1
  // video/mpeg -- 目前还不被任何浏览器支持
  // audio/wav
  // audio/ogg  -- 仅Firefox支持
  // 演示：simple-demos/isTypeSupported.html
  mimeType: 'video/webm',

  // MediaStreamRecorder, StereoAudioRecorder, WebAssemblyRecorder
  // CanvasRecorder, GifRecorder, WhammyRecorder
  recorderType: MediaStreamRecorder,

  // 禁用日志
  disableLogs: true,

  // 获取基于时间间隔的blob
  // 值以毫秒为单位
  timeSlice: 1000,

  // 需要上面的timeSlice
  // 通过回调函数返回blob
  ondataavailable: function(blob) {},

  // 如果摄像头停止则自动停止录制
  checkForInactiveTracks: false,

  // 需要上面的timeSlice
  onTimeStamp: function(timestamp) {},

  // 针对音频和视频轨道
  bitsPerSecond: 128000,

  // 仅针对音频轨道
  // 当codecs=pcm时被忽略
  audioBitsPerSecond: 128000,

  // 仅针对视频轨道
  videoBitsPerSecond: 128000,

  // 由CanvasRecorder和WhammyRecorder使用
  // 它类似于"帧率"
  frameInterval: 90,

  // 如果您将多个流录制到单个文件中
  // 这有助于您查看正在录制的内容
  previewStream: function(stream) {},

  // 由CanvasRecorder和WhammyRecorder使用
  // 您也可以传递{width:640, height: 480}
  video: HTMLVideoElement,

  // 由CanvasRecorder和WhammyRecorder使用
  canvas: {
    width: 640,
    height: 480
  },

  // 由StereoAudioRecorder使用
  // 范围从22050到96000
  sampleRate: 96000,

  // 由StereoAudioRecorder使用
  // 范围从22050到96000
  // 让我们强制16khz录音：
  desiredSampRate: 16000,

  // 由StereoAudioRecorder使用
  // 合法值为（256、512、1024、2048、4096、8192、16384）
  bufferSize: 16384,

  // 由StereoAudioRecorder使用
  // 1或2
  numberOfAudioChannels: 2,

  // 由WebAssemblyRecorder使用
  frameRate: 30,

  // 由WebAssemblyRecorder使用
  bitrate: 128000,

  // 由MultiStreamRecorder使用 - 用于访问HTMLCanvasElement
  elementClass: 'multi-streams-mixer'
});

MediaStream参数

MediaStream参数接受以下值：

let recorder = RecordRTC(MediaStream || HTMLCanvasElement || HTMLVideoElement || HTMLElement, {});

API

RecordRTC.prototype = {
  // 开始录制
  startRecording: function() {},

  // 停止录制
  // 在回调函数内获取Blob
  stopRecording: function(blobURL) {},

  // 暂停录制
  pauseRecording: function() {},

  // 恢复录制
  resumeRecording: function() {},

  // 在特定时长后自动停止录制
  setRecordingDuration: function() {},

  // 重置录音机状态并删除数据
  reset: function() {},

  // 调用保存对话框
  save: function(fileName) {},

  // 返回录制的Blob
  getBlob: function() {},

  // 返回Blob-URL
  toURL: function() {},

  // 返回Data-URL
  getDataURL: function(dataURL) {},

  // 返回内部录音机
  getInternalRecorder: function() {},

  // 初始化录音机 [已弃用]
  initRecorder: function() {},

  // 如果录音机状态改变时触发
  onStateChanged: function(state) {},

  // 将录制的blob写入indexed-db存储
  writeToDisk: function(audio: Blob, video: Blob, gif: Blob) {},

  // 从indexded-db存储获取录制的blob
  getFromDisk: function(dataURL, type) {},

  // [已弃用]
  setAdvertisementArray: function([webp1, webp2]) {},

  // [已弃用] 清除录制的数据
  clearRecordedData: function() {},

  // 清除内存；清除所有内容
  destroy: function() {},

  // 获取录音机的状态
  getState: function() {},

  // [只读] 属性：录音机的状态
  state: string,

  // 录制的blob [只读] 属性
  blob: Blob,

  // [只读] 数组缓冲区；仅对StereoAudioRecorder有用
  buffer: ArrayBuffer,

  // RecordRTC版本 [只读]
  version: string,

  // [只读] 仅对StereoAudioRecorder有用
  bufferSize: integer,

  // [只读] 仅对StereoAudioRecorder有用
  sampleRate: integer
}

请在此处查看文档：https://recordrtc.org/

全局API

// "bytesToSize"返回人类可读的大小（以MB或GB为单位）
let size = bytesToSize(recorder.getBlob().size);

// 修复视频定位问题
getSeekableBlob(recorder.getBlob(), function(seekableBlob) {
  invokeSaveAsDialog(seekableBlob);
});

// 此函数调用保存对话框
invokeSaveAsDialog(recorder.getBlob(), 'video.webm');

// 使用这些全局变量来检测浏览器
let browserInfo = {isSafari, isChrome, isFirefox, isEdge, isOpera};

// 使用此功能将blob存储到IndexedDB存储中
DiskStorage = {
  init: function() {},
  Fetch: function({audioBlob: Blob, videoBlob: Blob, gifBlob: Blob}) {},
  Store: function({audioBlob: Blob, videoBlob: Blob, gifBlob: Blob}) {},
  onError: function() {},
  dataStoreName: function() {}
};

如何解决回声问题？

1. 设置<video>.muted=true和<video>.volume=0
2. 在getUserMedia上传递audio: {echoCancellation:true}

维基

• https://github.com/muaz-khan/RecordRTC/wiki

发布

• https://github.com/muaz-khan/RecordRTC/releases

单元测试

• https://travis-ci.org/muaz-khan/RecordRTC

问题/疑问？

• Github：https://github.com/muaz-khan/RecordRTC/issues
• Disqus：https://www.webrtc-experiment.com/RecordRTC/#ask
• Stackoverflow：http://stackoverflow.com/questions/tagged/recordrtc
• 电子邮件：muazkh => gmail

致谢

规范与参考

1. MediaRecorder API
2. Web Audio API
3. Canvas2D
4. Media Capture and Streams

谁在使用RecordRTC？

许可证

RecordRTC.js在MIT许可证下发布。版权所有 (c) [Muaz