一、Vue

我们还是使用之前文章的Vue.js文件

在这里Vue实现摄像头功能哦

二、创建目录

三、实现

1. index.html

代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="vue.js"></script></head><body><div id="vueapp"><div><button @click="btnRecordClicked" :disabled="recording">录制</button><button @click="btnPauseClicked" :disabled="paused||!recording">暂停</button><button @click="btnResumeClicked" :disabled="!paused||!recording">继续</button><button @click="btnStopClicked" :disabled="!recording">停止</button><button :disabled="!currentWebmData" @click="btnPlayClicked">播放</button></div><video controls ref="player"></video></div><script src="app.js"></script></body>
</html>

2. app.js

代码

 new Vue({el:"#vueapp",data:{currentWebmData:0,recording:false,paused:false},mounted() {this._initApp();},methods:{async _initApp(){// this._stream=await navigator.mediaDevices.getUserMedia({audio:true,video:false});this._stream=await navigator.mediaDevices.getDisplayMedia();this._recorder=new MediaRecorder(this._stream,{mimeType:"video/webm;codecs=h264"});this._recorder.ondataavailable=this.recorder_dataAvailableHandler.bind(this);},recorder_dataAvailableHandler(e){console.log(e);this.currentWebmData=e.data;},btnRecordClicked(){this.recording=true;this.paused=false;this._recorder.start();},btnPauseClicked(){this.paused=true;this._recorder.pause();},btnResumeClicked(){this.paused=false;this._recorder.resume();},btnStopClicked(){this.recording=false;this._recorder.stop();},btnPlayClicked(){this.$refs.player.src=URL.createObjectURL(this.currentWebmData);}}
});

四、效果

1. 选择要录屏的范围

2. 就可以点击开始录制啦

【Vue】动手实现录屏功能并本地保存相关推荐

Unity3d 录屏功能教程指南 | Cross Platform Replay Kit
unity3d项目中进行录屏操作,用到的地方不少,特别是在游戏和AR的项目中,都会看到录屏功能的使用.但是这个功能的解决方案却很少.网上也基本都是一些小打小闹的理论性文章,没有太多实际的意义. ...
js实现桌面录屏功能
纯js实现桌面录屏功能案例背景最近在web项目开发过程中,遇到需要录制界面操作视频的需求.在一般情况下,我们一般通过视频录制软件完成桌面录屏功能.然而无意间发现W3C早已提供了API,web也可以 ...
JavaScript实现一个录屏功能
阅读目录 1.创建一个HTML 2.使用mediaRecorder录制并存入变量中 3.停止屏幕共享播放录制视频 4.自动下载录制的视频 5.完整代码 1.创建一个HTML OBS studio很酷, ...
android录屏功能
思路 android实现录屏功能有两种方案,一种是直接使用android自带的MediaProjectionManager实现录屏功能,第二种是是只录语音,用户的操作通过某种方式进行记录保存,最后通过 ...
如何使用JS实现一个录屏功能
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取. 带大家用JavaScript实现一个录屏功能.OBS studio很好用,但JavaScript也一样好用, ...
苹果录屏功能没有声音_其实苹果手机也有录屏功能！简单操作几步，就能轻松开启...
现在手机中的娱乐方式越来越多了,大家遇到有趣的事情就想分享给朋友,但是一些视频不能直接分享链接,还是挺麻烦的. 不过我们可以通过录屏的方式来进行分享的,其实苹果手机就自带录屏工具,简单操作几步,就能轻 ...
android 手机录屏功能,手机自带录屏功能在哪里找？轻松搞定屏幕录制
手机的录屏功能如何使用?智能手机发展到现在,除了无线通话功能.讯息发送功能之外,又逐渐发展出拍照功能.上网功能.各类应用交互功能.尤其近几年在手机上看视频成为打发碎片化时间的重要消遣,在手机上录屏的需 ...
苹果屏幕录制5831_苹果录屏功能在哪？教你轻松开启iPhone录屏
苹果录屏功能在哪?很多刚使用苹果手机的小伙伴都不知道苹果手机里的录屏功能怎么使用,今天小编就给大家分享一下苹果手机的录屏功能. 详细操作步骤: 1.打开苹果手机的设置界面 2.下拉找到控制中心的选项进 ...
苹果录屏功能没有声音_手机录屏没有声音如何处理？可以从这三个方面入手看看...
先点击"科学舍",再点击"关注",这样您就可以免费收到我们的最新内容了,每天都会有更新,完全是免费订阅,请放心关注.本文转自网络,著作权属归原创者所有.如有侵权 ...

【Vue】动手实现录屏功能并本地保存

一、Vue

二、创建目录

三、实现

1. index.html

代码：

2. app.js

代码

四、效果

【Vue】动手实现录屏功能并本地保存相关推荐

最新文章

热门文章