录屏功能

144 阅读2分钟

有时候写一些文档,需要弄些视频,然后把视频转为gif,就可以在掘金上显示。但是视频这块,用一些手机录制或者一些软件录制,感觉不太方便。就想试试看,用js 如何快速实现录制视频。后面发现js 确实有这方面的功能,而且只需要几行代码就可以实现。

1、mediaDevices

  • 接口提供访问连接媒体输入的设备,如照相机和麦克风,以及屏幕共享等。它可以使你取得任何硬件资源的媒体数据
  • 常用方法
    • getDisplayMedia: 提示用户选择显示器或显示器的一部分(例如窗口)以捕获为MediaStream 以便共享或记录。返回解析为 MediaStream 的 Promise。
    • getUserMedia: 在用户通过提示允许的情况下,打开系统上的相机或屏幕共享和/或麦克风,并提供 MediaStream 包含视频轨道和/或音频轨道的输入。

2、MediaRecorder

  • 构造函数会创建一个对指定的 MediaStream 进行录制的 MediaRecorder 实例对象
    • MediaStream 将要录制的流. 它可以是来自于使用 navigator.mediaDevices.getUserMedia() 创建的流或者来自于 <audio><video> 以及 <canvas> DOM元素.
  • MediaRecorder常用实列属性
    • state 只读,返回录制对象MediaRecorder 的当前状态(闲置中,录制中或者暂停 ) (inactive, recording, or paused.)
    • stream 只读,返回录制器对象 MediaRecorder 创建时构造函数传入的stream对象
  • 常用方法
    • stop()停止录制. 同时触发 dataavailable 事件,返回一个存储Blob内容的录制数据,之后不再记录
  • 事件
    • ondataavailable,调用它用来处理 dataavailable 事件, 该事件可用于获取录制的媒体资源 (在事件的 e.data 属性中会提供一个可用的 Blob 对象.
const mediaRecorder = new MediaRecorder(stream[, options])

3、演示案列

<body>
    <button onclick="start()">开始录制</button>
    <button onclick="end()">停止录制</button>
</body>
<script>
    let recorder = null;
    async function start() {
        let videoStream = await navigator.mediaDevices.getDisplayMedia({ video: true });//获取共享视频流
        let audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });//获取音频流
        let tracks = [];//整合视频和音频
        videoStream.getVideoTracks().forEach(t => tracks.push(t));
        audioStream.getAudioTracks().forEach(t => tracks.push(t));
        let stream = new MediaStream(tracks);//重新生成媒体流
        recorder = new MediaRecorder(stream);//开始录制
        let data = [];
        recorder.ondataavailable = (e) => {
            data.push(e.data)
        }
        recorder.onstop = function () {
            this.stream.getTracks().forEach(track => track.stop());
            let blob = new Blob(data, { type: this.mimeType });
            let link = document.createElement("a");
            link.href = URL.createObjectURL(blob);
            link.download = new Date().getTime() + ".webm";
            document.body.appendChild(link);
            link.click();
            URL.revokeObjectURL(link.href);
            link.remove();
        }
        recorder.start();
    }
    function end() {
        recorder.stop();
    }
</script>

0ahxp-bwrly.gif

4、注意,获取多媒体权限,对浏览器需要以下服务才可以,且需要手动同意操作

  • localhost 域
  • 开启了 HTTPS 的域
  • 使用 file:/// 协议打开的本地文件

参考

navigator.mediaDevices.getUserMedia

MediaDevices