Vue實(shí)現(xiàn)錄制屏幕并本地保存功能
更新時(shí)間：2022年04月12日 10:34:36 作者：小皮豬
這篇文章主要介紹了Vue實(shí)現(xiàn)錄制屏幕功能并本地保存,這里用的是用的是HBuilder?X開(kāi)發(fā)，結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
一、Vue
用的也是之前那篇文章里面的文件
Vue使用Vue調(diào)起攝像頭，進(jìn)行拍照并能保存到本地
用的是HBuilder X開(kāi)發(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+elementUI(el-upload)圖片壓縮,默認(rèn)同比例壓縮操作
這篇文章主要介紹了vue+elementUI(el-upload)圖片壓縮,默認(rèn)同比例壓縮操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
Vue?列表過(guò)濾與排序的實(shí)現(xiàn)
這篇文章主要介紹了Vue?列表過(guò)濾與排序的實(shí)現(xiàn)，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值需要的小伙伴可以參考一下2022-05-05
VUE配置proxy代理的開(kāi)發(fā)測(cè)試及生產(chǎn)環(huán)境
這篇文章主要為大家介紹了VUE配置proxy代理的開(kāi)發(fā)環(huán)境、測(cè)試環(huán)境、生產(chǎn)環(huán)境詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
VUE3刷新頁(yè)面報(bào)錯(cuò)問(wèn)題解決:Uncaught?SyntaxError:Unexpected?token?&apo
這篇文章主要介紹了VUE3刷新頁(yè)面報(bào)錯(cuò)：Uncaught?SyntaxError:?Unexpected?token?‘＜‘,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
TinyMCE Vue是TinyMCE官方發(fā)布的Vue組件，可以更輕松地在Vue應(yīng)用程序中使用TinyMCE，這篇文章主要介紹了vue中tinymce的使用,需要的朋友可以參考下2022-11-11
EventBus稱(chēng)為事件總線,當(dāng)兩個(gè)組件屬于不同的兩個(gè)組件分支,或者兩個(gè)組件沒(méi)有任何聯(lián)系的時(shí)候,不想使用Vuex這樣的庫(kù)來(lái)進(jìn)行數(shù)據(jù)通信,就可以通過(guò)事件總線來(lái)進(jìn)行通信,這篇文章主要給大家介紹了關(guān)于Vue?eventBus事件總線封裝后再用的相關(guān)資料,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了Vue的生命周期操作,結(jié)合實(shí)例形式分析了vue生命周期中各個(gè)函數(shù)的運(yùn)行步驟,需要的朋友可以參考下2019-09-09
vue-router vuex-oidc動(dòng)態(tài)路由實(shí)例及功能詳解
這篇文章主要為大家介紹了vue-router vuex-oidc動(dòng)態(tài)路由實(shí)例及功能詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
本文主要介紹了一文搞懂vue編譯器(DSL)原理，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
如何使用sm4js進(jìn)行加密和國(guó)密sm4總結(jié)
近期由于公司項(xiàng)目的需要開(kāi)始研究國(guó)密SM4加密,下面這篇文章主要給大家介紹了關(guān)于如何使用sm4js進(jìn)行加密和國(guó)密sm4的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04