写点什么

用 JS 实现简单的屏幕录像机

  • 2024-10-09
    北京
  • 本文字数:1196 字

    阅读完需:约 4 分钟

作者:京东保险 张洁


本文将介绍如何用 JS 实现简单的屏幕录像机。

一、录制准备

创建一个按钮


<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(); // 停止录制 }});
复制代码


看起来内容很多,但实际上,只是向按钮添加一个事件侦听器来开始和停止记录并相应地更改文本。

二、开始录制

在写功能函数之前,声明 3 个全局变量(在函数之外)。


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)
复制代码


每当有数据时,都会将其添加到块数组(之前定义)中。当停止录制时,将调用该 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 进行转换或自己进行转换。



浏览器会通知是否正在共享屏幕

发布于: 刚刚阅读数: 4
用户头像

拥抱技术,与开发者携手创造未来! 2018-11-20 加入

我们将持续为人工智能、大数据、云计算、物联网等相关领域的开发者,提供技术干货、行业技术内容、技术落地实践等文章内容。京东云开发者社区官方网站【https://developer.jdcloud.com/】,欢迎大家来玩

评论

发布
暂无评论
用JS实现简单的屏幕录像机_京东科技开发者_InfoQ写作社区