用vue自制视频录制工具

当我们需要录制视频时发现视频录制需要vip，其实我们可以用js方法自己写一个

1.我们在 navigator.mediaDevices.getDisplayMedia函数中 传递了 { video: true, audio: true }，以请求屏幕共享权限，包括视频和音频。这将捕获屏幕的同时也捕获声音，因此录制的视频将包括声音轨道。

navigator.mediaDevices.getDisplayMedia({ video: true, audio: true 
}).then(function (stream) {})

2.实例来录制屏幕共享流

const mediaRecorder = new MediaRecorder(stream); 

3.创建一个用于保存录制内容的数据块数组

const recordedChunks = []; 

4.监听数据可用事件并将数据块保存到数组中

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

5.在页面加载后，绑定按钮点击事件来开始录制

<button @click="startScreenRecording">开始录制</button>

附完整代码

<template>
  <div>
    <el-button type="primary" @click="startScreenRecording">开始录制</el-button>
  </div>
</template>

<script setup>
const startScreenRecording = () => {
  const aLink = document.getElementsByTagName("a");
  aLink.style="display: none"
  // 请求屏幕共享权限，包括视频和音频
  navigator.mediaDevices.getDisplayMedia({ video: true, audio: true })
    .then(function (stream) {
      // 创建一个 MediaRecorder 实例来录制屏幕共享流
      const mediaRecorder = new MediaRecorder(stream);

      // 创建一个用于保存录制内容的数据块数组
      const recordedChunks = [];

      // 监听数据可用事件并将数据块保存到数组中
      mediaRecorder.ondataavailable = (event) => {
        if (event.data.size > 0) {
          recordedChunks.push(event.data);
        }
      };

      // 监听录制完成事件
      mediaRecorder.onstop = () => {
        // 创建一个 Blob 对象包含所有录制的数据
        const blob = new Blob(recordedChunks, { type: 'video/webm' });

        // 创建一个下载链接
        const downloadLink = document.createElement('a');
        downloadLink.href = URL.createObjectURL(blob);
        downloadLink.download = 'screen-recording.webm'; // 设置下载文件名
        downloadLink.textContent = '点击这里下载录制的视频'; // 设置链接文本

        // 将链接添加到页面上并触发点击以开始下载
        document.body.appendChild(downloadLink);
        downloadLink.click();
      };

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

      // 在需要停止录制时，调用 mediaRecorder.stop() 方法
      // 例如：setTimeout(() => mediaRecorder.stop(), 5000); // 停止录制在 5 秒后
    })
    .catch(function (error) {
      console.error('获取屏幕共享权限失败：', error);
    });
}
</script>