Vue实现录制屏幕并本地保存功能

更新时间：2022年04月12日 10:34:36 作者：小皮猪

这篇文章主要介绍了Vue实现录制屏幕功能并本地保存,这里用的是用的是HBuilder X开发，结合示例代码给大家介绍的非常详细，需要的朋友可以参考下

一、Vue

用的也是之前那篇文章里面的文件

Vue使用Vue调起摄像头，进行拍照并能保存到本地

用的是HBuilder X开发，目录如下：

三、实现

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);}
	}
});

效果：

到此这篇关于Vue实现录制屏幕功能并本地保存的文章就介绍到这了,更多相关vue录制屏幕保存本地内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
这篇文章主要介绍了vue+elementUI(el-upload)图片压缩,默认同比例压缩操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
Vue 列表过滤与排序的实现
这篇文章主要介绍了Vue 列表过滤与排序的实现，文章围绕主题展开详细的内容介绍，具有一定的参考价值需要的小伙伴可以参考一下
2022-05-05
VUE配置proxy代理的开发测试及生产环境
这篇文章主要为大家介绍了VUE配置proxy代理的开发环境、测试环境、生产环境详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-08-08
VUE3刷新页面报错问题解决:Uncaught SyntaxError:Unexpected token &apo
这篇文章主要介绍了VUE3刷新页面报错：Uncaught SyntaxError: Unexpected token ‘＜‘,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-03-03
vue中tinymce的使用实例详解
TinyMCE Vue是TinyMCE官方发布的Vue组件，可以更轻松地在Vue应用程序中使用TinyMCE，这篇文章主要介绍了vue中tinymce的使用,需要的朋友可以参考下
2022-11-11
Vue eventBus事件总线封装后再用的方式
EventBus称为事件总线,当两个组件属于不同的两个组件分支,或者两个组件没有任何联系的时候,不想使用Vuex这样的库来进行数据通信,就可以通过事件总线来进行通信,这篇文章主要给大家介绍了关于Vue eventBus事件总线封装后再用的相关资料,需要的朋友可以参考下
2022-06-06
Vue的生命周期操作示例
这篇文章主要介绍了Vue的生命周期操作,结合实例形式分析了vue生命周期中各个函数的运行步骤,需要的朋友可以参考下
2019-09-09
vue-router vuex-oidc动态路由实例及功能详解
这篇文章主要为大家介绍了vue-router vuex-oidc动态路由实例及功能详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-11-11
一文搞懂vue编译器(DSL)原理
本文主要介绍了一文搞懂vue编译器(DSL)原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05
如何使用sm4js进行加密和国密sm4总结
近期由于公司项目的需要开始研究国密SM4加密,下面这篇文章主要给大家介绍了关于如何使用sm4js进行加密和国密sm4的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-04-04