屏幕录制组件(vue) recordrtc

更新vue录制组件
写在开始:部署后提示Cannot read property 'getDisplayMedia' of undefined,解决方法: 掘金 ,我的解决方式是使用ssl证书

demo预览:https://rec.poshir.top web录屏
来源:简书

如何使用

cmd,粘贴代码,执行 npm install recordrtc

"recordrtc": "^5.6.2",

组件代码

<template><div><div><span @click="startR" class="click-btn"> {{ startTxt }}</span></div><div v-if="startTxt !== '开始录制'"><span @click="pauseFn" class="click-btn"> {{ pauseTxt }}</span></div></div>
</template><script>
import RecordRTC from 'recordrtc';export default {name: "rec-video",data() {return {startTxt: "开始录制",pauseTxt: "暂停",start: null,isPause: false,recorder: {},};},methods: {//开始录制startR() {this.startRecording((start) => {this.start = start;});},startRecording(callback) {if (this.startTxt === "开始录制") {this.captureScreen((screenStream) => {this.addStreamStopListener(screenStream, () => {console.log("流停止监听");// 可执行子组件回调// this.$emit("streamStop", {})this.stopFn();});this.isPause = true;this.startTxt = "完成录制";var options = {type: "video",mimeType: "video/mp4",disableLogs: false, // 日志开关getNativeBlob: false,ignoreMutedMedia: false,};this.recorder = RecordRTC(screenStream, options);this.recorder.startRecording();this.recorder.screen = screenStream;this.videoStart = true;callback(true);});} else if (this.startTxt === "完成录制") {this.stopFn();}},/*** 完成录制*/stopFn() {this.startTxt = "开始录制";this.isPause = false;this.stopRecording((start) => {this.start = start;});},/*** 完成录制回调*/stopRecording(callback) {this.recorder && this.recorder.stopRecording(() => {this.fileName = this.getTimeIndex()const url = URL.createObjectURL(this.recorder.getBlob());this.aTag = document.createElement("a");// videoFile:File,可上传 预览 下载let videoFile = new File([this.recorder.getBlob()],this.fileName + ".mp4",{type: "video/mp4",});let downloadUrl = URL.createObjectURL(videoFile);document.body.appendChild(this.aTag);this.aTag.style.display = "none";this.aTag.href = url;this.videoFile = videoFile;this.previewVideo = downloadUrl;// 停止录屏时同时下载到本地this.aTag.download = this.fileName + ".mp4";this.aTag.click();this.recorder.screen.stop();this.recorder.destroy();this.recorder = null;this.videoStart = false;this.$message({message: "录屏停止",type: "success",});callback(false);});},$message(e) {console.log(e);},pauseFn() {if (this.pauseTxt === "暂停") {this.$message({message: "录屏已暂停",type: "success",});this.recorder.pauseRecording();this.pauseTxt = "恢复录制";} else if (this.pauseTxt === "恢复录制") {this.$message({message: "录屏已恢复",type: "success",});this.recorder.resumeRecording();this.pauseTxt = "暂停";}},//初始化录制captureScreen(callback) {if (navigator.getDisplayMedia) {//录制结束,文件下载navigator.getDisplayMedia({video: true,audio: true,}).then((screenStream) => {navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then((mic) => {screenStream.addTrack(mic.getTracks()[0]);callback(screenStream);});}).catch(function (error) {console.log("error", error);});} else if (navigator.mediaDevices.getDisplayMedia) {navigator.mediaDevices.getDisplayMedia({video: true,audio: true,}).then((screenStream) => {navigator.mediaDevices.getUserMedia({ audio: true }).then((mic) => {screenStream.addTrack(mic.getTracks()[0]);callback(screenStream);});}).catch(function (error) {console.log("error", error);});} else {var error = "getDisplayMedia API are not supported in this browser.";console.log("error", error);alert(error);}},//流监听addStreamStopListener(stream, callback) {stream.addEventListener("ended",function () {callback();callback = function () {};},false);stream.addEventListener("inactive",function () {callback();callback = function () {};},false);stream.getTracks().forEach(function (track) {track.addEventListener("ended",function () {callback();callback = function () {};},false);track.addEventListener("inactive",function () {callback();callback = function () {};},false);});},getTimeIndex() {let now = new Date();let yyyy = now.getFullYear();let MM = now.getMonth() + 1 > 9 ? now.getMonth() + 1 : `0${now.getMonth() + 1}`;let DD = now.getDate() > 9 ? now.getDate() : `0${now.getDate()}`;let HH = now.getHours() > 9 ? now.getHours() : `0${now.getHours()}`;let mm = now.getMinutes() > 9 ? now.getMinutes() : `0${now.getMinutes()}`;let ss = now.getSeconds() > 9 ? now.getSeconds() : `0${now.getSeconds()}`;return `${yyyy}${MM}${DD}${HH}${mm}${ss}`;}},
};
</script><style>
:root {--font-color: #fff;--default-color: #1890ff;--hover-color: #359dfe;--text-shadow-color: #0000001f;--box-shadow-color: #0000000b;--normal-distance: 15px;
}.click-btn {display: inline-block;transition: .1s;cursor: pointer;user-select: none;padding: 5px var(--normal-distance);margin-bottom: var(--normal-distance);border-radius: 2px;color: var(--font-color);background: var(--default-color);border-color: var(--default-color);text-shadow: 0 -1px 0 var(--text-shadow-color);box-shadow: 0 2px var(--box-shadow-color);
}.click-btn:hover {background: var(--hover-color);border-color: var(--hover-color);
}
</style>

使用:
父组件内:

<RecVideo/>
...import RecVideo'@/components/screen.vue';components: {RecVideo}

预览:

选择要录制内容

录制中

完成录制

屏幕录制组件(vue) recordrtc相关推荐

ios屏幕录制60帧_探索iOS屏幕帧缓冲区–内核反转实验
ios屏幕录制60帧 It's been over two years since I last published a blog, so I thought I'd give this anothe ...
SwiftUI 制作苹果屏幕录制大师App(教程含源码)ReplayKit
实战需求 SwiftUI 制作苹果录制大师App 本文价值与收获看完本文后,您将能够作出下面的界面看完本文您将掌握的技能掌握 ReplayKit 掌握 RPScreenRecorder 掌握 N ...
Vue中如何进行屏幕录制与直播推流
Vue中如何进行屏幕录制与直播推流屏幕录制和直播推流是现代Web应用中常用的功能,例如在线教育.视频会议和游戏直播等.Vue作为一种流行的JavaScript框架,提供了一些工具和库,可以方便地实现 ...
c#屏幕录制(经典)(含源码和AForge.Video.FFMPEG.DLL)及填坑办法
一直觉得.net在多媒体处理方面渣得不行.最近需要做一个摄像头的程序,为了方便,用了AForge这个开源项目.AForge项目中有AForge.Video和AForge.Video. DirectSh ...
python实现屏幕录制_GitHub - Sijiu/record-camera-and-screen: 录制摄像头和录制屏幕，两者之间可以轻易切换...
使用Python3基于FFmpeg实现的录制摄像头和屏幕录制 1. 项目介绍该项目是为珠海一家音频技术公司开发的会议视频录制管理工具.客户需求使用的场景是在会议室开会时切换录制电脑屏幕和摄像头的内容 ...
python屏幕录制与回放_使用Python来做一个屏幕录制工具的操作代码
本文给大家分享使用Python来做一个屏幕录制工具,通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下一.写在前面作为一名测试,有时候经常会遇到需要录屏记录自己操作,方 ...
#计算机应用与技巧分享 #应用推荐 #录屏 Captura 免费开源的屏幕录制工具
注意:在此推荐的应用本人均已亲身使用,但不保证在您的计算机上的使用效果,仅供参考! 目录 1.将Captura移至您的计算机 1.2 使其准备就绪 2.配置所需支持组件 2.1 下载FFmpeg 2. ...
脚本录制软件python 按键精灵 tc_使用Python来做一个屏幕录制工具的操作代码
一.写在前面作为一名测试,有时候经常会遇到需要录屏记录自己操作,方便后续开发同学定位.以前都是用ScreenToGif来录屏制作成动态图,偶尔的机会看到python也能实现.那就赶紧学习下. 二.效 ...
JavaScript 屏幕录制 API 学习，看了都说好！
点击上方 "程序员小乐"关注公众号, 星标或置顶一起成长每天凌晨00点00分, 第一时间与你相约每日英文 A friend who understands your tears ...

屏幕录制组件(vue) recordrtc

如何使用

组件代码

预览:

选择要录制内容

录制中

完成录制

屏幕录制组件(vue) recordrtc相关推荐

最新文章

热门文章