Untitled

<!-- Buttons to start and stop screen recording -->
<button id="start-button">Start Recording</button>
<button id="stop-button">Stop Recording</button>
<video src="" width="500"></video>

<script>
  // Initialize the start/stop buttons
  const startButton = document.getElementById('start-button');
  const stopButton = document.getElementById('stop-button');
  let isRecording = false;

  // Set up a media recorder to record the screen
  let mediaRecorder;

  // When the start button is clicked, start recording
  startButton.addEventListener('click', () => {
    mediaRecorder.start();
    isRecording = true;

    // Hide the start button and show the stop button
    startButton.style.display = 'none';
    stopButton.style.display = 'block';
  });

  // When the stop button is clicked, stop recording
  stopButton.addEventListener('click', () => {
    // Only stop recording if the MediaRecorder is currently recording
    if (mediaRecorder.state === 'recording') {
      mediaRecorder.stop();
    }
    isRecording = false;

    // Hide the stop button and show the start button
    stopButton.style.display = 'none';
    startButton.style.display = 'block';
  });

  // Ask the user for permission to capture the screen
  navigator.mediaDevices.getDisplayMedia({
    video: {
        width: { ideal: 4096 },
        height: { ideal: 2160 }
    }
  }).then((screenStream) => {
    // Set up the media recorder
    mediaRecorder = new MediaRecorder(screenStream);

    // Set the screen stream to be the source for the media recorder
    mediaRecorder.stream = screenStream;

    // When data is available from the media recorder, append it to the video element
    mediaRecorder.ondataavailable = (event) => {
      // Print the data URL of the video to the console
      const dataUrl = URL.createObjectURL(new Blob([event.data], { type: event.data.type }));
      console.log(dataUrl);
      document.querySelector('video').src = dataUrl
    };
  });
</script>