RecordRTC.js:让你的浏览器变成录音机!

如果你想在网页上实现音频、视频甚至屏幕录制,那 RecordRTC.js 就绝对是你的好帮手!这个开源的 JavaScript 库轻巧强大,能帮你轻松完成各种录制需求。今天就让我们一起深入了解它吧!

为什么选择 RecordRTC.js?

  • 简单易用: 只需要几行代码就能开始录制!
  • 功能丰富: 支持视频、音频、屏幕共享和 Canvas 绘画的录制,甚至可以进行 2D 和 3D 动画录制。
  • 灵活定制: 可以通过配置选项控制录制质量、格式等参数。
  • 开源免费: 任何人都可以使用和修改它的代码!

如何使用 RecordRTC.js?

RecordRTC.js 提供两种主要的用法方式:Promise 和传统的 callback 机制。

1. 使用 Promise 方式(更加简洁):

// 获取用户媒体流 (摄像头和麦克风)
let stream = await navigator.mediaDevices.getUserMedia({video: true, audio: true});

// 创建 RecordRTC 对象,指定录制类型为视频
let recorder = new RecordRTCPromisesHandler(stream, {type: 'video'});

// 开始录制
recorder.startRecording();

// 等待 3 秒
const sleep = m => new Promise(r => setTimeout(r, m));
await sleep(3000);

// 停止录制并获取录制后的 Blob 对象
await recorder.stopRecording();
let blob = await recorder.getBlob();

// 调用保存对话框,让用户保存文件
invokeSaveAsDialog(blob);

2. 使用传统的 callback 方式:

// 获取用户媒体流 (摄像头和麦克风)
navigator.mediaDevices.getUserMedia({video: true, audio: true}).then(async function(stream) {
    // 创建 RecordRTC 对象,指定录制类型为视频
    let recorder = RecordRTC(stream, {type: 'video'});

    // 开始录制
    recorder.startRecording();

    // 等待 3 秒
    const sleep = m => new Promise(r => setTimeout(r, m));
    await sleep(3000);

    // 停止录制,回调函数中获取 Blob 对象并调用保存对话框
    recorder.stopRecording(function() {
        let blob = recorder.getBlob();
        invokeSaveAsDialog(blob);
    });
});

总结:

RecordRTC.js 是一款功能强大且易于使用的 WebRTC 库,让你轻松实现网页上的音频、视频、屏幕和 Canvas 绘画录制。无论是使用 Promise 还是传统的 callback 机制,都能帮助你快速上手并完成你的录制需求。赶快试一试吧!