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

作者:京东保险 张洁

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

一、录制准备

创建一个按钮

bash 复制代码
<button id="recording-toggle">Start recording</button>

书写JavaScript

ini 复制代码
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 个全局变量(在函数之外)。

ini 复制代码
var blob, mediaRecorder = null;
var chunks = [];

现在,开始屏幕录制

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

arduino 复制代码
console.log(MediaRecorder.isTypeSupported("video/webm"))
console.log(MediaRecorder.isTypeSupported("video/mp4"))
console.log(MediaRecorder.isTypeSupported("video/mp4;codecs=avc1"))

向该函数添加几行startRecording

ini 复制代码
 deviceRecorder.ondataavailable = (e) => {
     if(e.data.size > 0){
         chunks.push(e.data);
     }
 }
 deviceRecorder.onstop = () => {
     chunks = [];
 }
 deviceRecorder.start(250)

每当有数据时,都会将其添加到块数组(之前定义)中。当停止录制时,将调用该stopRecording() 函数。

三、停止录制
ini 复制代码
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 进行转换或自己进行转换。

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

相关推荐
IT_陈寒8 小时前
一键生成活动页面的智能体开发实践:从策划到分发的全自动化解决方案
人工智能·程序员
Always_July10 小时前
每个程序员都应该知道的一些最基本的事情是什么?
程序员
DyLatte11 小时前
逃离大厂1000天,我过的还好吗?
程序员
摆烂工程师13 小时前
o3-pro 发布上线了!成本降了80%,温柔的奇点(Team用户也可用)
人工智能·算法·程序员
redreamSo14 小时前
AI Daily | AI日报:尹良升:SGLang 助力大模型部署; OpenAI深夜连发,开源延期引猜测; OpenAI发布o3-pro,奥特曼展望AI
程序员·aigc·资讯
程序员鱼皮16 小时前
学 Java 还是 Go 语言?这事儿很简单!
java·后端·计算机·程序员·开发·编程经验·自学编程
alicelovesu16 小时前
全栈开发者的“精神分裂”:当你的本地环境需要同时运行PHP、Node.js和Python
数据库·程序员
硬核隔壁老王17 小时前
从零开始搭建RAG系统系列(十):RAG系统性能优化技巧-生成模块优化 (Optimizing Generator)
人工智能·程序员·llm
硬核隔壁老王17 小时前
从零开始搭建RAG系统系列(九):RAG系统性能优化技巧-检索模块优化 (Optimizing Retriever)
人工智能·程序员·llm
LLM大模型17 小时前
LangChain篇-消息管理与聊天历史存储
人工智能·程序员·llm