How practical is it to stream video online over WebSocket using canvas?

Question

JavaScript

I'm trying to make a streaming app. I don’t hope for support from phones at all, since there’s not much with it, at most Chrome and Firefox. And it so happened that I don’t understand how to transfer video online at all. That is, I’m a beginner, and I’m facing this task for the first time. I made my crutch on NodeJs, connected socket.io and all that. On the client, the code looks like this:

<video autoplay hidden="hidden"></video>

<canvas hidden="hidden" width="640" height="480"></canvas>

<img hidden="hidden" id="cast">

;(function(){
  var socket = io();
  
  var Stream = function () {
    
    var St = this;
    
    St.DOMObjects = {
      "dom_video" : document.querySelector('video'),
      "dom_canvas" : document.querySelector('canvas'),
      "dom_image_cast" : document.getElementById('cast')
    }
    
    St.sendLive = function (ctx, vid) {
      ctx.drawImage(vid, 0, 0);
      socket.emit('videoCast', {
        base64: ctx.canvas.toDataURL('image/jpeg', 1080)
      });
      requestAnimationFrame(function (){
        St.sendLive(ctx, vid);
      });
    }

    this.live = function () {
      var vid = St.DOMObjects["dom_video"],
        ctx = St.DOMObjects["dom_canvas"].getContext('2d');
      navigator.getUserMedia = navigator.getUserMedia ||  navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
      
      navigator.getUserMedia({
        video: true
      }, function (media) {
        //Успешно загружено
        vid.removeAttribute('hidden');
        vid.src = window.URL.createObjectURL(media);
        St.sendLive(ctx, vid);
      }, function (err) {
        //Ошибка
      });
    }

    St.getVideo = function () {
      St.DOMObjects["dom_image_cast"].removeAttribute("hidden");
      socket.on('vidSend', function (data){
        St.DOMObjects["dom_image_cast"].src = data.base64;
      });
    }
  }
  var stream_object = new Stream();
  socket.on('state', function (state) {
    (state != true) ? stream_object.live() : stream_object.getVideo();
  });

})();

If you immediately answer that this approach is not needed, I will understand. Because I'm not sure if it's correct. Please tell me what should be used for high-quality and fast video transmission, so far only HTMl5.

Answer 1

no video is being sent over the socket.
keywords for googling:
nginx video stream
rtmp
ffmpeg
well or webrtc

Answer 2

if you are already using the node then

const { createReadStream } = require('fs');
const { resolve } = require('path');
app.get('/stream', (req, res) => {
    const readStream = createReadStream(resolve(__dirname, 'ypurFilePath'));
    readStream.on('open', function () {
        readStream.pipe(res);
    });
    readStream.on('error', res.end(err));
    res.on('close', readStream.close());
    res.on('error', readStream.close());
});

Answer 3

You are transmitting frame-by-frame images. It's too wasteful. Better set up FreeSwitch for webrtc video and audio chats or other specialized software for this. You will only spend time on nodejs, since work with video streams is usually implemented in C / C ++ due to high performance requirements, and sometimes even hardware solutions are used.
And the media stream exchange goes through rtmp, rtp or similar protocols. But not how not through websocets