vue 在线录音录屏实现

前言

如何实现浏览器的在线录屏、系统声音以及麦克风

一、在线录屏实现

需借助浏览器的navigator.mediaDevices.getDisplayMedia以及navigator.mediaDevices.getUserMedia实现此功能，包含浏览器内置声音、麦克风输入、视频输入以及预览等功能

二、使用

1.录屏

开启屏幕权限

let screenStream = await navigator.mediaDevices.getDisplayMedia({
 video: true
});

2.系统声音

代码如下（示例）：

await navigator.mediaDevices.getDisplayMedia({
  audio: true
});

3.麦克风

代码如下（示例）：

navigator.mediaDevices.getUserMedia({
 audio: true,
});

4.视频

代码如下（示例）：

navigator.mediaDevices.getUserMedia({
  video: true,
});

5.如何同时录屏以及系统声音

代码如下（示例）：

let screenStream = await navigator.mediaDevices.getDisplayMedia({
 video: true,
 audio: true
});

5.如何同时录屏以及系统声音

代码如下（示例）：

let screenStream = await navigator.mediaDevices.getDisplayMedia({
 video: true,
 audio: true
});

6.如何同时录屏、系统声音以及麦克风

代码如下（示例）：

// 屏幕权限
      let screenStream = await navigator.mediaDevices.getDisplayMedia({
        video: true,
        audio: checkList.value.includes("voice")?true:false
      });

      // 获取麦克风
      let audioPromiseStream = navigator.mediaDevices.getUserMedia({
          audio: true,
        });
        
     let stream = new MediaStream([...screenStream.getTracks(),...audioPromiseStream.getTracks()]);

7.如何实现完整的视频录制

<template>
  <div>
    <h2>视频录制</h2>
    <button @click="startScreenRecording">Start Recording</button>
    <button @click="stopScreenRecording">Stop Recording</button>

    <br />
    <video v-if="videoUrl" controls :src="videoUrl"></video>
  </div>
</template>

<script>
import RecordRTC from "recordrtc";
import { ElMessage } from "element-plus";
let mediaRecorder;

let recordedChunks = [];
export default {
  data() {
    return {
      videoUrl: "",
    };
  },
  methods: {
    getScreenStream() {
      console.log("getScreenStream进来了");
      return new Promise(async (resolve, reject) => {
        try {
          console.log("promise进来了");
          // if (
          //   navigator.mediaDevices &&
          //   navigator.mediaDevices.getDisplayMedia
          // ) {
          const videoStream = await navigator.mediaDevices.getDisplayMedia({
            video: true,
          });

          // 获取音频流
          const audioStreamPromise = navigator.mediaDevices.getUserMedia({
            audio: true,
          });

          console.log("audioStreamPromise====", audioStreamPromise);

          audioStreamPromise
            .then((audioStream) => {
              let stream = new MediaStream([
                ...videoStream.getTracks(),
                ...audioStream.getTracks(),
              ]);
              resolve(stream);
            })
            .catch((error) => {
              console.error("获取音频流失败", error);
              // 处理错误，可能需要停止视频流或通知用户
              reject(error);
            });

          // return endstream;

          // }
        } catch (error) {
          console.log(error);
          if(error.message.indexOf("Permission") > -1){
            ElMessage.error("请开启电脑屏幕共享权限");
          } else {
            ElMessage.error(error);
          }
          reject(error);
        }
      });
    },
    startRecording(stream) {
      const that = this;
      recordedChunks = [];

      if (!stream) {
        ElMessage.error("steam不正确");
        return;
      }

      // 监听暂停
      if (stream) {
        stream.getTracks().forEach((track) => {
          track.addEventListener("ended", () => {
            that.stopScreenRecording();
          });
        });
      }

      //
      mediaRecorder = new MediaRecorder(stream, {
        mimeType: "video/webm; codecs=vp9,opus",
      });

      mediaRecorder.ondataavailable = function (event) {
        if (event.data.size > 0) {
          recordedChunks.push(event.data);
        }
      };

      mediaRecorder.onstop = function () {
        const blob = new Blob(recordedChunks, {
          type: "video/webm",
        });

        that.downloadRecording(blob);
      };

      mediaRecorder.start();
    },
    async startScreenRecording() {
      console.log("开始录音");
      const stream = await this.getScreenStream();

      console.log("stream====", stream);
      this.startRecording(stream);
    },

    stopScreenRecording() {
      if (mediaRecorder && mediaRecorder.state !== "inactive") {
        mediaRecorder.stop();
      }
    },

    downloadRecording(blob) {
      const url = URL.createObjectURL(blob);

      console.log("blob===", blob);

      this.videoUrl = url;

      const a = document.createElement("a");

      document.body.appendChild(a);

      a.style = "display: none";

      a.href = url;

      a.download = "screen_recording.webm";

      a.click();

      window.URL.revokeObjectURL(url);
    },
  },
};
</script>

总结

亲测有效，欢迎评论收藏…