Как создать прямую трансляцию из захвата элемента canvas, используя websocket?

Question

Я пытаюсь отправить canvas.captureStream() слушателю http, чтобы создать прямую трансляцию. Моя проблема в том, что я не знаю, как разобрать объект MediaStream в правильное изображение или веб-видео. Вот мой код

сервер

var http = require('http')
var Server = require('ws').Server
var port = 9001
var videoPort = 9000
var ws = new Server({port: port})

http.createServer(function (req, res) {
  res.connection.setTimeout(0)
  res.writeHead(200, {
    "Connection": "keep-alive",
    "Content-Type": "video/webm", //not really sure about the format
    "Accept-Ranges": "bytes"
  })
  ws.on('connection', function(w){
    console.log('connected')
    w.on('message', function(mediaStreamObjectFromClient){
      // mediaStreamObjectFromClient
      // parse here the data sent from the canvas capture.
    })

    w.on('close', function() {
      console.log('closing connection')
    })
  })

}).listen(videoPort, '127.0.0.1')

console.log(`Server running at http://127.0.0.1:${videoPort}`)

клиент

var connection = new WebSocket('ws://localhost:9001');
var timer = 0
var can = document.getElementById('canvas')
var ctx = can.getContext('2d')

connection.onopen = function () {
  var intervalID = window.setInterval(() =>{
    draw()
    timer++
  }, 1000)
}

function draw() {
  ctx.clearRect(0, 0, 400, 300);
  ctx.font = "75px serif";
  ctx.strokeText(timer, 10, 50)
  connection.send(can.captureStream(25),{binary:true})
}

Можно ли создать прямую трансляцию webm из потока захвата? Или мне нужно перейти на формат изображения?