JavaScript передача object HtmlVideoElement

97
12 ноября 2019, 02:20

Получаю доступ к камере пользователя следующим кодом:

var video = document.querySelector("#my-video");
var canvas = document.querySelector('#canvas');
var ctx = canvas.getContext('2d');
var constraints = { audio: true, video: { width: 1280, height: 720 } };
var remoteVideo = document.getElementById("remoteVideo");
var localMediaStream;
  function getMyCam(){
    navigator.mediaDevices.getUserMedia(constraints)
      .then(function(mediaStream) {
        localMediaStream = mediaStream;
        var video = document.querySelector('video');
        video.srcObject = mediaStream;
        console.log(mediaStream);
        video.onloadedmetadata = function(e) {
          video.play();
        };
      })
      .catch(function(err) { console.log(err.name + ": " + err.message); }); // always check for errors at the end.

      cameraInterval = setInterval(function(){ snapshot();}, 3000);
    }

Видео дублируется в canvas с интервалом cameraInterval:

function snapshot(){
             if(localMediaStream){
              console.log(video);
                    ctx.drawImage(video, 0, 0);
              }
      }

У пользователя есть активное соединение с сервером. c определённом интервалом посылается изображение на сервер:

function sendVideo(){
    conn.send('{"type":"video","video": "'+ video + '"}');
  }

На стороне сервера это сообщение обрабатывается и отсылается нужным людям), на стороне этих людей:

case 'video':
          console.log(response.video);
          ctx.drawImage(response.video, 0, 0);
          break;

При вызове ctx.drawImage вылазит ошибка:

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'
    at WebSocket.conn.onmessage

Понимаю что приходит не тот объект, хотя посылаю object HTMLVideoElement. Возникает вопрос, как правильно послать объект видео что-бы его отрисовать в canvas других людей?

READ ALSO
Фильтрация массива в JS

Фильтрация массива в JS

Есть два массива:

103
не работает overflow:hidden у body и html на iPhone

не работает overflow:hidden у body и html на iPhone

есть событие на открытие модального окнапри открытии окна у html и body должен блокироваться скролл (используем overflow:hidden), но он не работает именно...

103
Promise в цикле при запросах из бд

Promise в цикле при запросах из бд

Есть метод в классе, который должен достать из базы данных из одной таблицы текущее значение проектов, из другой таблицы их историю в разбивке...

122
Регулярное выражение - цифры и дефис [закрыт]

Регулярное выражение - цифры и дефис [закрыт]

Подскажите регулярку такого вида:

116