0

I have a simple setup that includes a simple web interface that uses webcam to send the media data to Node.JS Server, the server then sends this data to another where I need to display the live video on the interface. The issue that I am facing is that I am getting the data in a Node.JS Stream and when I convert it into Blob I see a Content Type of application/octet-stream. I not able to figure out how to show this data in video tag in 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>
Kushagra Saxena
  • 671
  • 5
  • 17
  • Simply set your response headers to the correct type? We don't know what that is, because you didn't tell us. – Brad Jan 20 '20 at 04:20
  • Hi @Brad, I wasn't sure what part of code to add. Which part do you want me to add here? – Kushagra Saxena Jan 20 '20 at 09:56
  • What is "media data"? Where did you get it? What container and codec are used? Where's the code showing how you're instantiating the Blob? You said you're streaming this, so why are you using a Blob to begin with? – Brad Jan 20 '20 at 17:33
  • Hi @Brad , I have edited my question and added the code. I have left on the code that explain what is exactly happening and my problem. Thanks for taking the time to help. – Kushagra Saxena Jan 21 '20 at 08:40
  • Why are you base-64 encoding this video? In any case, if you're trying to do this live, you will need to use MediaSource Extensions on the receiving end. – Brad Jan 21 '20 at 17:08

0 Answers0