景介绍

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

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

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

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

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…


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

海软件DRM-X 4.0支持加密保护PPT课件，防止录屏和修改盗用。提供多种防护功能，包括防止录屏、防止修改、在课件上显示用户的水印信息。

在线教育培训PPT演示文稿、PPT课件、网页HTML5课件，最大的问题就是盗版问题，盗版的方式通常是录屏截图、抄袭和修改后使用，这些盗版问题一直困扰着内容制作者，也给内容制作者带来巨大的商业损失。那么如何才能保护PPT防止截图录屏、保护PPT课件不被修改和盗用呢？

我们需要借助于SCORM课件制作软件，SCORM是一种标准，是在线学习系统的一种内容标准，课件的内容主要由HTML、XML标签和JS代码组成。iSpring Suite是一款SCORM交互式课件制作工具，可以轻松地将PPT演示文档加入声音、视频、测试题、交互等，同时支持一键转换为HTML5课件和视频课件。

转换后的PPT (HTML5)课件支持在线和本地安全播放，并且支持智能防录屏、黑名单防录屏和用户动态水印功能。经过加密后的HTML5课件无法修改，用户只有获取认证后才可以播放。通过DRM-X 4.0加密，可以有效地防止PPT课件的盗用和修改，更好地保护PPT课件、HTML5动画课件的版权和课件制作者的利益。

加密后的PPT（HTML），在Xvast浏览器中的播放效果(以上截图是开启了允许截图的情况下显示的效果)，带有水印，若开启智能防翻录，则无法截图和录屏。

如何加密保护HTML课件？

请参考DRM-X 4.0HTML网页加密教程，https://www.drm-x.com/DRM_web_page_html_encryption_tutorial.aspx