vue/uniapp实现浏览器录屏功能（视频+音频）

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;
		});
	}
},

Demo
https://www.webrtc-experiment.com/