如何确保画布与html中的视频大小相同？_Html_Css_Html5 Canvas_Html5 Video

如何确保画布与html中的视频大小相同？

html css html5-canvas

如何确保画布与html中的视频大小相同？,html,css,html5-canvas,html5-video,Html,Css,Html5 Canvas,Html5 Video,我正在页面上显示一个本地视频和一个远程视频。我正在手机上使用这个html页面。它工作得很好。现在我必须使用鼠标（和画布）绘制本地视频。但是我们没有指定视频元素的确切位置。因此无法思考如何在本地视频上精确渲染画布。下面是文件 HTML: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="/css/main.css" /> </head> <body>

我正在页面上显示一个本地视频和一个远程视频。我正在手机上使用这个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>

body {
  font-family: sans-serif;
}

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

任何人都可以让我知道如何覆盖画布完全超过本地视频。画布应位于本地视频的相同位置，并且应与本地视频的大小相同。

您可以使用该方法获取有关当前元素位置的信息，然后使用此信息定位画布元素

检查以下示例：

document.addEventListener（“DOMContentLoaded”，function（））{
const canvas=document.getElementById（“canvasEl”）
const vid=document.getElementById（“本地视频”）；
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”；
});
正文{
字体系列：无衬线；
}
录像带{
最大宽度：100%；
宽度：320px；
}
帆布{
位置：绝对位置；
}

与WebRTC的实时通信
您可以使用getBoundingClientRect（）
方法计算
元素的X和Y位置，也可以使用offsetWidth
和offsetHeight
属性来获取其宽度和高度。


然后您应该添加位置：绝对
到
元素，以便您可以设置顶部
和左侧
属性的值。


以下是您的代码（请检查代码片段以查看差异！）：


let xPos=window.scrollX+document.querySelector（'#localVideo'）.getBoundingClientRect（）.left；
让yPos=window.scrollY+document.querySelector（'#localVideo'）.getBoundingClientRect（）.top；
document.getElementById（“U画布”）.style.left=xPos+“px”；
document.getElementById（“U画布”）.style.top=yPos+“px”；
document.getElementById（“U画布”）.style.width=document.querySelector（“本地视频”）.offsetWidth+“px”；
document.getElementById（“U画布”）.style.height=document.querySelector（“本地视频”）.offsetHeight+px
正文{
字体系列：无衬线；
}
录像带{
最大宽度：100%；
宽度：320px；
}
帆布{
位置：绝对位置；
}

与WebRTC的实时通信
将画布和#localVideo
包装在一个div中，并使用绝对位置对其进行定位。此外，您可以使用videoloadeddata
事件获取视频固有大小并将其分配给画布。我做到了。但当我试图在画布上画画时，它并没有被画在正确的位置。但问题是要确保两个尺寸相同，我会解决这个问题并打开一个新的。部分工作。我的意思是我在onload事件监听器中编写了代码，画布高度和视频高度不一样。解决方案没有问题。在接收到onload事件时，视频的宽度和高度分别为320像素和160像素。但我认为视频加载后，视频的宽度和高度分别为320像素和240像素，当我在最右端画一条线时，它不会被画出来。1部分工作。我的意思是我在onload事件监听器中编写了代码，画布高度和视频高度不一样。解决方案没有问题。在接收到onload事件时，视频的宽度和高度分别为320像素和160像素。但我认为加载视频后，视频的宽度和高度分别为320 px和240 px，当我在最右边画一条线时，它不会被画出来。在这种情况下，您可以使用视频的播放
事件（而不是文档的onload事件）：通过这种方式，只有在视频开始播放后，您才能更改画布的大小，此时您就可以获得视频的实际大小。我做到了。但当我试图在画布上画画时，它并没有被画在正确的位置。但问题是要确保两个尺寸相同，我会解决这个问题并打开一个新的。