屏幕录制可通过mediarecorder和getdisplaymedia api实现；2. 麦克风权限应先请求屏幕共享，再单独请求音频以避免多次弹窗；3. 优化文件大小可降低分辨率、帧率，选择vp9编码或限制时长；4. 添加水印可用canvas api绘制并捕获流，或录制后用ffmpeg.js处理；5. 错误处理需捕获用户拒绝、api不支持及录制中断等异常并给出提示。完整实现需结合安全策略与用户体验，最终方案在浏览器限制下可行但功能有限。
屏幕录制在 JavaScript 中实现起来，直接使用原生 API 是比较困难的，因为浏览器出于安全考虑，限制了直接访问底层硬件设备的能力。不过，我们可以借助
MediaRecorder
API 和
getDisplayMedia
API 来实现一个简易的屏幕录制功能。核心思路是：先获取屏幕共享的 MediaStream，然后使用 MediaRecorder 将 MediaStream 中的数据录制下来，最后将录制的数据保存为文件。
解决方案
以下是一个简单的 JavaScript 屏幕录制示例：
async function startRecording() { try { const stream = await navigator.mediaDevices.getDisplayMedia({ video: { mediaSource: "screen" }, audio: true, // 可选，如果需要录制音频 }); const recorder = new MediaRecorder(stream); let data = []; recorder.ondataavailable = (event) => data.push(event.data); recorder.onstop = () => { const blob = new Blob(data, { type: "video/webm" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.style.display = "none"; a.href = url; a.download = "screen-recording.webm"; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); // 释放 URL 对象 stream.getTracks().forEach(track => track.stop()); // 停止所有轨道 }; recorder.start(); return recorder; } catch (err) { console.error("Error accessing screen:", err); // 处理用户拒绝共享屏幕的情况 }}async function stopRecording(recorder) { recorder.stop();}// 使用示例let recorderInstance = null;document.getElementById("startBtn").addEventListener("click", async () => { recorderInstance = await startRecording();});document.getElementById("stopBtn").addEventListener("click", () => { if (recorderInstance) { stopRecording(recorderInstance); }});
这个代码片段首先定义了
startRecording
函数，它使用
navigator.mediaDevices.getDisplayMedia
获取屏幕共享的 MediaStream。然后，创建一个
MediaRecorder
对象，并设置
ondataavailable
和
onstop
事件处理程序。
ondataavailable
事件处理程序将录制的数据添加到
data
数组中，
onstop
事件处理程序将
data
数组中的数据合并为一个 Blob 对象，并创建一个下载链接，以便用户可以下载录制的文件。
stopRecording
函数简单地调用
recorder.stop()
来停止录制。
最后，代码片段添加了两个按钮的事件监听器，分别用于启动和停止录制。
屏幕录制时如何处理麦克风权限请求？
当同时需要录制屏幕和麦克风音频时，需要在
getDisplayMedia
中同时请求视频和音频权限。但是，用户可能会先授权屏幕共享，然后才授权麦克风。在这种情况下，浏览器可能会弹出多个权限请求窗口，这可能会让用户感到困惑。
一种更好的做法是，先请求屏幕共享权限，然后在屏幕共享启动后，再请求麦克风权限。这样可以避免弹出多个权限请求窗口。
async function startRecordingWithAudio() { try { const stream = await navigator.mediaDevices.getDisplayMedia({ video: { mediaSource: "screen" }, audio: false // 先不请求音频 }); // 检查是否需要同时录制麦克风 const shouldRecordAudio = confirm("是否同时录制麦克风？"); let audioStream = null; if (shouldRecordAudio) { try { audioStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false }); // 将麦克风音轨添加到屏幕共享流中 audioStream.getTracks().forEach(track => stream.addTrack(track)); } catch (audioErr) { console.error("Error accessing microphone:", audioErr); alert("无法访问麦克风，将只录制屏幕。"); // 如果用户拒绝麦克风权限，可以继续只录制屏幕 } } const recorder = new MediaRecorder(stream); let data = []; recorder.ondataavailable = (event) => data.push(event.data); recorder.onstop = () => { const blob = new Blob(data, { type: "video/webm" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.style.display = "none"; a.href = url; a.download = "screen-recording.webm"; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); stream.getTracks().forEach(track => track.stop()); if(audioStream){ audioStream.getTracks().forEach(track => track.stop()); } }; recorder.start(); return recorder; } catch (err) { console.error("Error accessing screen:", err); }}
如何优化屏幕录制的文件大小？
录制的文件大小通常取决于多个因素，包括分辨率、帧率、编码格式和录制时长。
降低分辨率： 降低录制的分辨率可以显著减小文件大小。可以在
getDisplayMedia
的
video
选项中设置
width
和
height
属性来降低分辨率。降低帧率： 降低帧率也可以减小文件大小，但可能会导致录制的视频看起来不流畅。可以在创建
MediaRecorder
对象时，通过设置
mimeType
选项来指定帧率。例如：
new MediaRecorder(stream, { mimeType: 'video/webm; codecs=vp9', videoBitsPerSecond : 1000000 })
，可以尝试调整
videoBitsPerSecond
的值。选择合适的编码格式： 不同的编码格式具有不同的压缩率。VP9 是一种高效的视频编码格式，可以提供比 VP8 或 H.264 更好的压缩率。限制录制时长： 避免录制不必要的长时间视频。
屏幕录制过程中如何添加水印？
直接在 JavaScript 中实现复杂的水印功能比较困难，因为
MediaRecorder
API 本身并不提供直接添加水印的接口。不过，可以通过一些间接的方法来实现水印效果。
一种方法是使用 Canvas API 将水印绘制到屏幕共享的 MediaStream 中。首先，创建一个 Canvas 元素，并将水印绘制到 Canvas 上。然后，使用
captureStream
方法从 Canvas 中获取 MediaStream，并将该 MediaStream 作为
MediaRecorder
的输入。
这种方法的缺点是，水印是静态的，不能动态改变。此外，由于水印是直接绘制到屏幕上的，因此可能会影响屏幕的显示效果。
另一种方法是在录制完成后，使用视频编辑库（例如 FFmpeg.js）将水印添加到录制的文件中。这种方法的优点是，水印可以动态改变，并且不会影响屏幕的显示效果。但是，这种方法需要在客户端运行视频编辑库，这可能会增加客户端的负担。
以下是使用 Canvas API 添加水印的示例代码：
async function startRecordingWithWatermark() { try { const stream = await navigator.mediaDevices.getDisplayMedia({ video: { mediaSource: "screen" }, audio: true }); // 创建 Canvas 元素 const canvas = document.createElement('canvas'); canvas.width = stream.getVideoTracks()[0].getSettings().width; canvas.height = stream.getVideoTracks()[0].getSettings().height; const ctx = canvas.getContext('2d'); // 获取屏幕共享的视频轨道 const videoTrack = stream.getVideoTracks()[0]; // 创建一个 Video 元素，用于绘制屏幕共享的内容到 Canvas 上 const video = document.createElement('video'); video.srcObject = stream; video.muted = true; // 必须设置 muted 为 true，否则会报错 await video.play(); // 必须 play，否则无法绘制 // 定时绘制 Canvas function drawCanvas() { ctx.drawImage(video, 0, 0, canvas.width, canvas.height); // 添加水印 ctx.font = '30px Arial'; ctx.fillStyle = 'red'; ctx.fillText('Watermark', 50, 50); requestAnimationFrame(drawCanvas); } drawCanvas(); // 从 Canvas 中获取 MediaStream const canvasStream = canvas.captureStream(); // 将屏幕共享的音频轨道添加到 Canvas Stream 中 const audioTracks = stream.getAudioTracks(); audioTracks.forEach(track => canvasStream.addTrack(track)); const recorder = new MediaRecorder(canvasStream); let data = []; recorder.ondataavailable = (event) => data.push(event.data); recorder.onstop = () => { const blob = new Blob(data, { type: "video/webm" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.style.display = "none"; a.href = url; a.download = "screen-recording.webm"; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); stream.getTracks().forEach(track => track.stop()); canvasStream.getTracks().forEach(track => track.stop()); // 停止 canvasStream 的所有轨道 }; recorder.start(); return recorder; } catch (err) { console.error("Error accessing screen:", err); }}
这个示例代码首先创建了一个 Canvas 元素，并将屏幕共享的内容绘制到 Canvas 上。然后，在 Canvas 上添加水印。最后，从 Canvas 中获取 MediaStream，并将其作为
MediaRecorder
的输入。
需要注意的是，使用 Canvas API 添加水印可能会影响性能，特别是当水印比较复杂时。
如何处理屏幕录制过程中的错误？
在屏幕录制过程中，可能会发生各种错误，例如用户拒绝共享屏幕、浏览器不支持
getDisplayMedia
API、录制过程中断等等。为了提高应用程序的健壮性，需要对这些错误进行处理。
处理用户拒绝共享屏幕的错误： 当用户拒绝共享屏幕时，
getDisplayMedia
API 会抛出一个
DOMException
异常。可以在
try...catch
块中捕获该异常，并向用户显示一条友好的错误消息。处理浏览器不支持
getDisplayMedia
API 的错误： 某些旧版本的浏览器可能不支持
getDisplayMedia
API。可以在代码中检查
navigator.mediaDevices.getDisplayMedia
是否存在，如果不存在，则向用户显示一条错误消息。处理录制过程中断的错误： 录制过程中可能会因为各种原因而中断，例如网络连接中断、浏览器崩溃等等。可以在
MediaRecorder
对象的
onerror
事件处理程序中处理这些错误。
async function startRecordingWithErrorHandling() { try { const stream = await navigator.mediaDevices.getDisplayMedia({ video: { mediaSource: "screen" }, audio: true }); const recorder = new MediaRecorder(stream); let data = []; recorder.ondataavailable = (event) => data.push(event.data); recorder.onstop = () => { const blob = new Blob(data, { type: "video/webm" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.style.display = "none"; a.href = url; a.download = "screen-recording.webm"; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); stream.getTracks().forEach(track => track.stop()); }; recorder.onerror = (event) => { console.error("MediaRecorder error:", event.error); alert("录制过程中发生错误：" + event.error.name); // 可以根据 event.error.name 进行更详细的错误处理 }; recorder.start(); return recorder; } catch (err) { console.error("Error accessing screen:", err); if (err.name === 'NotAllowedError') { alert("用户拒绝了屏幕共享请求。"); } else if (err.name === 'NotFoundError') { alert("找不到可用的屏幕共享源。"); } else { alert("发生未知错误：" + err.message); } }}
总的来说，JavaScript 实现屏幕录制功能依赖于浏览器提供的 API，并且受到安全限制。虽然可以实现基本功能，但在高级功能（例如水印、实时编辑）方面存在一定的局限性。
以上就是js怎么实现屏幕录制的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/103068.html
微信扫一扫 
支付宝扫一扫 
