一款好用的基于vue的录屏插件recordrtc，拿走不谢

第一步：下载安装包

npm i recordrtc

第二步：复制代码，即可使用：

<template>
<div class="record-page"><div style="margin-bottom: 15px;"><el-button @click="startRecording" :disabled="videoStart" size="small">开始录制</el-button><el-button @click="stopRecording" :disabled="!videoStart" size="small" id="btn-stop-recording">结束录制</el-button></div><video controls autoplay playsinline ref="video" width="400" height="300"></video></div></template><script>import RecordRTC from 'recordrtc';export default {name: "screenRecord",data() {return {video: null,videoStart: false,recorder: null,}},created() {if (!navigator.getDisplayMedia && !navigator.mediaDevices.getDisplayMedia) {let error = 'Your browser does NOT support the getDisplayMedia API.';throw new Error(error);}},mounted() {this.video = document.querySelector('video');},methods: {invokeGetDisplayMedia(success, error) {let displaymediastreamconstraints = {video: {displaySurface: 'monitor', // monitor, window, application, browserlogicalSurface: true,cursor: 'always' // never, always, motion}};// above constraints are NOT supported YET// that's why overridnig themdisplaymediastreamconstraints = {video: true};if (navigator.mediaDevices.getDisplayMedia) {navigator.mediaDevices.getDisplayMedia(displaymediastreamconstraints).then(success).catch(error);}else {navigator.getDisplayMedia(displaymediastreamconstraints).then(success).catch(error);}},captureScreen(callback) {this.invokeGetDisplayMedia((screen) => {this.addStreamStopListener(screen, () => {//});callback(screen);}, function (error) {console.error(error);alert('Unable to capture your screen. Please check console logs.\n' + error);});},addStreamStopListener(stream, callback) {stream.addEventListener('ended', function () {callback();callback = function () { };}, false);stream.addEventListener('inactive', function () {callback();callback = function () { };}, false);stream.getTracks().forEach((track)=> {track.addEventListener('ended', () =>{this.stopRecording()callback();callback = function () { };}, false);track.addEventListener('inactive', function () {callback();callback = function () { };}, false);});},startRecording() {this.captureScreen(screen=>{this.video.srcObject = screen;this.recorder = RecordRTC(screen, {type: 'video'});this.recorder.startRecording();// release screen on stopRecordingthis.recorder.screen = screen;this.videoStart = true;});},stopRecordingCallback() {this.video.src = this.video.srcObject = null;this.video.src = URL.createObjectURL(this.recorder.getBlob());// 如果需要下载录屏文件可加上下面代码let url=URL.createObjectURL(this.recorder.getBlob())const a = document.createElement("a");document.body.appendChild(a);a.style.display = "none";a.href = url;a.download = new Date() + ".mp4";a.click();window.URL.revokeObjectURL(url);//以上是下载所需代码this.recorder.screen.stop();this.recorder.destroy();this.recorder = null;this.videoStart = false;},stopRecording() {this.recorder.stopRecording(this.stopRecordingCallback);}},}
</script><style scoped></style>

一款好用的基于vue的录屏插件recordrtc，拿走不谢相关推荐

基于 Matlab的录屏软件
部分代码: myVideo = VideoWriter 常规属性: Filename: 'my10video.avi' Path: ...
QT软件开发-基于FFMPEG设计录屏与rtsp、rtmp推流软件(支持桌面与摄像头)（一）
QT软件开发-基于FFMPEG设计录屏与rtsp.rtmp推流软件(支持桌面与摄像头)(一) https://xiaolong.blog.csdn.net/article/details/126954 ...
QT软件开发-基于FFMPEG设计录屏与rtsp、rtmp推流软件(支持桌面与摄像头)（四）
QT软件开发-基于FFMPEG设计录屏与rtsp.rtmp推流软件(支持桌面与摄像头)(一) https://xiaolong.blog.csdn.net/article/details/126954 ...
js时间选择器_Vuestic Admin一款免费与美妙基于Vue.js开发的管理模板
Vuestic Admin 简介 vuestic admin是一款流行,免费与美妙的基于Vue.js开发出来的管理模板,包括38以上个定制用户界面组件,由Epicmax开发,由Vasili Savit ...
pc 图片预览放大端vue_安利一款简单好用的Vue图片预览插件
在项目中因为要经常用到图片预览效果,自己写的话麻烦死啦(懒) vue-photo-preview 一个基于 photoswipe 的 vue 图片预览插件,支持移动端和PC端,支持各种手势操作,放大缩 ...
基于vue.js的dialog插件art-dialog-vue2.0发布
art-dialog-vue -- 经典.优雅的网页对话框控件优点支持普通与 12 方向气泡状对话框支持 ARIA 标准面向未来:基于 HTML5 Dialog 的 API 支持标准与模态对话 ...
vue img src 动态赋值_一个基于Vue的开源延迟加载插件——vuelazyload
介绍 vue-lazyload是一个基于Vue的延迟加载插件,用于延迟加载Vue组件或者图像. Github https://github.com/hilongjw/vue-lazyload 特点轻 ...
基于vue的tiptap编辑器插件（一）
前言最近在重构我的vue项目,发现vue-quill-editor这个插件的自定义配置有些局限,我也不是很懂,然后去查的时候发现,这个插件已经没有团队在维护了,这个插件是基于quill的,我如果要了 ...
基于vue的图片裁剪插件vue-cropper
我在网上找了很多关于vue裁剪图片的文章,demo都太长了,实在是太长了.有些还都看不懂,最后还是用了个大佬的demo,但是项目实践过程中还是有问题没解决.先介绍吧.效果是下面这样的, 我这里采用了4 ...

一款好用的基于vue的录屏插件recordrtc，拿走不谢

一款好用的基于vue的录屏插件recordrtc，拿走不谢相关推荐

最新文章

热门文章