Как убедиться, что холст имеет такой же размер видео в html? - PullRequest
Новая
       7

Как убедиться, что холст имеет такой же размер видео в html?

2 голосов
/ 26 апреля 2020

Я показываю одно локальное видео и одно удаленное видео на странице. Я использую эту html страницу на мобильном телефоне. Работает нормально. Теперь я должен нарисовать локальное видео, используя мышь (и используя холст). Но мы не указали точное расположение элементов видео. Поэтому не в состоянии думать, как визуализировать холст точно поверх локального видео. Ниже приведены файлы.

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>

</body>
</html>

CSS: 

body {
  font-family: sans-serif;
}

video {
  max-width: 100%;
  width: 320px;
}

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

Ответы [ 2 ]

1 голос
/ 26 апреля 2020

Вы можете вычислить координаты X и Y элемента <video> с помощью метода getBoundingClientRect(), также вы можете использовать оба свойства offsetWidth и offsetHeight, чтобы получить его ширину и высоту.

Затем вы должны добавить position: absolute; к элементу <canvas>, чтобы вы могли установить значения свойств top и left.

Вот ваш код (проверьте фрагмент кода на увидеть разницу!): 

let xPos = window.scrollX + document.querySelector('#localVideo').getBoundingClientRect().left;
let yPos = window.scrollY + document.querySelector('#localVideo').getBoundingClientRect().top;

document.getElementById('_canvas').style.left = xPos + "px";
document.getElementById('_canvas').style.top = yPos + "px";

document.getElementById('_canvas').style.width = document.querySelector('#localVideo').offsetWidth + "px";
document.getElementById('_canvas').style.height = document.querySelector('#localVideo').offsetHeight + "px";
body {
  font-family: sans-serif;
}

video {
  max-width: 100%;
  width: 320px;
}

canvas {
  position: absolute;
}
<!DOCTYPE html>
<html>

<head>
</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="_canvas"></canvas>
</body>
</html>
1 голос
/ 26 апреля 2020

Вы можете использовать метод getBoundingClientRect(), чтобы получить информацию о положении текущего элемента, а затем использовать эту информацию для позиционирования элемента canvas.

Проверьте следующий пример: 

document.addEventListener("DOMContentLoaded", function(){
  const canvas = document.getElementById("canvasEl")
  const vid = document.getElementById("localVideo");
  const vidStyleData = vid.getBoundingClientRect();
  canvas.style.width = vidStyleData.width + "px";
  canvas.style.height = vidStyleData.height + "px";
  canvas.style.left = vidStyleData.left + "px";
  canvas.style.top = vidStyleData.top + "px";
});
body {
  font-family: sans-serif;
}

video {
  max-width: 100%;
  width: 320px;
}
canvas {
  position: absolute;
}
<!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="canvasEl"></canvas>
</body>
</html>

Обратите внимание, что я установил положение холста на absolute, используя css. Если вы хотите, вы можете сделать это также с javascript.

...