arpee
commented
1 month ago 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>
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-largeto a canvas using thehtml2canvaslibrary... (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).