背景介绍

** 涉及技术：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))

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));

相关学习资料推荐，点击下方链接免费报名，先码住不迷路~】

音视频免费学习地址：FFmpeg/WebRTC/RTMP/NDK/Android音视频流媒体高级开发

【免费分享】音视频学习资料包、大厂面试题、技术视频和学习路线图，资料包括（C/C++，Linux，FFmpeg webRTC rtmp hls rtsp ffplay srs 等等）有需要的可以点击788280672加群免费领取~

MediaRecorder记录和捕获媒体，也就是视频和音频getDisplayMedia 和 getUserMedia 获取到的流都需要使用MediaRecorder存储起来，并且可以保存成文件

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

官网安装包下载 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

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…

原文 前端使用html5、ffmpeg实现录屏摄像等功能 - 掘金