How to redirect streaming video from the server to the video tag using socket.io?

A

Alexey2020-07-18 22:36:25

Node.js

Alexey, 2020-07-18 22:36:25

serverSocket

'use strict'
var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http);
var fs = require('fs');


app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.sockets.on('connection', (socket) => {
  console.log('a user connected');

  socket.on('disconnect', function () {
    console.log('A user disconnected');
 });

  socket.emit('message', 'Welcome');

  socket.on('message', function all(message){
    console.log(message);
    socket.broadcast.emit('message', message); 
  });

  let streamVideo = fs.createReadStream('/js/ControlPC/images/2.mp4');
  streamVideo.on('data', (bufferVideo)=>{
    //console.log(chunk);
    socket.emit('streamVideo', bufferVideo);
  })
 
  
});

io.on("err", (err)=>{
    console.log(err.message);
})

http.listen(8000, () => {
  console.log('listening on *:8000');
});

client

<!DOCTYPE html>
<html>
   <head>
      <title>Hello world</title>
      <script src = "/socket.io/socket.io.js"></script>
      <script>         
      
         var socket = io();
         socket.on('message', function(mes){
            alert('server message: ' + mes);
         });
   
         function is (){
            console.log("run")
            socket.emit('message', "Hello all");
          }
          
      </script>
   </head>

   <body>
      <p>Hello world</p>

      <video src="/js/ControlPC/images/2.mp4" id="stream" controls width="auto" height="auto" autoplay muted></video>
      <script>
         /*
          socket.on('streamVideo', function(bufferVideo){
          let stream = document.getElementById('stream');
          //stream.src = bufferVideo;
          console.log(stream);
         });
*/

         let videoElement = document.createElement("video");
          videoElement.setAttribute("id", 'stream2');
          videoElement.setAttribute('src', '/js/ControlPC/images/1.mp4');
          videoElement.setAttribute("width", "auto");
          videoElement.setAttribute("height", "auto");
          videoElement.setAttribute("controls", "controls");
          videoElement.setAttribute("autoplay", "");
          videoElement.setAttribute("muted", "");
          document.body.append(videoElement);

</script>

      <p><input type="button" onclick="is()" value="Poke the server" id="poke" /></p>
   </body>
</html>

Hello, I can’t find / think of something, help)
A stream is created from the server using fs.createReadStream (well, for now), I send it using socket.io. On the client side, I accept the buffer, but I can’t figure out how to send it to the video html tag. I hope the answer with the example will be simple enough)

Well, to the heap, if I manually insert a video tag with autoplay / muted attributes, then the video automatically starts, and if I create a tag using js, then it does not automatically start - why?