JavaScript实现一个录屏功能

最新推荐文章于 2024-07-24 23:00:08 发布

m0_54850467

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量335

点赞数

分类专栏：前端 html 文章标签：前端 javascript css3

本文链接：https://blog.csdn.net/m0_54850467/article/details/123348033

版权

阅读目录

1、创建一个HTML
2、使用mediaRecorder录制并存入变量中
3、停止屏幕共享播放录制视频
4、自动下载录制的视频
5、完整代码

1、创建一个HTML

OBS studio很酷，但 JavaScript 更酷，现在，我们用 JavaScript 创建自己的录屏功能。

首先，创建一个HTML文件，包含记录按钮和一个播放标签，内容如下：

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <video class="video" width="600px" controls></video>
    <button class="record-btn">record</button>

    <script src="./index.js"></script>
  </body>
</html>

然后在创建 index.js，监听按钮的点击：

let btn = document.querySelector(".record-btn");

btn.addEventListener("click", function () {
  console.log("hello");
});

在浏览器中打开 html 文件，点击按钮，我们可以在控制台看到打印的 hello。

在这里插入图片描述

2、使用mediaRecorder录制并存入变量中

let btn = document.querySelector("

最低0.47元/天解锁文章

m0_54850467

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现一个录屏功能

阅读目录1、创建一个HTML2、使用mediaRecorder录制并存入变量中3、停止屏幕共享播放录制视频4、自动下载录制的视频5、完整代码1、创建一个HTMLOBS studio很酷，但 JavaScript 更酷，现在，我们用 JavaScript 创建自己的录屏功能。首先，创建一个HTML文件，包含记录按钮和一个播放标签，内容如下：<!DOCTYPE html><html> <head> <title>Parcel S
复制链接

扫一扫

专栏目录