Reputation: 1
By default, navigator.mediaDevices.getDisplayMedia will show a dialog to choose what to share (web tab, window, or entire screen). Since I want to default select the entire screen.
how to remove other choose option like: web tab, window
I want to default select the entire screen. Customize share option to default select entire screen
import React, { useState, useRef } from 'react';
import RecordRTC from 'recordrtc';
//By default, navigator.mediaDevices.getDisplayMedia will show a dialog to choose what to share (web tab, window, or entire screen). Since I want to default select the entire screen
const ScreenRecorder = () => {
const [isRecording, setIsRecording] = useState(false);
const [videoUrl, setVideoUrl] = useState('');
const mediaRecorderRef = useRef(null);
const chunksRef = useRef([]);
//const [mediaStream, setMediaStream] = useState(null);
const startRecording = async () => {
try {
const stream = await navigator.mediaDevices.getDisplayMedia({
video: {
mediaSource: 'screen',
cursor: "motion" // motion, always
},
// video: { mediaSource: 'screen',cursor: "always" },
audio: {
echoCancellation: true,
noiseSuppression: true,
sampleRate: 44100
},
// Customize share option to default select entire screen
// displaySurface: 'monitor',
// logicalSurface: true,
});
const mediaRecorder = new MediaRecorder(stream);
mediaRecorderRef.current = mediaRecorder;
mediaRecorder.ondataavailable = (event) => {
if (event.data.size > 0) {
chunksRef.current.push(event.data);
}
};
mediaRecorder.onstop = () => {
const blob = new Blob(chunksRef.current, { type: 'video/webm' });
const url = URL.createObjectURL(blob);
setVideoUrl(url);
chunksRef.current = [];
};
mediaRecorder.start();
setIsRecording(true);
} catch (error) {
console.error("Error starting recording:", error);
}
};
const startRecordingCustom = async () => {
try {
const stream = await navigator.mediaDevices.getDisplayMedia({ video: { mediaSource: 'screen' }, audio: true });
//setMediaStream(stream);
const recorder = new RecordRTC(stream, { type: 'video' });
recorder.startRecording();
setIsRecording(true);
} catch (error) {
console.error('Error starting recording:', error);
}
};
const stopRecording = () => {
mediaRecorderRef.current.stop();
setIsRecording(false);
};
return (
<div>
<h1>Screen Recorder</h1>
<button onClick={isRecording ? stopRecording : startRecording}>
{isRecording ? 'Stop Recording' : 'Start Recording'}
</button>
<button onClick={startRecordingCustom}>Start Recording Custom</button>
{videoUrl && (
<div>
<h2>Recorded Video</h2>
<video src={videoUrl} controls />
</div>
)}
</div>
);
};
export default ScreenRecorder;
Upvotes: 0
Views: 73