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