RecordRTC应用
装置
npm install recordrtc -S
import RecordRTC from 'recordrtc';
代码：
<template> <view> </view></template><script> import RecordRTC from 'recordrtc'; export default { data() { return { videoStart: false, recorder: null, } }, props:{ fileName:{ type:String, default:new Date().getTime() } }, onLoad() { }, methods:{ /** * 开始录制 */ startRecording(callback){ this.captureScreen((screenStream)=>{ this.addStreamStopListener(screenStream,()=>{ console.log("流进行监听"); this.$emit("streamStop",{}) // this.stopRecording(); }); var options = { type: 'video', mimeType: 'video/webm', disableLogs: false, getNativeBlob: false, // enable it for longer recordings ignoreMutedMedia:false }; // this.video.srcObject = screenStream; this.recorder = RecordRTC(screenStream, options); this.recorder.startRecording(); this.recorder.screen = screenStream; this.videoStart = true; callback(true); }); }, /** * 进行录制 */ stopRecording(callback){ this.recorder.stopRecording(()=>{ // this.video.src = this.video.srcObject = null; // this.video.src = URL.createObjectURL(this.recorder.getBlob()); const url = URL.createObjectURL(this.recorder.getBlob()); const a = document.createElement("a"); let videoFile = new File([this.recorder.getBlob()], this.fileName+".mp4", { type: 'video/mp4' }) let downloadUrl = URL.createObjectURL(videoFile); document.body.appendChild(a); a.style.display = "none"; a.href = url; a.download = this.fileName + ".mp4"; a.click(); this.recorder.screen.stop(); this.recorder.destroy(); this.recorder = null; this.videoStart = false; callback(false); }); }, //初始化 captureScreen(callback) { if (navigator.getDisplayMedia) { //录制完结,文件下载 navigator.getDisplayMedia({ video: 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 if (navigator.mediaDevices.getDisplayMedia) { navigator.mediaDevices.getDisplayMedia({ video: 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); }); }, } }</script><style></style>
引入
import screenRecording from '@/components/screen-recording/screen-recording';
注册....
组件：
<screen-recording ref="screen-recording" @streamStop="streamStop" :fileName="fileName"></screen-recording>
开启录屏：
//开始录制this.$refs['screen-recording'].startRecording((start)=>{ this.start= start;});
完结录屏：
this.fileName =`${this.mNm}-录屏-${this.$util.dateFormat(new Date())}`;this.$refs['screen-recording'].stopRecording((start)=>{ this.start= start;});
监听敞开：
//流进行监听streamStop(){ if(this.start){ this.fileName =`${this.mNm}-录屏-${this.$util.dateFormat(new Date())}`; this.$refs['screen-recording'].stopRecording((start)=>{ this.start= start; }); }},