Vue實(shí)現(xiàn)錄制屏幕并本地保存功能
更新時(shí)間：2022年04月12日 10:34:36 作者：小皮豬
這篇文章主要介紹了Vue實(shí)現(xiàn)錄制屏幕功能并本地保存,這里用的是用的是HBuilder?X開發(fā)，結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
一、Vue
用的也是之前那篇文章里面的文件
Vue使用Vue調(diào)起攝像頭，進(jìn)行拍照并能保存到本地
用的是HBuilder X開發(fā)，目錄如下：
三、實(shí)現(xiàn)
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">繼續(xù)</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);}
}
});效果：
到此這篇關(guān)于Vue實(shí)現(xiàn)錄制屏幕功能并本地保存的文章就介紹到這了,更多相關(guān)vue錄制屏幕保存本地內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解如何使用Vue-PDF在應(yīng)用中嵌入PDF文檔
在現(xiàn)代Web應(yīng)用中，PDF文檔的使用非常普遍，因?yàn)樗梢栽诟鞣N設(shè)備和操作系統(tǒng)上保持一致的外觀和格式，本文我們就來探討一下如何在Vue.js應(yīng)用中使用vue-pdf庫嵌入PDF文檔吧2023-08-08
vuejs 動(dòng)態(tài)添加input框的實(shí)例講解
今天小編就為大家分享一篇vuejs 動(dòng)態(tài)添加input框的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vuex里面有四個(gè)map方法，他們分別可以針對(duì)不同的元素進(jìn)行不同的代碼生成，本文就來詳細(xì)的介紹一下vuex中的四個(gè)map方法，具有一定的參考價(jià)值，感興趣的可以了解一下2023-05-05
VUE3自定義指令防止重復(fù)點(diǎn)擊多次提交的實(shí)現(xiàn)方法
vue3項(xiàng)目,新增彈框連續(xù)點(diǎn)擊確定按鈕防止多次提交,在按鈕上添加自定義指令,這篇文章主要介紹了VUE3自定義指令防止重復(fù)點(diǎn)擊多次提交的實(shí)現(xiàn)方法,需要的朋友可以參考下2024-08-08
vue+echarts定時(shí)重新繪制以達(dá)到刷新的動(dòng)效問題
這篇文章主要介紹了vue+echarts定時(shí)重新繪制以達(dá)到刷新的動(dòng)效問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
Element-UI實(shí)現(xiàn)復(fù)雜table表格結(jié)構(gòu)的操作代碼
Element-UI組件el-table用于展示多條結(jié)構(gòu)類似的數(shù)據(jù),可對(duì)數(shù)據(jù)進(jìn)行排序、篩選、對(duì)比或其他自定義操作,本文給大家介紹Element-UI實(shí)現(xiàn)復(fù)雜table表格結(jié)構(gòu)的操作代碼,感興趣的朋友一起看看吧2023-12-12
本篇文章主要介紹了vue2組件實(shí)現(xiàn)懶加載淺析,運(yùn)用懶加載則可以將頁面進(jìn)行劃分，需要的時(shí)候加載頁面，可以有效的分擔(dān)首頁所承擔(dān)的加載壓力.2017-03-03
vue el-checkbox實(shí)現(xiàn)全選單選方式
這篇文章主要介紹了vue el-checkbox實(shí)現(xiàn)全選單選方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家介紹了Vue響應(yīng)式系統(tǒng)的原理，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要為大家詳細(xì)介紹了vue的插槽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02