javascript - 我可以在 WebRTC 的视频标签上渲染图像吗

Question

我想在 WebRTC 的 HTML 视频标签上渲染图像对象。因为我想使用 WebRTC 创建游戏。

例如，我一直在通过智能手机的摄像头在网站的视频标签上进行渲染。在 HTML 视频标签中，显示了智能手机相机的图像和宝箱的图像。然后我点击宝箱，得到一些积分。

我可以这样做吗？

我想，我必须使用 Canvas 标签。

在我看来，这个流程:智能手机的相机 -> 隐藏视频标签 -> 渲染 Canvas 标签图像和视频

Answer 1

<video>标签是有史以来最具视觉天赋的 HTML 元素。如果您只使用 poster属性，它将呈现比 <img> 更好的任何图像标签。在下面的演示中是一个可调整大小的 <video>包裹在可调整大小的 <div> 中的标签. 100% 响应。不需要 <picture>标签和它附带的所有标记困惑。滚动条仅用于演示目的，以便调整大小更易于使用(您可能在生产中不需要)。

演示

.rsz {
  resize: both;
  overflow:scroll;
}

.frame {
  width: 100%;
  height: auto;
}

.vid {
  width: 100%;
  height: 100%;
}

<div class='frame rsz'>
  <video class='vid rz' poster='http://diarioveaonline.com/wp-content/uploads/2018/01/lovable-images-for-desktop-wallpapers-3.jpg'></video>
</div>