webrtc实现录制屏幕小工具

webrtc（网页即时通信）

大家平常都会听到webrtc，那么webrtc是什么呢，实际上WebRTC是一个免费的开放项目，它通过简单的API为浏览器和移动应用程序提供实时通信（RTC）功能，而对于开发人员来说就是一组api。同时我们说webrtc上一组标准，协议也没错。已被Google、Mozilla、Opera等浏览器支持。

chrome中录制桌面

接下来我们通过使用webrtc中的api实现一个简单的录屏工具

先来介绍下相关api：

getDisplayMedia方法

var promise = 
  navigator.mediaDevices.getDisplayMedia(constraints);

• mediaDevices接口提供访问连接媒体输入的设备，如照相机和麦克风，以及屏幕共享等.
• getDisplayMedia() 方法提示用户去选择和授权捕获展示的内容或部分内容（如一个窗口）
• constraints,MediaStreamConstraints对象,指定返回的MediaStream的要求
• 返回值， 解析为MediaStream的Promise，包含指定的视频轨和音频轨

我们这里只来捕获视频图像。

MediaRecorder

名字既可以看出来，是作为录制的api

• 构造函数

var mediaRecorder = new MediaRecorder(stream[, options]);

stream就是录制的数据来源，options可选参数，字典对象，包含mimeType（指定mime类型），audioBitsPerSecond（指定音频比特率），videoBitsPerSecond（指定视频比特率），bitsPerSecond（指定音频和视频的比特率）具体参考MDN

• 方法

1. isTypeSupported()，是否支持设置MIME type
2. start()，开始录制，可以设置毫秒为参数，这样录制内容会按照你设置的这个值分割成小块，不然就是整体一个大块数据
3. pause(),resume(), stop() 暂停，继续，停止录制

• 事件处理

1. ondataavailable, 调用start后数据后会执行这个事件
2. onerror，发生错误
3. onstop, 停止录制后调用
   
   …

捕获视频图像

下边我们自己开始实现

首先我们设置constraints，我们设置捕获的图像分辨率为1280*720,帧率为15

const streamContrains = {
   
   
    video: {
   
   
        width: 1280,
        height: 720,
        frameRate: 15,
    },
    audio: false
};

然后我们来捕获视频帧,捕获成功后进入onGetStream，出现错误时onGetStreamError打印错误信息

function onGetStream(stream) {
   
   }

function onGetStreamError(error) {
   
   
    console.log('getDisplayMedia error', error);
}

const mDevices = navigator.mediaDevices;
const promise = mDevices.getDisplayMedia(streamContrains);
promise.then(
    onGetStream
).catch(
    onGetStreamError
);

录制捕获的stream

我们看到onGetStream函数还没有实现，我们已经拿到了stream，接下来我们将stream录制下来：

同样我们先来指定mimetype,然后判断下浏览器是否支持，我们这里录制视频的webm封装格式，编码格式是h264。

var options = {
   
   mimeType: 'video/webm;codecs=h264'};
if (!MediaRecorder.isTypeSupported(options.mimeType)) {
   
   
      console.error(`${
     
     options.mimeType} not supported!`);
      return;
}

然后我们把stream和options传入MediaRecorder的构造函数。调用start，指定事件的回调函数：