teste1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Video Stream Test</title>
</head>
<body>
    <h1>Interactive Video Stream Test</h1>
    <video id="videoPlayer" width="640" height="480" controls></video>
    <button onclick="loadVideo()">Load Video</button>

    <script>
        function loadVideo() {
            const video = document.getElementById('videoPlayer');
            const url = 'http://localhost:3000/stream/9';

            fetch(url, {
                headers: {
                    'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3MTgxMDU2NDYsImlkIjo0fQ.3ezFPcz-defjUfHQ8_v3zbp8eSiQcqShCn1xFtQOEHI',
                    'UserID': '4',
                    'Range': 'bytes=0-1023'
                }
            })
            .then(response => {
                if (response.ok) {
                    return response.blob();
                } else {
                    throw new Error('Failed to load video: ' + response.status + ' ' + response.statusText);
                }
            })
            .then(blob => {
                const videoUrl = URL.createObjectURL(blob);
                video.src = videoUrl;
                video.play();
            })
            .catch(error => console.error('Error fetching video:', error));
        }
    </script>
</body>
</html>