Thiết kế website giá rẻ

Question

I have created a screen recording application in Java, which works fine and encodes the video stream using MediaCodec. Then, I send the bytes through a socket connection to JavaScript. However, I am having trouble playing the live stream after converting the bytes to a stream using JavaScript libraries such as Bradway.js and Jmuxer.js.

Here is some code that has been tested:

/Bradway.js/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live Video Stream</title>
    <style>
  
        #videoCanvas {
            display: block;
            width: 640px; /* Adjust as needed */
            height: 480px; /* Adjust as needed */
            border: 1px solid black; /* Optional border for visualization */
        }
    </style>
    <script src="./Decoder.js"></script>
    <script src="./Player.js"></script>
    <script src="./YUVCanvas.js"></script>
</head>
<body>
    <!-- Video player element -->
    <canvas id="videoCanvas"></canvas>

    <!-- Include jmuxer library -->
   <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jmuxer.min.js"></script> -->
    <script src="/socket.io/socket.io.js"></script>

    <script>
        // Function to check if the data is H.264 encoded
        function isH264(data) {
            // H.264 NAL unit start code is 0x00 00 01 or 0x00 00 00 01
            if (data.length < 4) {
                return false; // Not enough data
            }
            if (data[0] === 0x00 && data[1] === 0x00 && (data[2] === 0x01 || (data[2] === 0x00 && data[3] === 0x01))) {
                return true; // H.264 start code found
            }
            return false; // Not H.264 encoded
        }

        const socket = io();
        var player;

        socket.on('RemoteVideoByte', bufferdata => {
            if (!player) {
                player = new Player({
                    useWorker: true,
                    workerFile: './Decoder.js',
                    size: { width: 640, height: 480 },
                    webgl: 'auto',
                });
                var canvas = document.getElementById('videoCanvas');
                canvas.appendChild(player.canvas);
            }
  socket.binaryType = 'arraybuffer';
            var data = new Uint8Array(bufferdata);
            player.decode(data);

            // Check if the decoded data is H.264 encoded
            if (isH264(data)) {
                console.log("Decoded data is H.264 encoded.");
            } else {
                console.log("Decoded data is not H.264 encoded.");
            }
        });

        // Handle any WebSocket errors
        socket.on('error', error => {
            console.error('WebSocket error:', error);
        });
    </script>
</body>
</html>

/Jmuxer.js/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live Video Stream</title>
    <style>
        #player {
            display: block;
            width: 640px;
            height: 480px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="player"></div>

 <script src="/socket.io/socket.io.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jmuxer.min.js"></script>

    <script>
        const socket = io();
        socket.binaryType = 'arraybuffer';

        socket.on('connect', () => {
            console.log('Socket connected');
        });

        socket.on('RemoteVideoByte', bufferdata => {
            jmuxer.feed({
                video: new Uint8Array(bufferdata)
            });
        });

        socket.on('error', error => {
            console.error('WebSocket error:', error);
        });

        var jmuxer = new JMuxer({
            node: 'player',
            mode: 'video',
            flushingTime: 1000,
            fps: 30,
            debug: false
        });
    </script>
</body>
</html>

Can you please help me solve this issue? It would be greatly appreciated.

Thiết kế website giá rẻ

Danh mục

how to decode the byte array in to live stream video using javascript?