基于H5的录屏工具开发

1. 概述

WebRTC是谷歌于2011年开源的一个音视频处理引擎，能够实时的进行视频数据的采集，也就是说能够作直播，也能够作桌面录屏，桌面分享。使用起来仍是比较简单的。html

2. 录屏工具开发

这里开发一个屏幕录制工具。首先在页面中建立一个video标签，用于展现录屏的内容，再建立四个按钮，一个屏幕分享，一个开始录制，一个中止录制，一个下载视频。web

<button id="start">屏幕分享</button>
<button id="record">开始录制</button>
<button id="stop">结束录制</button>
<button id="download">下载视频</button>
<video autoplay playsinline id="player"></video>
复制代码

当点击屏幕分享按钮的时候，经过getDisplayMedia方法来获取桌面的媒体流，这里须要传入一个对象做为配置，对象中能够对video和audio进行设置，值能够是布尔类型也能够是对象类型，这里先设置布尔值，采集视频，不采集音频。api

返回值是一个Promise，而后在Promise的then中将流媒体赋值给video标签的srcObject属性就能够了，很是的简单。数组

document.querySelector('#start').onclick = function() {
    if (navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia) {
        navigator.mediaDevices.getDisplayMedia({
            video: true,
            audio: false
        }).then((stream) => {
            document.querySelector('#player').srcObject = stream;
        }).catch((err) => {
            console.error(err);
        })
    } else {
        alert('不支持这个特性');
    }
}
复制代码

当点击屏幕分享按钮时，浏览器会弹出选项询问录制哪部份内容，这里能够选择录制整个屏幕，或者是某个应用的界面，还能够是浏览器的指定标签页。浏览器

好比这里选择录制整个屏幕，此时video标签中就会显示我电脑屏幕中的内容了。缓存

使用getDisplayMedia是能够将屏幕内容采集到的，若是想要将内容录制下来而且下载到本地需求使用WebRTC提供的另一个类MediaRecorder。markdown

他有不少的事件和方法。使用也很是简单。直接实例化就能够了。须要传入两个参数，第一个是stream，也就是经过getDisplayMedia拿到的媒体流，第二个是可选参数。主要有mimeType指定录制的是音频仍是视频，录制的格式是什么。ide

格式有不少好比谷歌的音视频格式video/webm, audio/webm, 还能够设置为mp4，也能够指定视频的编码video/webm;codecs=vp8, video/webm;codecs=h264, 或者指定音频编码audio/webm;codecs=opus。工具

new MediaRecorder(stream, [, options]);
复制代码

MediaRecorder的api也比较多，第一个是MediaRecorder.start(timeslice)意思是开启录制，timeslice是一个可选参数，若是不设置会存储在一个大的buffer中，若是设置了这个参数就会按照时间段存储数据，好比说10s存储一块数据。ui

MediaRecorder.start()是关闭录制，当中止录制时会触发dataavailable事件，获得最终的blob数据。

MediaRecorder.pause()暂停录制

MediaRecorder.resume()恢复录制

MediaRecorder.isTypeSupported()检查是否支持要录制的文件格式。好比mp4,webm,mp3等格式。

除了这些方法，还存在不少的事件，通常经常使用事件有两个，第一个是ondataavailable当收集到的数据有效就会触发这个事件，因此能够监听这个事件，当获取到数据能够把这个数据存储在缓存区中，能够在e.data中获得。这个事件的执行实际由timeslice决定，若是没有指定则记录整个数据。若是指定了就会定时触发。

onerror错误的时候会触发这个事件，录制会自动中止。

这里改造一下，将getDisplayMedia获取到的流媒体再也不直接赋值给video标签，而是经过MediaRecorder存储起来，再转换给video，这样不光能够赋值给video，并且stream实现了存储也能够下载下来。将getDisplayMedia返回的内容存储到全局的allStream中。

let allStream;
document.querySelector('#start').onclick = function() {
    if (navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia) {
        navigator.mediaDevices.getDisplayMedia({
            video: true,
            audio: false
        }).then((stream) => {
            allStream = stream;
            document.querySelector('#player').srcObject = stream;
        }).catch((err) => {
            console.error(err);
        })
    } else {
        alert('不支持这个特性');
    }
}
复制代码

当点击开始录制按钮时, 首先须要使用MediaRecorder.isTypeSupported方法判断浏览器是否支持这种视频格式。

而后开始建立MediaRecorder对象，传入allStream对象和配置对象，这里只配置了视频格式为webm格式。

接着要绑定ondataavailable事件方法，这个事件会处理采集到的流媒体。其实也就是将数据存储到外部变量buf中。

最后执行mediaRecorder.start开始录制。

let buf = [];
let mediaRecorder;

document.querySelector('#record').onclick = function() {
    // 约束视频格式
    const options = {
        mimeType: 'video/webm;codecs=vp8'
    }
    // 判断是不是支持的mimeType格式
    if (!MediaRecorder.isTypeSupported(options.mimeType)) {
        console.error('不支持的视频格式');
        return;
    }
    try {
        mediaRecorder = new MediaRecorder(allStream, options);
        // 处理采集到的事件
        mediaRecorder.ondataavailable = function(e) {
            if (e && e.data && e.data.size > 0) {
                // 存储到数组中
                buf.push(e.data);
            }
        };
        // 开始录制
        mediaRecorder.start(10);
    } catch (e) {
        console.error(e);
    }
}
复制代码

这样就能够实现页面的录屏了。下载功能须要借助Blob类型来实现，建立Blob类型支持传入一个buffer参数和指定buffer内容的类型，。

当点击下载按钮的时候，要结束录制，也就是调用mediaRecorder的stop方法，还要判断buf是否存在内容，万一有人没录制直接点击下载呢，得防范....

使用new方法建立Blol实例，传入录制的buf和媒体类型，注意这里的类型要和以前录制的一导致用webm。

接着使用URL的createObjectURL方法将blob转换为地址连接。下载就比较简单了，建立一个a标签，而后将视频连接赋值到a标签的href中，文件名称就是a标签的download属性。最后自动触发a标签的click事件就能够了。

document.querySelector('#download').onclick = function() {
    mediaRecorder.stop();
    if (buf.length) {
        const blob = new Blob(buf, { type: 'video/webm'});
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.style.display = 'none';
        a.download = 'aaa.webm';
        a.click();
    } else {
        alert('尚未录制任何内容');
    }
}
复制代码

一样点击屏幕分享会弹出选择窗口的页面。

而后点击开始录制按钮，桌面上就会出现一个正在录屏的标记。

最后点击下载按钮，录制的视频就被下载下来啦。由于我以前已经下载过了，因此这里浏览器自动给我加了一个(1)

打开这个视频看一下。

结束录制就是调用一下mediaRecorder对象的stop方法。

document.querySelector('#stop').onclick = function() {
    if (mediaRecorder) {
        mediaRecorder.stop();
    }
}
复制代码

至此屏幕录制就说完了。对了，这个功能只能在https环境中运行，本地开发能够支持127.0.0.1或者localhost。若是部署正式别忘记使用https。

WebRTC也是能够从摄像头中获取视频流的，只须要将getDisplayMedia替换成getUserMedia就能够了。

document.querySelector('#start').onclick = function() {
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({
            video: true,
            audio: false
        }).then((stream) => {
            document.querySelector('#player').srcObject = stream;
        }).catch((err) => {
            console.error(err);
        })
    } else {
        alert('不支持这个特性');
    }
}
复制代码

WebRTC比较高级的功能是音视频直播，共享远程桌面，即时通讯等，谷歌但愿将WebRTC用做浏览器之间实现音视频通话这种快速的开发使用的。不过这些功能开发起来比较复杂，有时间再来介绍。