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黑暗技巧：禁止瀏覽器點擊“后退”按鈕

家有沒有這樣的經歷，家里的電器壞了，給商家打電話時，客服馬上就知道你是誰，你購買了什么型號的產品，何時購買，是否報修過，每次報修的情況等，能精準貼心地為你服務，商家的形象也油然而升。那么此功能是怎么做到的，有哪些實施方案，成本價格是多少，本文科普這方面知識，供大家參考，如果需要源代碼，也歡迎留言或私信，可免費提供。

1、工作原理

上述功能，專業名稱是來電彈屏，是指客戶來電話時，電腦屏幕上立即彈出客戶資料。要實現此功能，你首先要持有客戶資料，并錄入電腦的管理軟件中，這是基礎。其次，你需要購買一個CTI設備（Computer Telephony Integration），用它把電話機與電腦連接起來。電話打進來時，在電話機端，客服仍可正常摘機通話，而在電腦端，CTI設備能識別來電號碼，并把號碼傳遞給電腦，電腦軟件根據號碼查找客戶，最后彈出其資料。從來電到彈屏，整個過程能在瞬間完成，使得客服在接電話前就看到資料，胸有成竹地進行溝通。以下為設備接線示意圖：

除彈屏外，CTI設備還能自動錄音，能把錄音文件傳給電腦，把每次通話的時間、號碼、是否接聽、通話長度、錄音文件等記錄下來，就能形成通話日志，籍此可完整了解通話過程、還原溝通場景、監督話務質量等。

2、軟件安裝與對接

按上圖連接硬件設備后，還要在電腦中安裝設備驅動，并與管理軟件對接，軟硬件相互配合，才能實現以上功能。

（1）編程開發對接

如果貴單位有開發人員，可以自己編程對接，設備廠家提供了各種編程范例，包括：Java、C#、Delphi、Powerbuild、VC、VB、HTML Javascript等，你可在范例的基礎上改編，就非常簡單了。這里采用一段簡化后的HTML Javascript代碼，說明對接方式，如下圖所示：

說明：行2，引入設備的js庫；行4，聲明一個設備object；行6，為object指定事件處理函數；行10，啟動設備；行14，事件處理函數體T_GetEvent()。

從以上代碼可以看出，CTI設備的工作邏輯挺簡單的，只需引入支持文件，定義一個設備object，再進行初始化，它就能開始工作，事件發生時會調用函數T_GetEvent()，你的主要任務就是編寫該函數，實現對各種事件的響應與處理。比如，收到來電號碼，就利用該號碼調用管理軟件，查出客戶資料并顯示出來；收到掛機事件，就記錄通話情況、保存錄音文件等。

采用編程方式，能實現很個性化的應用，假如你的資料是Excel形式，你甚至都不需要使用管理軟件，用Excel充當即可，然后用VBA編程，就能實現CTI功能。

（2）現有軟件對接

如果貴單位沒有開發人員，就只能使用支持CTI的軟件了，比如，CTI設備自帶的配套軟件，具有來電彈屏的管理軟件、CRM軟件等，選擇也很多。這里以華創信息管理平臺為例，演示其使用步驟：

第1步：先在平臺里建表，并把信息錄入進去，其中客戶信息要包含電話號碼，這是基礎，如下圖所示：

第2步：啟用來電彈屏，并把客戶信息作為彈屏資料，把電話、手機作為電話號碼字段，如下圖所示：

第3步：客戶信息表中有位張先生，我們請他打電話過來，電腦立即彈出其資料，如下圖所示：

說明：彈出的客戶信息讓人一目了然，且列出了各種業務記錄，讓你快速了解客戶；點擊屏幕上的軟摘機按鈕，可以用耳麥直接通話；點擊屏幕上的軟掛機按鈕，可以軟掛機；點擊電話圖標，可以電腦撥打電話。

第4步：每次通話，都會留下通話記錄，如下圖所示：

說明：點擊記錄中的錄音文件，可播放通話錄音。

3、無線連接方式

前面的設備接線，采用的是固話外線連接CTI設備，但現在很多單位不使用固定電話，而用手機或無線座機了，那該怎么接線呢。此時，可加接一個設備，將無線轉為有線，利用它的有線輸出充當固話外線即可，如下圖所示：

說明：該設備類似于一部手機，插入SIM卡，即可用電話機與外界通話。

4、組建小型400呼叫中心

如果貴公司有多個坐席人員，可采用400電話對外提供服務，對內由400轉接至各個坐席，這樣就可輕松組建中小型的呼叫中心，如下圖所示：

說明：客戶撥打400電話時，由400服務商負責電話的分配與轉接；在各坐席端，來電彈屏及通話錄音的運行機制與單坐席相同，只不過管理軟件不在個人電腦上，而是放在一個公共服務器上。

5、實施成本

實施成本主要有兩塊：一是硬件費用，不同廠家的CTI設備，功能大同小異，價格也相差不多，約幾佰元。二是管理軟件及對接費用，不同廠家的軟件，功能差異較大，價格也相差較多，大家可根據自己情況選用，主要有三種：

（1）如果貴單位有開發人員，可以自己編程對接。這種方式不費錢，但費人工，實際成本只有你自己知道了。

（2）采用CTI設備自帶的配套軟件。這些軟件一般由設備廠家免費贈送，即使不免費，一般也不貴，約幾佰元。優點是便宜，缺點是功能單一，它們通常只有聯系人管理，只能彈出客戶姓名、聯系電話等簡單信息，無法與業務系統對接，無法彈出客戶的訂單、報修、回訪等業務信息。

（3）采用帶彈屏功能的管理軟件或CRM系統。這些軟件的價格千差萬別，從幾千元、幾萬到幾十萬，各種都有，如何選購已超出本文議題，這里只講彈屏相關，這些軟件的優點是彈出的信息很完整，缺點是價格較貴。例如，本文示例的管理平臺，其來電彈屏模塊價格約5000元。

hrome 126 于近期發布了穩定版本，其中一個比較有意思的更新是給 HTML 帶來一個新的元素：<permission> ，它將從這個版本開始試用，并且正在努力走向標準化。

今天我們一起來看下這個 <permission> 元素的用法。

Web 權限提示的問題

當 Web 應用程序需要訪問瀏覽器的高級功能時，需要向用戶主動請求許可。例如，當百度地圖使用 Geolocation API 獲取用戶的地理位置時，瀏覽器會提示用戶申請權限，這是權限規范中定義明確的概念。

申請權限的觸發方式一般分為兩類，被動隱式觸發，或者主動顯示觸發：

例如，Geolocation API 是一個強大的 API，它的使用依賴于首次使用時隱式詢問的方法。例如，當程序調用 navigator.geolocation.getCurrentPosition() 方法時，權限提示框會在第一次調用時自動彈出，還有另外一個例子是 navigator.mediaDevices.getUserMedia()。

一些其他的 API，如 Notification API 或 Device Orientation API，通常有一種顯式的方式通過靜態方法來請求權限，如 Notification.requestPermission() 或 DeviceMotionEvent.requestPermission()。

網站可以在加載時立即調用諸如 navigator.mediaDevices.getUserMedia() 或 Notification.requestPermission() 等方法。這會導致在用戶還沒與網站進行交互時就彈出權限提示。這就是明顯的權限濫用行為，并且影響到兩種方式，既包括首次使用時的隱含詢問，也包括提前明確請求。

權限濫用導致瀏覽器廠商要求有像點擊按鈕或按下按鍵這樣的用戶操作，然后才會顯示權限提示。這種方法的問題在于，瀏覽器很難確定某個特定的用戶操作是否應該導致顯示權限提示。也許用戶只是因為頁面加載時間太長而在頁面上隨意某個地方隨便點擊，有些網站也變得非常擅長誘騙用戶點擊內容來觸發提示。

另一個問題是權限提示框通常顯示的方式：在網站的 “死亡線” 之上（特別是在大屏幕上），也就是說，在應用程序能夠繪制到的瀏覽器窗口區域之外。用戶在剛剛點擊了窗口底部的一個按鈕后，可能會錯過瀏覽器窗口頂部的提示，這種情況還是挺常見的。當瀏覽器有應對權限濫用的緩解措施時，這個問題往往會更加嚴重。

另外，用戶一旦做出了拒絕某個權限的操作，之后想要改變就不太容易了。他們得找到特定的地方，比如那個網站信息下拉菜單，然后去進行重置或調整權限的操作，而且還得重新加載頁面才行。網站也沒辦法提供很方便的途徑讓用戶快速改變權限狀態，還得詳細地告訴用戶怎么去找到地方改變設置。

如果某個權限是非常重要的，比如視頻會議軟件要用麥克風權限，那像谷歌會議這類的軟件就會彈出很顯眼的對話框來告訴用戶怎么去把之前阻止的權限給開通。

<permission>元素

為了解決上面的這些問題，<permission> 元素誕生了。這個元素允許開發者以聲明方式請求使用權限，如下例所示：

<permission type="camera" />

“type” 屬性代表你正在請求的權限列表（如果有多個可以以空格分割）。目前，允許的值是 'camera'，'microphone' 以及 'camera microphone'。默認情況下，這個元素呈現出來的樣子類似于具有最簡用戶代理樣式的按鈕。

對于某些允許附加參數的權限，type-ext 屬性接受以空格分隔的鍵值對，例如 precise:true 地理位置權限。

當用戶與 <permission> 元素交互時，他們可以循環經歷各個階段：

如果他們之前不允許某項功能，他們可以在每次訪問時允許該功能，或者在當前訪問時允許該功能。

如果他們之前允許該功能，他們可以繼續允許，或者停止允許。

如果他們之前不允許某項功能，他們可以繼續不允許它，或者這次允許它。

<permission> 元素的文本會根據狀態自動更新。例如，如果已授予使用某項功能的權限，則文本會更改為表示允許使用該功能。如果需要先授予權限，則文本會更改為邀請用戶使用該功能。將之前的屏幕截圖與以下屏幕截圖進行比較，以查看這兩種狀態。

<permission> 元素可以與 Permissions API 一起使用。有許多事件可供監聽：

• onpromptdismiss：當元素觸發的權限提示被用戶關閉（例如，單擊關閉按鈕或單擊提示之外）時，會觸發此事件。
• onpromptaction：當元素觸發的權限提示已被用戶對提示本身采取某種操作解決時，觸發此事件。這并不一定意味著權限狀態已經改變，用戶可能已經采取了維持現狀的操作（例如繼續允許權限）。
• onvalidationstatuschange：當元素從 "valid" 切換到 "invalid" 時觸發此事件，例如當元素被其他超文本標記語言內容部分遮擋時，會認為是 "invalid"。

我們可以直接在 HTML 代碼中內聯注冊這些事件的事件監聽器（<permission type="…" onpromptdismiss="alert('The prompt was dismissed');" />），或者在 <permission> 元素上使用 addEventListener()：

<permission type="camera" />
<script>
  const permission=document.querySelector('permission');
  permission.addEventListener('promptdismiss', showCameraWarning);

  function showCameraWarning() {
    // Show warning that the app isn't fully usable
    // unless the camera permission is granted.
  }

  const permissionStatus=await navigator.permissions.query({name: "camera"});
  permissionStatus.addEventListener('change', ()=> {
    // Run the check when the status changes.
    if (permissionStatus.state==="granted") {
      useCamera();
    }
    // Run the initial check.
    if (permissionStatus.state==="granted") {
      useCamera();
    }
  });
</script>

最后

參考：https://developer.chrome.com/blog/permission-element-origin-trial