Получаю доступ к камере пользователя следующим кодом:
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 других людей?
есть событие на открытие модального окнапри открытии окна у html и body должен блокироваться скролл (используем overflow:hidden), но он не работает именно...
Есть метод в классе, который должен достать из базы данных из одной таблицы текущее значение проектов, из другой таблицы их историю в разбивке...