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

目录
  • 一、Vue
  • 三、实现
    • 1.index.html
    • 2.app.js

一、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录制屏幕保存本地内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue调用摄像头进行拍照并能保存到本地的方法

    vue调用摄像头进行拍照并能保存到本地的方法

    目录 1. 使用Vue.js 2. 创建目录 3.实现: 4.效果 1. 使用Vue.js 把网页内容Ctrl+s保存到本地然后添加到项目中 https://cdn.jsdelivr.net/npm/vue/dist/vue.js 2. 创建目录 3.实现: 1. index.html 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></ti

  • vue生成token并保存到本地存储中

    vue生成token并保存到本地存储中

    首先回顾一下token: token认证是RESTFUL.api的一个很重要的部分,通过token认证和token设置,后端会有一个接口传给前台: http://localhost/yiiserver/web/index.php/token?client_appid=aaa&client_appkey=bbb 其实就是向用户表里去生成一个token 这里的client_id相当于用户名,client_key相当于密码,这样后台会生成一个client_token,我们需要把这个token保存到客户

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

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

    目录 一.Vue 三.实现 1.index.html 2.app.js 一.Vue 用的也是之前那篇文章里面的文件 Vue使用Vue调起摄像头,进行拍照并能保存到本地 用的是HBuilder X开发,目录如下: 三.实现 1.index.html 具体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script

  • vue点击页面空白处实现保存功能

    功能描述 双击表格一行实现表格编辑,点击空白处实现保存. 表格可编辑相关文章在可编辑表格 实现思路 当表格在编辑状态的时候在页面进行click监听,判断点击区域是否为编辑区域,如果不是编辑区域实现保存功能并取消click监听 功能点一:页面监听与取消接听 // 通过addEventListener与removeEventListener实现 document.addEventListener("click", function, false); document.removeEvent

  • vue日历/日程提醒/html5本地缓存功能

    先上图 功能: 1.上拉日历折叠,展示周 2.左右滑动切换月 2."今天"回到今天:"+"添加日程 3.localStorage存储日程 index,html <body> <div id="app" v-cloak @mousedown="down" @mouseup="heightChange"> <!--日历--> <div id="calendar

  • Vue实现本地购物车功能

    Vue实现本地购物车功能

    本文实例为大家分享了Vue实现本地购物车功能的具体代码,供大家参考,具体内容如下 功能分析 : v-for显示商品名字,价格,数量和对商品进行操作,全选的功能 结构仍然分成 : index.html , index.js , style.css index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购

  • laravel excel 上传文件保存到本地服务器功能

    首先需要下载安装好.环境可以使用 本地上传 $file = $request->file('file', 0);//文件名称 /** 判断文件格式以及各种错误 **/ //获取文件的扩展名 $ext = $file->getClientOriginalExtension(); //获取文件的绝对路径 $path = $file->getRealPath(); $file_name = date("YmdHis") . '.' .$ext; //存储文件.disk里面的

  • vue中如何下载文件导出保存到本地

    vue中如何下载文件导出保存到本地

    目录 vue下载文件导出保存到本地 另一种情况 vue中a标签下载本地文件-未找到,原因及解决 错误代码 原因 解决 vue下载文件导出保存到本地 先分析如何下载:先有一个链接地址,然后使用 location.href或window.open()下载到本地 看看返回数据 res.config.url 中是下载链接地址,res.data 中是返回的二进制数据 如何下载 ... <el-button icon="el-icon-download" @click="downl

  • vue项目实现github在线预览功能

    最近在使用 vue-cli 脚手架工具构建自己的第一个 vue 项目,有点小激动,想把它上传到 github 并展示一下预览效果,结果踩了好多坑,折腾了大半天才弄好. 这里假设你也是和我一样使用了 vue-cli 搭建了自己的项目,并且项目也已经上传到了 github 问题1 当我们在命令行执行 npm run build 后,项目的目录下会生成一个 dist 文件夹,它里面又包含一个 static 文件夹和一个 index.html 文件,这是 webpack 最终打包好的文件 我们先尝试在浏

  • Qt音视频开发之视频文件保存功能的实现

    目录 一.前言 二.效果图 三.体验地址 四.相关代码 五.功能特点 5.1 基础功能 5.2 特色功能 5.3 视频控件 5.4 内核ffmpeg 一.前言 和音频存储类似,视频的存储也对应三种格式,视频最原始的数据是yuv(音频对应pcm),视频压缩后的数据是h264(音频对应aac),由于很多播放器或者早期的播放器不支持直接播放h264文件,所以需要用编码器编码成mp4格式,这块就需要用到ffmpeg里面一整套的编码流程,对yuv数据进行编码成MP4格式存储. 在经过对各种视频文件或者视频

  • vue router仿天猫底部导航栏功能

    vue router仿天猫底部导航栏功能

    首先把天猫的导航贴出来,里面包括精选.品牌.会员.购物车.我五个导航及对应的图标. 分析: 1.图标的获取 进入阿里巴巴矢量图标库,网址  http://www.iconfont.cn. 点击官方图标库,选择天猫图标库,选中放入购物车. 点击添加至项目,点击创建新项目按钮,创建tianmao项目,点击确定. 此时会有查看在线链接和下载至本地两种方式,我选择第一种,因为后期如果要添加小图标的话,只需要重新生成在线链接,然后更新link即可 复制链接到index.html的link标签内,具体为 <

  • Android 实现WebView点击图片查看大图列表及图片保存功能

    Android 实现WebView点击图片查看大图列表及图片保存功能

    在日常开发过程中,有时候会遇到需要在app中嵌入网页,此时使用WebView实现效果,但在默认情况下是无法点击图片查看大图的,更无法保存图片.本文将就这一系列问题的实现进行说明. 图示: 项目的知识点: 加载网页后如何捕捉网页中的图片点击事件: 获取点击的图片资源后进行图片显示,获取整个页面所有的图片: 支持查看上下一张的图片以及对图片缩放显示: 对图片进行保存: 其他:图片缓存的处理(不用每次都重新加载已查看过的图片) 项目代码结构: 前期准备(添加权限.依赖和混淆设置): 添加权限: <us

随机推荐