利用浏览器录屏

以下内容参考自网络

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
                
        <div class="left">
  <div id="startButton" class="button">Start</div>
  <h2>Preview</h2>
  <div class="video"><video id="preview" width="100%" height="auto" autoplay muted></video></div>
</div>

<div class="right">
  <div class="rightBtn">
    <div id="stopButton" class="button">Stop</div>
    <a id="downloadButton" class="button">Download</a>
  </div>
  <h2>Recording</h2>
  
  <div class="video"><video id="recording" width="160" height="120" controls></video></div>
</div>
        
        <script src="ffmpeg.min.js"></script>
        <script src="ffmpeg-core.js"></script>
        
        <script>
           let preview = document.getElementById("preview");
let recording = document.getElementById("recording");
let startButton = document.getElementById("startButton");
let stopButton = document.getElementById("stopButton");
let downloadButton = document.getElementById("downloadButton");
let dataChunks = [];
let recorder;

const { createFFmpeg, fetchFile } = FFmpeg;
        //const message = document.getElementById('message');
        const ffmpeg = createFFmpeg({
            log: true,
            //progress: ({ ratio }) => {
            //    message.innerHTML = `完成率: ${(ratio * 100.0).toFixed(2)}%`;
            //},
        });

// 开始录制
function startRecording(stream, lengthInMS) {
  recorder = new MediaRecorder(stream);

  recorder.ondataavailable = (event) => {
    let data = event.data;
    dataChunks.push(data);
  };
  recorder.start(1000);
  console.log(recorder.state + " start to recording .....");
}

stopButton.addEventListener("click", () => {
  // close the recording
  //preview.srcObject.getTracks().forEach((track) => track.stop());
  recorder.stop();


  // Play recorded video
  let recordedBlob = new Blob(dataChunks, { type: "video/webm" });
  recording.src = URL.createObjectURL(recordedBlob);

  // Save download video, click the download button, you can download it
  downloadButton.href = recording.src;
  downloadButton.download = "RecordedVideo.webm";
});

startButton.addEventListener("click", () => {
  // get the stream
  navigator.mediaDevices
    //.getUserMedia({
    .getDisplayMedia({
      audio: true,
      video: true,
    })
    .then((stream) => {
      // set the stream to left video
      preview.srcObject = stream;
      // set the stream to <a> for download
      downloadButton.href = stream;
      // captureStream: which is streaming a real-time capture of the content being rendered in the media element. 
      // A MediaStream object  which can be used as a source for audio or video data by other media
      preview.captureStream =
        preview.captureStream || preview.mozCaptureStream;
      startRecording(preview.captureStream());
    })
    .catch((err) => {
      console.log("recording error: ", err);
    });
});

        </script>
    </body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/921231.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数字反向输出

数字反向输出 C语言代码C 代码Java代码Python代码 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 小明听到广播里的数字后&#xff0c;总喜欢反着念给妈妈听。请聪明的你将小明听到的数字反向输出。 输入 输入为一个整型的四位数n 输出 …

Vue页面不显示也不报错是怎么回事?如何解决?

在使用Vue.js进行前端开发时&#xff0c;有时会遇到一种令人困惑的情况:页面既不显示任何内容&#xff0c;控制台也不报错。这种情况往往让开发者摸不着头脑&#xff0c;但不必过分担心&#xff0c;通过一系列的排查和调试步骤&#xff0c;我们可以找到问题的根源并解决它。 本…

利用 GitHub 和 Hexo 搭建个人博客【保姆教程】

利用 GitHub 和 Hexo 搭建个人博客 利用 GitHub 和 Hexo 搭建个人博客一、前言二、准备工作&#xff08;一&#xff09;安装 Node.js 和 Git&#xff08;二&#xff09;注册 GitHub 账号 三、安装 Hexo&#xff08;一&#xff09;创建博客目录&#xff08;二&#xff09;安装 H…

C#开发基础之借用dotnet CLI命令行参数的设计了解命令行构建用法

前言 在C#开发中&#xff0c;命令行参数是一种重要的机制&#xff0c;用于在程序启动时向应用程序传递配置或指令。无论是构建CLI工具还是配置化启动的桌面程序&#xff0c;掌握命令行参数的用法可以帮助我们设计更灵活的应用程序。 本文将详细介绍C#中命令行参数的基本用法、…

【单元测试】【Android】JUnit 4 和 JUnit 5 的差异记录

背景 Jetbrain IDE 支持生成 Test 类&#xff0c;其中选择JUnit5 和 JUnit&#xff0c;但是感觉这不是标准的单元测试&#xff0c;因为接口命名吧。 差异对比 两者生成的单测API名称同原API&#xff0c;没加test前缀的。使用差异主要表现在&#xff1a; setUp &#xff06; …

网页中调用系统的EXE文件,如打开QQ

遇到一个实际的问题&#xff0c;需要在网页中打开本地的某个工业软件。 通过点击exe文件就可以调用到程序。 比如双击qq的exe就可以启动qq的程序。 那么问题就变成了如何加载exe程序呢&#xff1f; 可以通过Java的 Process process Runtime.getRuntime().exec(command);通过…

FME教程:实现按属性字段合并图斑,同时合并属性字段值,对合并的属性值同步进行去重处理的案例思路方法

目录 一、实现效果 二、实现过程 1.读取数据 2.融合图斑 3.合并属性字段值&#xff0c;并去重 4.属性字段值排序、整理 5.输出成果 6.模板的使用 三、总结 今天介绍使用FME实现按属性合并图斑&#xff0c;同时合并属性字段值&#xff0c;并对合并的属性值同步进行去重…

ant-design-vue中table组件多列排序

antD中table组件多列排序 使用前注意实现效果图实现的功能点及相关代码1. 默认按某几个字段排序2. 点击排序按钮可同时对多个字段进行排序3. 点击重置按钮可恢复默认排序状态。 功能实现完整的关键代码 使用前注意 先要确认你使用的antD版本是否支持多列排序&#xff0c;我这里…

【LeetCode热题100】栈

这道题一共记录了关于栈的5道题目&#xff1a;删除字符串中所有相邻重复项、比较含退格的字符串、基本计算器II、字符串解码、验证栈序列。 class Solution { public:string removeDuplicates(string s) {string ret;for(auto c : s){if(ret.size() 0 || c ! ret.back()) ret …

IText创建加盖公章的pdf文件并生成压缩文件

第一、前言 此前已在文章&#xff1a;Java使用IText根据pdf模板创建pdf文件介绍了Itex的基本使用技巧&#xff0c;本篇以一个案例为基础&#xff0c;主要介绍IText根据pdf模板填充生成pdf文件&#xff0c;并生成压缩文件。 第二、案例 以下面pdf模板为例&#xff0c;生成一个p…

C语言——数组逐元素操作练习

定义一个能容纳10个元素的整形数组a&#xff0c;从键盘读取9个整数存放到前9个数组元素中。 一. 从键盘读取一个整数n和位置p(0<p<8)&#xff0c;插入n到数组a中&#xff0c;插入位置&#xff1a;下标p。要求插入点及后续的数组元素都要后移动。 代码如下&#xff1a; …

“iOS profile文件与私钥证书文件不匹配”总结打ipa包出现的问题

目录 文件和证书未加载或特殊字符问题 证书过期或Profile文件错误 确认开发者证书和私钥是否匹配 创建证书选择错误问题 申请苹果 AppId时勾选服务不全问题 ​总结 在上线ios平台的时候&#xff0c;在Hbuilder中打包遇见了问题&#xff0c;生成ipa文件时候&#xff0c;一…

网络安全之内网安全

下面给出了应对企业内网安全挑战的10种策略。这10种策略即是内网的防御策略&#xff0c;同时也是一个提高大型企业网络安全的策略。 1、注意内网安全与网络边界安全的不同 内网安全的威胁不同于网络边界的威胁。网络边界安全技术防范来自Internet上的攻击&#xff0c;主要是防…

项目总结模版

测试过程记录文档模版 我们经常测试经常需要做项目总结&#xff0c;所以小编这边就整理了一套项目总结模版&#xff0c;希望能够帮助到大家。 一、需求描述 对应指标&#xff1a;记录需求做的价值&#xff0c;用来评估后续项目上线后是否满足预期结果 1、需求文档 上传相关…

visual code:主题背景色的更换、常规设置

1、直接设置 进入界面->工具->主题->选择主题 2、常规设置 进入界面->工具->选项->环境->常规

低速接口项目之串口Uart开发(四)——UART串口实现FPGA内部AXILITE寄存器的读写控制

本节目录 一、设计背景 二、设计思路 三、逻辑设计框架 四、仿真验证 五、上板验证 六、往期文章链接本节内容 一、设计背景 通常&#xff0c;芯片手册或者IP都会提供一系列的用户寄存器以及相关的定义&#xff0c;用于软件开发人员进行控制底层硬件来调试&#xff0c;或封装…

python高阶技巧一

闭包 简单认识一下闭包 以下代码&#xff0c;内层inner函数不仅依赖于自身的参数b&#xff0c;还依赖于外层outer函数的参数a。inner就是一个闭包函数&#xff0c;既能访问外部变量&#xff0c;又保证外部变量不是全局的&#xff0c;不会被篡改掉&#xff0c;确保了外部变量的…

Redis最终篇分布式锁以及数据一致性

在前三篇我们几乎说完了Redis的所有的基础知识以及Redis怎么实现高可用性,那么在这一篇文章中的话我们主要就是说明如果我们使用Redis出现什么问题以及解决方案是什么,这个如果在未来的工作中也有可能会遇到,希望对看这篇博客的人有帮助,话不多说直接开干 一.Hotkey以及BigKey…

湘潭大学人工智能考试复习1(软件工程)

今年的试卷分值分布为&#xff1a; 选填40&#xff0c;两道计算题15x2 两道解答题15x2 复习重点&#xff1a; 1.人工智能学派派别 符号主义学派、连接主义学派、行为主义学派 各学派认知观&#xff1a; 符号主义&#xff08;逻辑主义、心理学派、计算机学派&#xff09;&am…

【蓝桥杯C/C++】深入解析I/O高效性能优化:std::ios::sync_with_stdio(false)

博客主页&#xff1a; [小ᶻZ࿆] 本文专栏: 蓝桥杯C/C 文章目录 &#x1f4af;前言&#x1f4af;C 语言与 C 语言的输入输出对比1.1 C 语言的输入输出1.2 C 语言的输入输出 &#x1f4af; std::ios::sync_with_stdio(false) 的作用与意义2.1 什么是 std::ios::sync_with_st…