前端也能实现录屏！

Chrome录屏插件

准备： chrome plugin： 关于录屏功能的开发可以看下面这篇文章引导你的思路（技术不用看只是理思路）： https://www.jianshu.com/p/97ecb4a6e4ce https://github.com/sxei/chrome-plugin-demo   看完后，下面是chrome插件开发的共享屏幕demo，你可以直接拿来用： https://codeload.github.com/wpp/ScreenStream/zip/master   下载完后打开扩展程序，按图操作：  

1. 勾选开发者模式会看见下面有一行按钮

 

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。 ​​

1. 点击打包扩展程序会弹出模态框，找到你extension文件点击确定，打包扩展程序

extension：demo插件

 

​​

1. 打包后就会提示你打包成功，直接点击确定就行别的先不管，然后你会看到如下图所示一般

默认的都是已启用状态，你需要勾选‘允许访问文件网址’（重点）：

 

​​

 

1. 最后打开index.html文件测试是否成功。

录屏demo： 这是录屏功能demo： https://github.com/streamproc/MediaStreamRecorder/releases/tag/1.3.2   你需要下载： MediaStreamRecorder.min.js / MediaStreamRecorder.js（这是补丁） Source code(zip)   下载完后，把 MediaStreamRecorder-master / demos / video-recorder.html 拿出来， 录屏有它就够了，运行之前将下载的补丁js跟它放到同级目下。   chrome plugin 与 录屏功能整合：   打开 video-recorder.html后，你会发现它是调用摄像头录像的功能，那么我们只需要将它这个功能改成我们之前做好的捕捉屏幕的功能就好了。具体如下：  

1. 首先打开video-recorder.html，里面有许多功能按钮，例：start，stop，save等

功能虽然多本质都是一样的，将这三个功能函数直接copy出来放到我们的app.js中，

如下图：

​​

 

注意：合并虽然简单但又很麻烦要考虑许多情况，有时候改着改着就乱了。在这里我就举个简单例子得了，比如：将chrome plugin 中的 app.js的捕捉屏幕功能直接换成 start功能。

  特别注意：需要将onMediaSuccess函数copy出来，这个是录屏功能的关键函数。   说明： onMediaSuccess中你会看到有timeInterval的变量，首先它是以毫秒为单位，是MediaRecorder.start的参数：   MediaRecorder.start(timeslice) timeslice Optional The number of milliseconds to record into each Blob. If this parameter isn't included, the entire media duration is recorded into a single Blob unless the requestData() method is called to obtain the Blob and trigger the creation of a new Blob into which the media continues to be recorded. 利弊： 它越大在切屏时的录屏效果也会非常好，但是录制的时间比你实际录制的时间会短 当它调小的时候就不说了切屏时，画面浑浊并停止录屏。 所以一般都是大点，设置成五秒以上就可以了。   最后你可以打开html看到你的成果啦！

扫码关注我们

微信号：SRE实战

拒绝背锅 运筹帷幄