无法在react-native Expo Camera录制上添加叠加

Question

为什么我无法在 Expo 相机上添加叠加层？

我尝试在下面的示例中添加文本“Hello”（如水印）。现在，我可以在我的应用程序上看到这一点，但是，当我保存录音并检查该视频时，我根本看不到文本“Hello”出现。

我该如何解决这个问题？？

        <Camera
          style={{
            flex: 1,
            width: "100%",
          }}
          type={camType}
          ref={cameraRef}
          autoFocus={AutoFocus.on}
          ratio={'1:1'}
          videoStabilizationMode={VideoStabilization.auto}
          >
          <Text style={{ backgroundColor: 'green', justifyContent: "center", textAlign: "center", top: 50}}>Hello</Text>

        </Camera>

Answer 1

我认为没有办法用

expo-camera

来做到这一点，这几天我也一直在寻找解决方案。

这是我的代码，它可以正确记录和保存视频，但是当您检查视频播放时，视频顶部没有显示任何内容

import { CameraView, useCameraPermissions } from "expo-camera";
import * as MediaLibrary from "expo-media-library";
import { useState, useRef, Children } from "react";
import {
  Button,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  Image,
} from "react-native";

export default function CameraComponent() {
  const [permission, requestPermission] = useCameraPermissions();
  const [mediaLibraryPermission, requestMediaLibraryPermission] =
    MediaLibrary.usePermissions();

  const cameraRef = useRef<CameraView>(null);
  const [recording, setRecording] = useState(false);

  if (!permission) {
    // Camera permissions are still loading.
    return <View />;
  }

  const takeVideo = async () => {
    console.log("taking video");

    if (cameraRef.current) {
      try {
        setRecording(true);

        const video = await cameraRef.current.recordAsync();
        console.log("video", video);

        if (video) {
          console.log("video.uri", video.uri);
          const asset = await MediaLibrary.createAssetAsync(video.uri);
          console.log(asset);
        }
      } catch (error) {
        console.log("error", error);
      }
    }
  };

  const stopVideo = async () => {
    if (cameraRef.current) {
      try {
        const stoppingVideo = await cameraRef.current.stopRecording();
        console.log("stopping video", stoppingVideo);
        setRecording(false);
      } catch (error) {
        console.log("error", error);
      }
    }
  };

  if (!permission.granted || !mediaLibraryPermission?.granted) {
    return (
      <View style={styles.container}>
        <Text style={{ textAlign: "center" }}>
          We need your permission to show the camera
        </Text>
        <Button onPress={requestPermission} title="grant permission" />
        <Button onPress={requestPermission} title="Grant Camera Permission" />
        <Button
          onPress={requestMediaLibraryPermission}
          title="Grant Media Library Permission"
        />
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <CameraView style={styles.camera} ref={cameraRef} mode="picture">
        <View className="h-full flex-row items-end justify-center">
          <TouchableOpacity
            className="bg-red-500 p-4 rounded-lg m-2 "
            onPress={takeVideo}
            disabled={recording}
          >
            <Text className="text-white text-center text-2xl font-bold">
              {recording ? "Recording" : "Record"}
            </Text>
          </TouchableOpacity>
          <TouchableOpacity
            className="bg-red-500 p-4 rounded-lg m-2 "
            onPress={stopVideo}
          >
            <Text className="text-white text-center text-2xl font-bold">
              Stop
            </Text>
          </TouchableOpacity>
        </View>
      </CameraView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
  },
  camera: {
    flex: 1,
  },
  button: {
    flex: 1,
    alignSelf: "flex-end",
    alignItems: "center",
  },
  text: {
    fontSize: 24,
    fontWeight: "bold",
    color: "white",
  },
});

我也尝试过https://react-native-vision-camera.com/ 但没有运气