原生JavaScript实现录屏功能

news2024/10/5 13:44:12

1. 前言

使用JavaScript实现浏览器中打开系统录屏功能

示例图:

示例图

2. 源码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="start">开始录制</button>
    <button id="end">结束录制</button>
    <script>
      let recorder;
      // 开始录制视频按钮点击事件
      document.getElementById('start').addEventListener('click', function () {
        // 获取当前屏幕,video:true表示获取屏幕,audio:true表示获取声音
        navigator.mediaDevices.getDisplayMedia({ video: true, audio: true }).then(stream => {
          // stream就是返回的视频流
          // 使用MediaRecorder录制视频流
          recorder = new MediaRecorder(stream);

          // 定义data变量,用于存放视频数据
          const data = [];

          // 在ondataavailable(录制视频的时候触发)
          recorder.ondataavailable = function (e) {
            // 将视频数据添加到data中
            data.push(e.data);
          };

          // onstop表示视频录制完毕
          recorder.onstop = function () {
            // 获取录制窗口并调用stop方法停止录制
            this.stream.getTracks().forEach(track => track.stop());

            // 将视频数据转化为blob对象
            const blob = new Blob(data, { type: this.mimeType });

            // 创建a标签(用于下载)
            const a = document.createElement('a');

            // 使用URL.createObjectURL给视频流创建链接
            a.href = URL.createObjectURL(blob);

            // 设置下载时的视频名称
            a.download = new Date().getTime() + '.webm';

            // 调用a标签的click方法下载视频
            a.click();

            // 使用URL.revokeObjectURL方法释放占用的资源
            URL.revokeObjectURL(a.href);

            // 删除a标签
            a.remove();
          };
          // recorder.start()开始录制
          recorder.start();
        });
      });
      // 结束录制视频按钮点击事件
      document.getElementById('end').addEventListener('click', function () {
        // 停止录屏
        recorder.stop();
      });
    </script>
  </body>
</html>


## 3. 总结
以上就是本期分享的全部内容了,本篇博客只是分享的录屏的小demo,使用时可以根据不同的情景调整源码,例如腾讯会议的这种实时分享屏幕之类的需求