如何访问 Expo Camera 中的当前视频帧？答案

【问题标题】：How to access current video frame in Expo Camera?如何访问 Expo Camera 中的当前视频帧？
【发布时间】：2021-05-23 14:03:41
【问题描述】：

我正在尝试访问 React Native 中的当前视频帧。在使用带有以下代码的 React.js 时，我能够对“react-webcam”执行相同的操作。

import React from "react";
import Webcam from "react-webcam";

function MyFunc () {

  const cameraRef = useRef(null);

  const processFrame = async() => {
    if (cameraRef.current.video){
      const img = cameraRef.current.video;
      // Code to process.
    };
    setTimeout(() => processFrame(), 500)
  };

  React.useEffect(() => {
    processFrame();
  }, [])

  return (
    <Webcam
      align="center"
      audio={false}
      mirrored={false}
      id="img"
      ref={cameraRef}
      style={{display: "none"}}
    />
  );
};

我目前在 React Native 中使用 Expo Camera 的代码是 -

import React, { useState, useEffect, useRef } from "react";

import { Camera } from "expo-camera";

export function MyFunc () {

  const cameraRef = useRef(null);

  const processFrame = async () => {
    const img = cameraRef.current.video;
    console.log(img); // This prints undefined

    setTimeout(() => processFrame(), 500)
  };

  useEffect(() => {
    processFrame();
  }, []);

  return (
    <Camera
      ref={cameraRef}
      type={Camera.Constants.Type.front}
      style={{opacity: 0, width:1, height:1}}
    />
  );
};

如果可能，请告诉我如何在不使用 asyncTakePicture 的情况下访问当前视频帧。

【问题讨论】：

标签： react-native expo android-camera

【解决方案1】：

您需要一个实时工作的相机，即 Tensorflow 相机（由 expo-camera 构建）

cameraWithTensors (CameraComponent), 一个高阶组件 (HOC)，它增强了 Expo.Camera 组件，能够生成表示相机流的张量。

因为在这个过程中会消耗相机数据，所以原相机组件不会渲染任何内容。该组件提供可用于渲染相机预览的选项。

值得注意的是，该组件允许将相机图像动态调整为更小的尺寸，这极大地加快了本机线程和 javascript 线程之间的数据传输速度。

For more info: Tensorflow React Native API

【讨论】：