Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update Record Function to Group streams. #2496

Open
arpee opened this issue May 28, 2024 · 1 comment
Open

Update Record Function to Group streams. #2496

arpee opened this issue May 28, 2024 · 1 comment
Assignees
@davikstone2

Comments

@arpee
Copy link
Member

arpee commented May 28, 2024 •
edited
Loading

Update (revert) the record function to record only the streams visible in the ui arranged as they are for the user.

Note: it looks like the simplest way to do this is to render the contents of the .video-container-large to a canvas using the html2canvas library... (I did some GPTing...)

The result should capture all the video (but not the controls) on the screen as a single stream to record.

(we want to extend this for screen casting later).
@arpee
Copy link
Member Author

arpee commented May 28, 2024

The demo GPT gave me...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Capture DOM to Video Stream</title>
</head>
<body>
  <div id="content">
    <!-- Content to be captured -->
    <h1>Hello, World!</h1>
    <p>This content will be streamed as video.</p>
  </div>

  <canvas id="canvas" style="display: none;"></canvas>
  <video id="video" autoplay></video>

  <script>
    // Function to draw the DOM element to the canvas
    function drawDOMToCanvas(element, canvas) {
      const context = canvas.getContext('2d');
      const rect = element.getBoundingClientRect();
      canvas.width = rect.width;
      canvas.height = rect.height;
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.fillStyle = getComputedStyle(element).backgroundColor;
      context.fillRect(0, 0, canvas.width, canvas.height);
      html2canvas(element).then(canvasCopy => {
        context.drawImage(canvasCopy, 0, 0);
      });
    }

    // Capture the canvas stream and set it to the video element
    function captureStreamFromCanvas(canvas, video) {
      const stream = canvas.captureStream(30); // 30 FPS
      video.srcObject = stream;
    }

    window.onload = () => {
      const contentElement = document.getElementById('content');
      const canvas = document.getElementById('canvas');
      const video = document.getElementById('video');

      drawDOMToCanvas(contentElement, canvas);
      captureStreamFromCanvas(canvas, video);

      // Optional: Update the canvas periodically to reflect changes in the content
      setInterval(() => {
        drawDOMToCanvas(contentElement, canvas);
      }, 1000); // Update every second
    };
  </script>
  <!-- Include html2canvas library -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
</body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@davikstone2 davikstone2

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@arpee @davikstone2