Question

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

例如，我已经通过我的智能手机的相机在网站的视频标签上进行渲染。在HTML视频标签中，显示了智能手机的摄像机图像和宝箱的图像。我点了一下宝盒，得到一点。

我可以这样做吗？

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

在我看来，这个流程：智能手机的相机 - ＆gt;隐藏视频标记 - ＆gt;渲染画布标签图像和视频

Answer 1

<video>标记是有史以来最具视觉天赋的HTML元素。如果仅使用poster属性，则会比<img>标记更好地呈现任何图像。在以下演示中，可调整大小的<video>标记包含在可调整大小的<div>中。 100％响应。不需要<picture>标记以及随附的所有标记杂乱。滚动条仅用于演示目的，因此调整大小更容易使用（您可能在生产中不需要）。

演示

＆＃13;

.rsz {
  resize: both;
  overflow:scroll;
}

.frame {
  width: 100%;
  height: auto;
}

.vid {
  width: 100%;
  height: 100%;
}

＆＃13;

<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>

＆＃13;

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

1 个答案:

演示