JavaScript奇淫技巧：20行代码，实现屏幕录像

本文展示一个技巧，可以给任何网站、网页实现屏幕录像功能。

即使你不是网站的管理者，也可以给它添加录制功能。

方法如下：

第一步：

复制一段JS代码，这段代码是实现录像功能的：

var body = document.body;    body.addEventListener('click',async function(){  
    var stream = await navigator.mediaDevices.getDisplayMedia({video: true});   
    var mime = MediaRecorder.isTypeSupported('video/webm; codecs=vp9') ?'video/webm; codecs=vp9' :'video/webm';  
    var mediaRecorder = new MediaRecorder(stream, {mimeType: mime});   
//录制  
var chunks = [];  
mediaRecorder.addEventListener('dataavailable', function(e) {
     chunks.push(e.data)  
})   
//停止  
mediaRecorder.addEventListener('stop', function(){
     var blob = new Blob(chunks, {type: chunks[0].type});
     var url = URL.createObjectURL(blob);
     var a = document.createElement('a');
     a.href = url;
     a.download = 'video.webm';
     a.click();  
})  
//手动启动  
mediaRecorder.start()  
});

第二步：

打开任意网站，比如BlueCat官网：

然后调出“Web开发者工具”，并切换到“控制台”。

第三步：

粘贴上面复制的JS代码，并按下回车。

回车后会显示出“undefined”

第四步：

在网页任意地方点击鼠标，即可进行录屏操作。

这时会弹出一个窗口，供选择录制范围。

之后便开始录制了。

当需要停止录像时，点击”停止共享”就可以了。

停止录制后，刚刚录制的内容会自动保存成一个视频文件。

保存后本地打开便可播放。

原理

代码可自行阅读理解，大意是给document.body添加点击事件，当点击时，进行屏幕录像。

所以，只要保存那段代码，便可给任意网站添加录像功能。