脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue录制屏幕保存本地

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实现添加标签demo示例代码

    vue实现添加标签demo示例代码

    本篇文章主要介绍了vue实现添加标签demo示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • vue全局引入公共的scss和@mixin与@include的使用方式

    vue全局引入公共的scss和@mixin与@include的使用方式

    这篇文章主要介绍了vue全局引入公共的scss和@mixin与@include的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • vue实现百度搜索功能

    vue实现百度搜索功能

    这篇文章主要为大家详细介绍了vue实现百度搜索功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-09-09
  • vue3中vuex与pinia的踩坑笔记记录

    vue3中vuex与pinia的踩坑笔记记录

    Vuex是一个专为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,这篇文章主要给大家介绍了关于vue3中vuex与pinia踩坑的相关资料,需要的朋友可以参考下
    2021-12-12
  • Vue实现动态控制表格列的显示和隐藏

    Vue实现动态控制表格列的显示和隐藏

    这篇文章主要为大家详细介绍了Vue实现动态控制表格列的显示和隐藏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 15 分钟掌握vue-next函数式api(小结)

    15 分钟掌握vue-next函数式api(小结)

    这篇文章主要介绍了15 分钟掌握vue-next函数式api(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • 一文搞明白vue开发者vite多环境配置

    一文搞明白vue开发者vite多环境配置

    Vue是一款流行的JavaScript框架,用于开发动态单页应用程序,本地安装和环境配置是学习和使用Vue的第一步,下面这篇文章主要给大家介绍了关于vue开发者vite多环境配置的相关资料,需要的朋友可以参考下
    2023-06-06
  • 在 Vue3 中如何使用 styled-components

    在 Vue3 中如何使用 styled-components

    styled-components 的官方 Vue 版本目前已多年没有更新,而且只支持到 Vue2,那么,在 Vue3 中怎么才能使用到 styled-components 呢,下面给大家介绍在 Vue3 中使用 styled-components的相关知识,感兴趣的朋友跟随小编一起看看吧
    2024-05-05
  • vue-cli2.9.3 详细教程

    vue-cli2.9.3 详细教程

    这篇文章主要介绍了vue-cli2.9.3 详细教程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • Vue Electron实现输入法自动刷字数功能详解

    Vue Electron实现输入法自动刷字数功能详解

    这篇文章主要介绍了Vue Electron实现输入法自动刷字数功能，文中的示例代码讲解详细，对我们学习C#有一定的帮助，感兴趣的小伙伴可以跟随小编一起了解一下
    2022-12-12

最新评论