用JavaScript录屏：一次网络硬刚事件引发的思考-Eoser's page!

今天在抖音上刷到一个视频，说长沙某案件实锤了支付宝在用户买保险时偷偷录屏，有个人隐私被监控的焦虑，我和视频博主发生了激烈的争论，我就偷偷行为给出了反驳。

经过我的调查查验，基本确定了博主是在造谣，制造焦虑来博取流量，理由如下。

首先，支付宝并没有偷偷录屏，在买保险的操作时有弹窗提示会录下操作的流程，而且这是保监会政策要求下的行为，没有偷偷这种说法。

其次，支付宝没有使用系统级的录屏手段，因为android系统录屏时会弹出系统级提示，我尝试过程中并没有出现，对支付宝意外的应用不会有被窥屏风险，最多录屏到支付宝应用内部数据。

最后，检测支付宝流量，正常使用并没有大量数据上传行为。

因为我十分讨厌博主这种行为，在他视频下硬刚，还发消息与@支付宝，最终博主删除视频！

事情是告一段落了，但是我对支付宝如何实现的录屏很好奇，经过我对购买保险流程的流程探索我做了如下两个技术路线的猜测：

技术路线1：记录用户在应用中的点击触摸等行为，利用技术手段和显示内容集合，合成操作视频。

技术路线2：对集成的浏览器内核做修改，利用javasript的录屏功能实现录屏。

根据上面两个技术路线我做了思考，路线一的方法基本上可以覆盖到整个应用，但是生成视频的过程像是造假证据一样，而且监测范围太大，侵犯用户正常使用隐私，感觉不符合保监会的需求，切法律风险大，我觉得可以排除。而技术路线2倒是很有可能，根据观察，保单确认页面属于小程序，小程序运行的基础众所周知就是魔改的浏览器内核，支付宝完全可以通过对内核的修改，加上javascript的录屏方法，将录屏在手机上正常使用（我测试了手机上录制的视频没发正常下载，没有深究原因），录制过程过程无感化（除了开始的弹窗提示，后面没有标识显示在录屏）。

录屏的javascript代码实现

    <script type="text/javascript">
        let chunks = null;
        let mediaRecorder = null;
        async function startRecord() {
            //获取数据流
            let stream = await navigator.mediaDevices.getDisplayMedia({
                video: true
            });
            //浏览器支持的确认
            const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")
                ? "video/webm; codecs=vp9"
                : "video/webm"
            //构建录屏变量
            mediaRecorder = new MediaRecorder(stream, {
                mimeType: mime
            })
            //数据存入变量
            chunks = [];
            mediaRecorder.addEventListener('dataavailable', function (e) {
                chunks.push(e.data)
            });
            //停止录制监听
            mediaRecorder.addEventListener('stop', function () {
                let blob = new Blob(chunks, {
                    type: chunks[0].type
                })
                let url = URL.createObjectURL(blob)

                //将视频设置为视频播放内容
                /* let video = document.querySelector("video")
                video.src = url */

                //自动下载
                let a = document.createElement('a')
                a.href = url
                a.download = 'video.webm'
                a.click()
                //清空数据
                chunks=null;
                mediaRecorder=null;
            });
            mediaRecorder.start()
        }
        function stopRecord() {
            if(mediaRecorder!=null){
                mediaRecorder.stop();
            }
        }
        let bd = document.querySelector("#my_body");
        let count = 0;
        bd.addEventListener("click", function () {
            if (count <= 0) {
                startRecord();
                alert("你点击了屏幕，开始录屏了！");
                count++;
            } else if (count >= 10) {
                alert("你点击了10次屏幕，结束录屏！");
                stopRecord();
                count = 0;
            } else {
                count++;
            }
        });
    </script>

html代码界面

<!DOCTYPE html>
<html>

<head>
    <title>Hello!</title>
    <meta charset="UTF-8">
    <style>
        body {
            background-color: #000;
            overflow: hidden;
        }

        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            color: #fff;
            font-size: 4rem;
            font-weight: bold;
        }

        .container span {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.1);
            }

            100% {
                transform: scale(1);
            }
        }
    </style>
</head>

<body id="my_body">
    <div class="container">
        <span>Hello!</span>
    </div>
	<!--上面的javascript代码-->
</body>
</html>

目录CONTENT

用JavaScript录屏：一次网络硬刚事件引发的思考

评论区