Purvesh Patel
Purvesh Patel

Reputation: 1

I want to default select the entire screen

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

Answers (0)

Related Questions