前端使用html五、ffmpeg实现录屏摄像等功能

前段时间作一个windows的桌面应用，vue + electron，涉及到录屏和摄像功能，网上相关的文档蛮少的给须要的人一些参考

若是文章描写有误或者还有更好的方法，请留言告诉我，笔芯 (´▽`ʃ♡ƪ)

背景介绍

** 涉及技术：vue、electron、ffmpeg、node **

关于录屏和摄像对比了两种方法

• 使用HTML5的api实现

  摄像：mediaDevices（获取设备）+ getUserMedia（获取流） + MediaRecorder（存储）

  录屏：getDisplayMedia（获取流） + MediaRecorder（存储）

• ffmpeg + node：FFmpeg是一套很是强大的音视频处理的开源工具，很少介绍，而Electron基于node和chromium，它容许使用node的API以及几乎全部的node模块，这意味这着咱们能够调用cmd命令来操做ffmpeg实现录屏和摄像录制，固然ffmpeg功能毫不止这点

HTML5实现

mediaDevices

• 用于收集系统上可用的多媒体输入和输出设备的信息

• 该方法调用成功返回设备列表，并传入带有devceID的MediaStreamConstraints对象能够指定设备获取流媒体来源

navigator.mediaDevices.enumerateDevices().then(devicelist => {
    // audiooutput 扬声器
    // audioinput 麦克风
    // audiooutput 摄像
    console.log(devicelist)
  }).catch(err => console.log(err))
复制代码

getUserMedia

• 用户提供访问硬件设备媒体（摄像头、视频、音频、地理位置等）的接口，基于该接口，开发者能够在不依赖任何浏览器插件的条件下访问硬件媒体设备。

• 该方法返回视频流，将获取到的流赋给video标签可实现边录边看

navigator.mediaDevices.getUserMedia(MediaStreamConstraints).then(stream => {
    videoElement.srcObject = stream; // 
  }, error => console.log(error));
复制代码

getDisplayMedia

• 将用户的显示或其部分用做媒体流的来源，它容许以视频流的形式获取用户的显示器或其一部分

• 录屏主要依靠该方法，和getUserMedia同样返回一个promise对象，调用成功返回流，将这个流赋给video 元素实现边录边看

• ** 须要注意的是** 若是你作的是网页端在谷歌上使用这个元素，须要在chrome://flags/开启Experimental Web Platform features功能

    而Electron基于node + chromium构建，在electron须要引入desktopCapturer模块，并在基于该模块使用这个方法

navigator.mediaDevices.getDisplayMedia({ video: true })
  .then(stream => {
    videoElement.srcObject = stream;
  }, error => console.log(error));
复制代码

MediaRecorder

• 记录和捕获媒体，也就是视频和音频

• getDisplayMedia 和 getUserMedia 获取到的流都须要使用MediaRecorder存储起来，而且能够保存成文件

let herf
this.recorder = new MediaRecorder(stream);
this.recorder.ondataavailable = e => { 
  herf = e.data;
  download.href = URL.createObjectURL(herf);
};
this.recorder.start();
复制代码

第二种使用ffmpeg

官网安装包下载 ffmpeg.zeranoe.com/builds/

一些基本参数

• -formats 输出全部可用格式
• -f fmt 指定格式(音频或视频格式)
• -i filename 指定输入文件名，在linux下固然也能指定:0.0(屏幕录制)或摄像头
• -y 覆盖已有文件
• -t duration 记录时长为t
• -fs limit_size 设置文件大小上限
• -itsoffset time_off 设置时间偏移(s)，该选项影响全部后面的输入文件。该偏移被加到输入文件的时戳，定义一个正偏移意味着相应的流被延迟了 offset秒。 [-]hh:mm:ss* [.xxx]的格式也支持 音 频
• -ab bitrate 设置音频码率
• -ar freq 设置音频采样率
• -ac channels 设置通道 缺省为1 视 频
• -b bitrate 设置比特率，缺省200kb/s
• -r fps 设置帧频 缺省25
• -s size 设置帧大小 格式为WXH 缺省160X128.下面的简写也能够直接使用：

录屏相关命令

列出可用的设备包括音频和摄像等等
ffmpeg -list_devices true -f dshow -i dummy

录屏，你也能够加入关于视频的一些基本参数来得到你想要的文件
ffmpeg -f gdigrab -i desktop captrue.mkv -y
复制代码

node调用

cd进入bin文件夹后执行录屏相关命令

关于中止录制，虽然ffmpeg按 Q 能够中止录制，可是咱们经过代码调用是看不到cmd命令行的并且他在录制过程当中是一直占用这个进程什么命令也没法输入 因此这个地方我只想到一个办法就是强制中止该进程

参考文章

MDN developer.mozilla.org/zh-CN/docs/…  developer.mozilla.org/en-US/docs/…  developer.mozilla.org/zh-CN/docs/…

W3C w3c.github.io/mediacaptur…