Question

因此，我们正在使用Google视觉api通过从网络摄像头抓取一个框架并将其发送到api来获取面部标志作为坐标。问题是，通过将网络摄像头视频居中并翻转以使其自然响应，返回的点不会正确映射回视频。

从我可以看到的原因是，抓取的帧为640x480，窗口大小为1200x640。因此，可以使用以下视频调整视频的大小并居中以适合窗口大小：

const Video = styled.video`
  position: absolute;
  transform: rotateY(180deg);
  height: 100vh;
  width: 100vw;
  left: 50%;
  margin-left: -50%;
  object-fit: cover;
  object-position: center;
`;

基本上使视频充满屏幕然后居中。

因此，我需要从中裁剪抓取的帧，以使其与屏幕上显示的内容匹配，但是我进行了很多搜索，但无法完全编译一下如何全部完成。

在上传框架之前，我使用画布将其转换为base64，如下所示：

  imageAsBase64 = image => {
    var canvas = document.createElement("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    let context = canvas.getContext("2d");
    context.drawImage(image, 0, 0);
    context.setTransform(1,0,0,1,0,0);

    return canvas.toDataURL("image/png", 0.5);
  };

我知道在这里我必须裁剪图像以匹配窗口中的网络摄像头视频，但是不知道如何。谁能帮助我或指出正确的方向？

裁剪网络摄像头视频帧以匹配窗口

0 个答案: