Нам нужно рисовать, используя мышь на элементе видео. Я использую Canvas для рендеринга чертежа. Когда мы заранее не знаем ширину и высоту видео, я не могу нарисовать линию в правильном положении. Рисуется на разных позициях. Ниже приведен код.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/main.css" />
</head>
<body>
<h1>Realtime communication with WebRTC</h1>
<div id="videos">
<video id="localVideo" autoplay muted></video>
<video id="remoteVideo" autoplay></video>
</div>
<canvas id="localCanvas"></canvas>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
основной. css
body {
font-family: sans-serif;
}
video {
max-width: 100%;
width: 320px;
}
canvas {
position: absolute;
}
main. js
'use strict';
var localVideo = document.querySelector('#localVideo');
navigator.mediaDevices.getUserMedia({
audio: false,
video: true
})
.then(gotStream)
.catch(function(e) {
alert('getUserMedia() error: ' + e.name);
});
function gotStream(stream) {
// Checking Whether video is ready to set canvas width and height
var b = setInterval(() => {
if(localVideo.readyState >= 3){
document.getElementById('localCanvas').style.width = document.querySelector('#localVideo').offsetWidth + "px";
document.getElementById('localCanvas').style.height = document.querySelector('#localVideo').offsetHeight + "px";
clearInterval(b);
}
},500);
localVideo.srcObject = stream;
}
document.addEventListener("DOMContentLoaded", function(){
let xPos = window.scrollX + document.querySelector('#localVideo').getBoundingClientRect().left;
let yPos = window.scrollY + document.querySelector('#localVideo').getBoundingClientRect().top;
document.getElementById('localCanvas').style.left = xPos + "px";
document.getElementById('localCanvas').style.top = yPos + "px";
document.getElementById('localCanvas').style.width = document.querySelector('#localVideo').offsetWidth + "px";
document.getElementById('localCanvas').style.height = document.querySelector('#localVideo').offsetHeight + "px";
InitThis();
});
var mousePressed = false;
var lastX, lastY;
var ctx;
function InitThis() {
ctx = document.getElementById('localCanvas').getContext("2d");
const canvas = document.querySelector('#localCanvas');
$('#localCanvas').mousedown(function (e) {
mousePressed = true;
Draw(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop, false);
});
$('#localCanvas').mousemove(function (e) {
if (mousePressed) {
Draw(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop, true);
}
});
$('#localCanvas').mouseup(function (e) {
mousePressed = false;
});
$('#localCanvas').mouseleave(function (e) {
mousePressed = false;
});
}
function Draw(x, y, isDown) {
if (isDown) {
ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.lineWidth = 9;
ctx.lineJoin = "round";
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.closePath();
ctx.stroke();
}
lastX = x; lastY = y;
}
Здесь мы просто устанавливаем свойства максимальной ширины и ширины в CSS и заранее не знаем высоту. Поэтому, когда функция прослушивания событий onload, я устанавливаю координаты ширины и высоты холста на основе localVideo. Но к тому времени высота видео составляет 160 пикселей. Но когда видео загружается, высота меняется на 240 пикселей. Итак, еще раз, я изменяю ширину и высоту Canvas, когда состояние видео готово к воспроизведению, как показано ниже в gotStream ().
var b = setInterval(() => {
if(localVideo.readyState >= 3){
document.getElementById('localCanvas').style.width = document.querySelector('#localVideo').offsetWidth + "px";
document.getElementById('localCanvas').style.height = document.querySelector('#localVideo').offsetHeight + "px";
clearInterval(b);
}
},500);
Когда видео готово к воспроизведению, размер Canvas точно такой же, как localVideo. Но когда я пытался рисовать с помощью мыши на холсте, он рисуется в неправильных позициях, особенно когда я пытался рисовать в нижней половине или на правом краю холста. Может кто-нибудь, пожалуйста, помогите мне, как решить эту проблему.
Обновление: Я жестко закодировал высоту Canvas до '240px' в событии onload, которое также не работает.