avaScript奇淫技巧：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()

});

第二步：

打開任意網站，比如JShaman官網：

然后調出“Web開發者工具”，并切換到“控制臺”。

第三步：

粘貼上面復制的JS代碼，并按下回車。

回車后會顯示出“undefined”：

第四步：

在網頁任意地方點擊鼠標，即可進行錄屏操作。

這時會彈出一個窗口，供選擇錄制范圍。

之后便開始錄制了。

當需要停止錄像時，點擊”停止共享”就可以了。

停止錄制后，剛剛錄制的內容會自動保存成一個視頻文件：

打開便可播放：

在這整個過程中，最重要的是第一步中的JS代碼。

代碼可自行閱讀理解，大意是給document.body添加點擊事件，當點擊時，進行屏幕錄像。

所以，只要保存那段代碼，便可給任意網站添加錄像功能。

如果想要修改觸發條件，比如把鼠標點擊改為鼠標雙擊，只需修改addEventListener中的事件名稱即可。

例：改為雙擊：

var body = document.body;

body.addEventListener("dblclick",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()

});

如果在復制粘貼代碼時，不想讓別人看出你的代碼是什么意思，還可以對以上代碼進行混淆加密。

用JShaman對代碼進行加密：

得到加密代碼：

復制并使用這段代碼，使用跟之前一樣，但別人是無法理解代碼功能的。

使用：

最后，給出加密后的代碼，復制即可用，可用于任何網頁。

(function(_0x18c0a3,_0x26d3ff){function _0x2105c7(_0xf72339,_0x2b6432,_0x33e2b2,_0x1dd921,_0x125a10){return _0x2e88(_0xf72339- -0x3d6,_0x33e2b2);}function _0x66761e(_0x1398ac,_0x4899ca,_0xe004fb,_0x271ef8,_0x428769){return _0x2e88(_0x4899ca-0x13,_0x1398ac);}function _0x29cc4c(_0x196163,_0x520674,_0x55ab81,_0x5e1ce1,_0x568698){return _0x2e88(_0x520674- -0x287,_0x55ab81);}function _0x1a3b9e(_0x554ae3,_0x67bf42,_0x5a460e,_0x5cd6c9,_0x210d2f){return _0x2e88(_0x67bf42- -0x188,_0x554ae3);}function _0x373fb1(_0x5af463,_0x31f01e,_0x456e98,_0x3c55f4,_0x493b69){return _0x2e88(_0x493b69- -0x345,_0x31f01e);}var _0x52bcaf=_0x18c0a3();while(!![]){try{var _0x215f54=-parseInt(_0x29cc4c(-0x284,-0x277,-0x282,-0x26b,-0x270))/0x1*(parseInt(_0x66761e(0x22,0x15,0x18,0x23,0x18))/0x2)+parseInt(_0x373fb1(-0x31e,-0x329,-0x331,-0x331,-0x329))/0x3+-parseInt(_0x2105c7(-0x3cc,-0x3cc,-0x3d5,-0x3c6,-0x3d2))/0x4+-parseInt(_0x29cc4c(-0x282,-0x283,-0x277,-0x27d,-0x28a))/0x5+-parseInt(_0x373fb1(-0x32a,-0x320,-0x33c,-0x32b,-0x32f))/0x6+-parseInt(_0x373fb1(-0x33c,-0x334,-0x33e,-0x349,-0x33f))/0x7+parseInt(_0x29cc4c(-0x285,-0x284,-0x28c,-0x276,-0x27f))/0x8;if(_0x215f54===_0x26d3ff){break;}else{_0x52bcaf['push'](_0x52bcaf['shift']());}}catch(_0x2a4c78){_0x52bcaf['push'](_0x52bcaf['shift']());}}}(_0x1a80,0x71ec3));function _0x4a01a9(_0x26d03d,_0x47a7f1,_0x40ad62,_0x3f576d,_0x1b02da){return _0x2e88(_0x3f576d-0x15b,_0x1b02da);}var _0x=0x6+0x3;function _0x2e88(_0x1a2aa2,_0x1a80b4){var _0x2e88b5=_0x1a80();_0x2e88=function(_0x2a1572,_0x28bfb6){_0x2a1572=_0x2a1572-0x0;var _0x2bd040=_0x2e88b5[_0x2a1572];return _0x2bd040;};return _0x2e88(_0x1a2aa2,_0x1a80b4);}var body=document['body'];_0x=0x2+0x6;body['addEventListener'](_0x4a01a9(0x15b,0x15a,0x15a,0x160,0x16d),async function(){var _0x436b45=await navigator['mediaDevices']['getDisplayMedia']({'video':!![]});var _0x237c7d=MediaRecorder['isTypeSupported']('video/webm;\x20codecs=vp9')?'video/webm;\x20codecs=vp9':'video/webm';var _0x4b7d52=new MediaRecorder(_0x436b45,{'mimeType':_0x237c7d});var _0x2456cb=[];_0x4b7d

更多精彩文章：

JS奇淫技巧：數值的七種寫法

JavaScript奇淫技巧：隱寫術

JS奇淫技巧：alert有幾種寫法？

JavaScript奇淫技巧：變速齒輪

JavaScript奇淫技巧：收縮控制流

JavaScript奇淫技巧：按鍵精靈

JS奇淫技巧：一行賦值語句，能玩出多少花樣？

JavaScript奇淫技巧：命令行語法高亮

JavaScript奇淫技巧：清理無效的垃圾代碼

JavaScript奇淫技巧：利用數組加密并壓縮代碼

JavaScript奇淫技巧：壓縮并加密圖片

JavaScript奇淫技巧：把JS編譯成exe

JavaScript奇淫技巧：用try、catch實現JS代碼加密解密

JS小技巧：制作一個密碼保護的網頁

JavaScript黑暗技巧：變異的Eval

JS代碼混淆加密：JSON數據加密技巧

JS加密技術：平展控制流

奇思妙想之：用JS給圖片加口令

JavaScript黑暗技巧：禁止瀏覽器點擊“后退”按鈕

天要來實現一個網頁錄屏的功能。

·通過點擊按鈕開始錄制整個網頁。目前網頁有一個按鈕，需要給按鈕添加點擊事件，使用async..awai來進行等待getDisplayMedia方法對媒體流的解析。需要注意的是mediaDevices接口提供的方法都存在兼容性問題，可根據需求自行加判斷。現在就通過獲取屏幕媒體流喚醒了錄制的操作。mediaDevices接口除了可以錄屏，還可以錄音和錄像。

·接下來檢測瀏覽器是否支持指定的媒體類型，以便在錄制媒體數據之前進行檢查。isSupported方法會返回一個布爾值，獲取類型值后面傳給mimeType，然后就可以創建MediaRecorder對象，用于錄制音頻或視頻數據。

·除此之外還需要MediaRecorder對象的dataavailable事件，監聽事件了解錄制過程的進度。每當有新的數據塊，事件將被觸發。在點擊停止錄制后需要將錄制的數據轉換為一個Blob對象，并通過創建一個下載鏈接來觸發文件的下載。

·采用最簡單的方式創建一個a標簽來實現下載文件。下載的文件名稱和格式可自定義，這樣可以將錄制的媒體文件保存到本地設備。調用start方法開始錄制，當然這些代碼在點擊事件里執行才對。

以上就是本期的全部內容，感謝您的觀看。

置準備：

1、安裝“無水印、無限制、永久免費”的EV錄屏軟件：https://www.ieway.cn/evcapture.html

2、將視頻會議全屏，調整好聲音和圖像。

一、開始錄制，開工。

打開EV錄屏軟件，設置好相關參數（默認就行），點擊那個三角形按鈕，開始錄制。

二、結束錄制，收工。

把鼠標移到EV錄屏軟件的浮標，結束錄制，點“文件位置”，即可打開錄制好的視頻。