原生js实现摄像头录制以及麦克风录制，并合成视频文件

第一步 定义开启和停止按钮以及试看video标签

    <video class="video" width="600px" controls></video>
    <button class="record-btn">record</button>
    <button class="stop-btn" disabled>stop</button>

第二步 监听click事件并进行设备授权

 let btnRecord = document.querySelector(".record-btn");
 let btnStop = document.querySelector(".stop-btn");
 btnRecord.addEventListener("click", async function () {
        // 获取麦克风音频流及摄像头视频流
        let stream = await navigator.mediaDevices.getUserMedia({
          audio: true,
          video: true,
        });

        // 启用停止按钮
        btnStop.disabled = false;
        btnRecord.disabled = true;
      });
 btnStop.addEventListener("click", function () {
        mediaRecorder.stop();

        // 停止录制后重新启用记录按钮，禁用停止按钮
        btnStop.disabled = true;
        btnRecord.disabled = false;
        });
      });

第三步给开始按钮进行--- 音频流和视频流的合成

// 设置合成文件格式以及参数
const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")
          ? "video/webm; codecs=vp9"
          : "video/webm";
        mediaRecorder = new MediaRecorder(stream, {
          mimeType: mime,
        });

        mediaRecorder.addEventListener("dataavailable", function (e) {
        //整合起来放进数组
          chunks.push(e.data);
        });

// 开启录制
        mediaRecorder.start();

第四步 给停止按钮添加 --- 录制停止，文件导出

  // 在媒体录制器停止时触发的回调函数中处理视频文件生成
        mediaRecorder.addEventListener("stop", function () {
          let blob = new Blob(chunks, {
            type: chunks[0].type,
          });
          let url = URL.createObjectURL(blob);

          let video = document.querySelector("video");
          video.src = url;

          let a = document.createElement("a");
          a.href = url;
          a.download = "video.webm";
          a.click();

结语

代码比较简单，可以前往gitee.com/tomhadi/ado…