Ke's blog
·
📷 纯前端也可以实现「用户无感知录屏」？
💡
原文中文，约4100字，阅读约需10分钟。
📝
内容提要
本文介绍使用JavaScript实现屏幕录制的方法，包括使用html2canvas库进行网页截图和MediaRecorder API进行视频录制。提供了实现代码和API介绍。可增加跟随鼠标的元素记录鼠标轨迹。
🎯
关键要点
-
使用 navigator.mediaDevices.getDisplayMedia() 方法获取屏幕媒体流。
-
MediaRecorder 对象用于将媒体流录制为视频文件。
-
浏览器会弹出授权窗口，无法实现无感知录制。
-
可以通过不断截图并组合成视频来实现录制。
-
使用 html2canvas 库进行网页截图，支持 CSS 样式和渲染效果。
-
MediaRecorder API 提供音频和视频录制的简单方式。
-
MediaRecorder 的常用方法包括 start()、pause()、resume() 和 stop()。
-
通过 canvas 元素保存截图，并使用 captureStream 方法实时截取媒体流。
-
在停止录制时创建 Blob 并插入到页面上或下载视频。
-
实现的录制仅限于网页内，无法录制网页外的内容。
➡️
