本文介绍如何利用JavaScript和浏览器原生API实现简单的屏幕录制功能。通过调用getDisplayMedia获取屏幕媒体流，结合MediaRecorder API处理视频数据块，最终生成WebM格式文件并触发下载。文章详细解析了开始与停止录制的逻辑及浏览器兼容性检查方法。
一、录制准备
创建一个按钮
<button id="recording-toggle">Start recording</button>
书写JavaScript
var RECORDING_ONGOING = false;
var recordingToggle = document.getElementById("recording-toggle"); // 按钮
recordingToggle.addEventListener("click", function(){
RECORDING_ONGOING = !RECORDING_ONGOING; // 开始 / 停止 录制
if(RECORDING_ONGOING){
recordingToggle.innerHTML = "Stop Recording";
startRecording(); // 开始录制
} else {
recordingToggle.innerHTML = "Start Recording";
stopRecording(); // 停止录制
}
});
代码量虽然看起来不少，但核心逻辑其实很简单：只需向按钮添加一个事件监听器，用于控制录制的开始与停止，并同步更新按钮上的显示文本。
二、开始录制
在编写具体功能函数之前，需要先在函数外部声明三个全局变量。
var blob, mediaRecorder = null;
var chunks = [];
现在，开始屏幕录制
async function startRecording(){
var stream = await navigator.mediaDevices.getDisplayMedia(
{video: {mediaSource: "screen"}, audio: true}
);
deviceRecorder = new deviceRecorder(stream, {mimeType: "video/webm"});
}
我们需要在用户屏幕之外创建媒体流。媒体记录器对象包含一个mimeType属性，该属性指定了输出文件的类型。
可以mimeTypes 在此处阅读更多相关信息。
Edge 浏览器支持video/webmmime 类型，对应的文件扩展名为.webm。可以通过以下方式检查浏览器是否支持mimeType：
console.log(MediaRecorder.isTypeSupported("video/webm"))
console.log(MediaRecorder.isTypeSupported("video/mp4"))
console.log(MediaRecorder.isTypeSupported("video/mp4;codecs=avc1"))
向该函数添加几行startRecording
deviceRecorder.ondataavailable = (e) => {
if(e.data.size > 0){
chunks.push(e.data);
}
}
deviceRecorder.onstop = () => {
chunks = [];
}
deviceRecorder.start(250)
每当有数据产生时，都会将其添加到之前定义的块数组（chunks）中。当停止录制时，将调用该stopRecording() 函数。
三、停止录制
function stopRecording(){
var filename = window.prompt("File name", "video"); // Ask the file name
deviceRecorder.stop(); // 停止录制
blob = new Blob(chunks, {type: "video/webm"})
chunks = [] // 重置数据块
var dataDownloadUrl = URL.createObjectURL(blob);
// 将其下载到用户的设备上
let a = document.createElement('a')
a.href = dataDownloadUrl;
a.download = `${filename}.webm`
a.click()
URL.revokeObjectURL(dataDownloadUrl)
}
用JS做录屏就是这么简单。如果你想要 mp4 或其他格式，则必须使用 API 进行转换或自己进行转换。
浏览器会通知是否正在共享屏幕
以上就是用JS实现简单的屏幕录像机功能的详细内容，更多关于JS屏幕录像机的资料请关注本站其它相关文章！