RecordRTC.js: 轻松实现浏览器音频、视频和屏幕录制
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 机制,都能帮助你快速上手并完成你的录制需求。赶快试一试吧!
- 原文作者:iamdev
- 原文链接:https://blog.iamdev.cn/post/2024/RecordRTC_js___%E8%BD%BB%E6%9D%BE%E5%AE%9E%E7%8E%B0%E6%B5%8F%E8%A7%88%E5%99%A8%E9%9F%B3%E9%A2%91_%E8%A7%86%E9%A2%91%E5%92%8C%E5%B1%8F%E5%B9%95%E5%BD%95%E5%88%B6___/
- 版权声明:本作品采用知识共享署名-非商业性使用-禁止转载 4.0 国际许可协议进行许可,非商业转载请注明出处(作者,原文链接),商业转载请联系作者获得授权。