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元素记录为视频


                    
                    

你可能感兴趣的:(JavaScript)