首页 > 解决方案 > 我正在运行一个简单的 Node.JS 服务器,它以 application/octet-stream 格式提供数据流

问题描述

我有一个简单的设置,其中包括一个简单的 Web 界面,该界面使用网络摄像头将媒体数据发送到 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>

标签: node.jsstreamvideo-streamingvideo.jslive-streaming

解决方案


推荐阅读