原生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 () {
          // 获取屏幕和窗口共享流（包括屏幕音频，如果支持）
          const screenStream = await navigator.mediaDevices.getDisplayMedia({
            video: true,
            audio: true,
          });
          // 获取麦克风音频流
          const micStream = await navigator.mediaDevices.getUserMedia({
            audio: true,
          });

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

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

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

// 设置合成文件格式以及参数
          // 合并音频流到屏幕视频流中
          stream = new MediaStream([
            ...screenStream.getTracks(),
            ...micStream.getTracks(),
          ]);

          // 初始化MediaRecorder
          const mime = "video/webm; codecs=vp9";
          mediaRecorder = new MediaRecorder(stream, { mimeType: mime });

          mediaRecorder.addEventListener("dataavailable", function (e) {
            chunks.push(e.data);
          });

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

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

        // 在媒体录制器停止时触发的回调函数中处理视频文件生成
        mediaRecorder.addEventListener("stop", () => {
          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 = "combined.webm";
          a.click();
        });

结语

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