js实现录屏功能

代码实现

 <video class="video" controls width="600px"></video><button class="record-btn">record button</button><a class="download">下载</a>
<script>let btn = document.querySelector('.record-btn');btn.addEventListener('click', async function() {let stream = await navigator.mediaDevices.getDisplayMedia({video: true})let mime = MediaRecorder.isTypeSupported('video/webm; codecs=vp9') ? 'video/webm; codecs=vp9' : 'video/webm';let mediaRecorder = new MediaRecorder(stream, {mimeType: mime})let chunks = [];mediaRecorder.addEventListener('dataavailable', function(e) {chunks.push(e.data);})mediaRecorder.addEventListener('stop', function() {let blob = new Blob(chunks, {type: chunks[0].type})let video = document.querySelector('video');let url = URL.createObjectURL(blob);video.src = url;// 下载let a = document.createElement('a')a.href = urla.download = 'video.webm'a.click()})mediaRecorder.start()
})

操作流程

选择要录屏的窗口
停止录屏

JavaScript在chrome浏览器实现录屏功能相关推荐

chrome浏览器如何录屏
API理解 MediaDevices.getDisplayMedia():提示用户去选择和授权捕获展示的内容或部分内容,返回一个 promise 对象,成功后会resolve回调一个 MediaStr ...
JavaScript实现一个录屏功能
阅读目录 1.创建一个HTML 2.使用mediaRecorder录制并存入变量中 3.停止屏幕共享播放录制视频 4.自动下载录制的视频 5.完整代码 1.创建一个HTML OBS studio很酷, ...
js实现桌面录屏功能
纯js实现桌面录屏功能案例背景最近在web项目开发过程中,遇到需要录制界面操作视频的需求.在一般情况下,我们一般通过视频录制软件完成桌面录屏功能.然而无意间发现W3C早已提供了API,web也可以 ...
如何使用JS实现一个录屏功能
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取. 带大家用JavaScript实现一个录屏功能.OBS studio很好用,但JavaScript也一样好用, ...
浏览器的全屏功能小结
原文地址: 浏览器的全屏功能小结背景浏览器页面在视频播放, 图片浏览, 编辑文本等场景, 会遇到增大页面的可查看和可交互区域的需求. 对于这种场景, 一般做法是提供一个全屏按钮, 用户可以选择点击 ...
Xbox录屏功能录制没声音的解决办法
很多用户都会在xbox游戏平台中玩各种游戏,并且录制各种视频,使用xbox录制视频的过程中出现录制没有声音,这是怎么回事呢?下面小编就来介绍一下xbox录屏功能录制没声音的解决办法. Win10 Xb ...
vue2+Google实现前端录屏功能
vue2+Google实现前端录屏功能话不多说直接上代码 html <div id="app" v-cloak><p v-if="!inProgres ...
苹果录屏功能没有声音_其实苹果手机也有录屏功能！简单操作几步，就能轻松开启...
现在手机中的娱乐方式越来越多了,大家遇到有趣的事情就想分享给朋友,但是一些视频不能直接分享链接,还是挺麻烦的. 不过我们可以通过录屏的方式来进行分享的,其实苹果手机就自带录屏工具,简单操作几步,就能轻 ...
android 手机录屏功能,手机自带录屏功能在哪里找？轻松搞定屏幕录制
手机的录屏功能如何使用?智能手机发展到现在,除了无线通话功能.讯息发送功能之外,又逐渐发展出拍照功能.上网功能.各类应用交互功能.尤其近几年在手机上看视频成为打发碎片化时间的重要消遣,在手机上录屏的需 ...

JavaScript在chrome浏览器实现录屏功能

js实现录屏功能

代码实现

操作流程

JavaScript在chrome浏览器实现录屏功能相关推荐

最新文章

热门文章