用JS轻松实现一个录音、录像、录屏的工具库

最新推荐文章于 2024-08-16 09:10:37 发布

写代码的海怪

最新推荐文章于 2024-08-16 09:10:37 发布

阅读量1.9k

点赞数 3

分类专栏：杂谈文章标签：前端大前端 javascript

本文链接：https://blog.csdn.net/monsterexception/article/details/123274266

版权

本文介绍如何使用WebRTC API和React Hooks创建一个录音、录像和录屏的工具库。通过分析react-media-recorder库，详细阐述了获取媒体流、处理数据和预览、禁音等关键步骤，帮助开发者理解并实现前端多媒体录制功能。

摘要由CSDN通过智能技术生成

前言

哈喽，大家好，我是海怪。

最近项目遇到一个要在网页上录音的需求，在一波搜索后，发现了 react-media-recorder 这个库。今天就跟大家一起研究一下这个库的源码吧，从 0 到 1 来实现一个 React 的录音、录像和录屏的功能。

完整项目代码放在 Github

需求与思路

首先要明确我们要完成的事：录音，录像，录屏。

这种录制媒体流的原理其实很简单。

只需要记住：把输入 stream 存放在 blobList，最后转预览 blobUrl。

基础功能

有了上面的简单思路后，我们可以先做一个简单的录音与录像功能。

这里先把基础的 HTML 结构实现了：

const App = () => {
   
  const [audioUrl, setAudioUrl] = useState<string>('');
  
  const startRecord = async () => {
   }

  const stopRecord = async () => {
   }

  return (
    <div>
      <h1>react 录音</h1>

      <audio src={
   audioUrl} controls />

      <button onClick={
   startRecord}>开始</button>
      <button>暂停</button>
      <button>恢复</button>
      <button onClick={
   stopRecord}>停止</button>
    </div>
  );
}

上面有 开始，暂停，恢复 以及 停止 四个功能，还加加了一个 <audio> 来查看录音结果。

之后来实现 开始 与 停止：

const medisStream = useRef<MediaStream>();
const recorder = useRef<MediaRecorder>();
const mediaBlobs = useRef<Blob[]>([]);

// 开始
const startRecord = async () => {
   
  // 读取输入流
  medisStream.current = await navigator.mediaDevices.getUserMedia({
    audio: true, video: false });
  // 生成 MediaRecorder 对象
  recorder.current = new MediaRecorder(medisStream.current);

  // 将 stream 转成 blob 来存放
  recorder.current.ondataavailable = (blobEvent) => {
   
    mediaBlobs.current.push(blobEvent.data);
  }
  // 停止时生成预览的 blob url
  recorder.current.onstop = () => {
   
    const blob = new Blob(mediaBlobs.current, {
    type: 'audio/wav' })
    const mediaUrl = URL.createObjectURL(blob);
    setAudioUrl(med