Я использую простой Node.JS сервер, который выдает данные в потоке в формате application / octet-stream - PullRequest
Новая
       66

Я использую простой Node.JS сервер, который выдает данные в потоке в формате application / octet-stream

0 голосов
/ 19 января 2020

У меня есть простая настройка, которая включает в себя простой веб-интерфейс, который использует веб-камеру для отправки мультимедийных данных на Node.JS Сервер, затем сервер отправляет эти данные другому, где мне нужно отобразить живое видео на интерфейсе. Проблема, с которой я сталкиваюсь, заключается в том, что я получаю данные в потоке Node.JS, и когда я преобразую их в Blob, я вижу тип содержимого application/octet-stream. Я не могу понять, как показать эти данные в теге видео в HTML. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jimmy Test Receiver</title>
</head>
<body>
Receiver
<button onclick="connect()">Connect</button>
<video id="videoElement"></video>
</body>
<script src="https://cdn.jsdelivr.net/npm/socket.io-client@2/dist/socket.io.js"></script>
<script src="stream.js"></script>
<script>
    var mediaStream = new MediaStream();
</script>
<script>
    function connect() {
        var socket = io.connect('http://localhost/user');
        var stream;
        var data;

        socket.on('connect', function () {
            console.log('connected');
            stream = ss.createStream();

            ss(socket).emit('file', stream);

            stream.on('data', (chunk) => {
                console.log('data in stream', chunk);

                if (!data) {
                    data = chunk;
                }

                data += chunk;

                // The data received received here is application/octet-stream and its the data from a webcam from another client side. Now I want this data to show in the video tag so that this user can see the live stream of another user's video 

                document.getElementById('videoElement').src = window.URL.createObjectURL(new Blob([data]));
            });

            stream.on('finish', () => {
                const blob = new Blob([data], {type: 'video/webm;codecs=vp9'});

                var reader = new FileReader();
                reader.readAsDataURL(blob);
                reader.onloadend = function () {
                    var base64data = reader.result;
                    // console.log(base64data);
                    //
                    // const ele = document.createElement('img');
                    //
                    // ele.src = base64data;
                    //
                    // document.getElementsByTagName('body')[0].appendChild(ele);
                };


                console.log('stream has finished', blob);
            });
        });
    }
</script>
</html>
...