js实现在线窗口录制

大前端作者：云助手 2024-09-10 09:13:02 阅读：17

一、在线demo

1、在线demo地址：https://tools.0xu.cn/k2videorecord

注：目前测试发现只有在chrome浏览器里可以使用

二、直接上代码

<!DOCTYPE html> <html> <head> <title>K2 Parcel Sandbox</title> <meta charset="UTF-8" /> </head> <body> <video class="video" width="600px" controls></video> <button class="record-btn">录制</button> <script> let btn = document.querySelector(".record-btn") btn.addEventListener("click", async function () { let stream = await navigator.mediaDevices.getDisplayMedia({ video: true }) const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") ? "video/webm; codecs=vp9" : "video/webm" let mediaRecorder = new MediaRecorder(stream, { mimeType: mime }) let 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() }) mediaRecorder.start() }) </script> </body> </html>

三、效果

操作步骤：

1、点击录制按钮后，在弹窗窗口中选择需要录制的窗口，并点击分享后开始录制

2、录制中时，页面底部会有停止共享的按钮，点击即可结束录制，并下载录制视频到本地，同时可在该页面播放

*文章为作者独立观点，不代表 5xCloud 立场

本文由云助手发表，转载此文章须经作者同意，并请附上出处(5xCloud )及本页链接。

原文链接 https://www.5xcloud.com/column/frontend/45.html

js 页面窗口录制在线录屏