【问题标题】:Getting expo-camera ref to start working to record videos in functional component让 expo-camera ref 开始在功能组件中录制视频
【发布时间】:2020-08-21 00:24:22
【问题描述】:

我正在尝试让 expo 相机录制视频。但是,我收到一个错误:

[TypeError: camera.recordAsync is not a function. (In ‘camera.recordAsync()’, ‘camera.recordAsync’ is undefined)]

这是实现:

<Camera 
                style={{ flex: 1 }} 
                type={type}
                ref={camera}
            >
                <View
                style={{
                    flex: 1,
                    backgroundColor: 'transparent',
                    flexDirection: 'row',
                }}>
                <View style={{ alignSelf: 'flex-end', alignItems: 'center', padding: 20, flexDirection: 'row', justifyContent: 'space-between', width: '100%'}}>
                    <MaterialIcons name="video-library" onPress={pickVideo} color={"#eee"} size={45}/>     
                    <RecordingIcon />    
                    <Ionicons name="ios-reverse-camera" onPress={setCameraType} color={"#eee"} size={45}/>                     
                </View>
                </View>
            </Camera>

重要的一行是 RecordingIcon。这表示可以按下来录制和停止录制的图标。

function RecordingIcon (){
        if(recording){
            stopRecording()
            return (
                <MaterialIcons name="fiber-manual-record" onPress={() => setRecording(false)} color={"#FF0000"} size={60}/>  
            )
        } else {
            record()
            return (
                <MaterialIcons name="fiber-manual-record" onPress={() => setRecording(true)} color={"#eee"} size={60}/>  
            )
        }
    }

每次我点击录制图标时,都会调用这两个函数之一。

async function record(){
        console.log("record", camera); 
        if(camera){
            let recording = await camera.recordAsync(); 
        }
    }

    async function stopRecording(){
        console.log("stop recording", camera); 
        if(camera){
            let stopRecording = await camera.stopRecording(); 
        }
    }

但是,由于顶部的错误,这两个都不起作用:

async function record(){
        console.log("record", camera); 
        if(camera){
            let recording = await camera.recordAsync(); 
        }
    }

    async function stopRecording(){
        console.log("stop recording", camera); 
        if(camera){
            let stopRecording = await camera.stopRecording(); 
        }
    }

这就是我初始化相机参考的方式。

let camera = useRef(null);

非常感谢任何人帮助解决此错误。我也试过做 camera.current.recordAsync() 和 camera.current.stopRecording(),但我得到了同样的错误。

【问题讨论】:

  • 不确定这是否已解决,但您是否考虑过关于 ref 的相机组件,执行类似 {setCamera(ref);}}> 相机>

标签: reactjs react-native camera expo ref


【解决方案1】:

使用 camera.current

async function record(){
    console.log("record", camera); 
    if(camera){
        let recording = await camera.current.recordAsync(); 
    }
}
async function stopRecording(){
   console.log("stop recording", camera); 
   if(camera){
       let stopRecording = await camera.current.stopRecording(); 
   }
}

【讨论】:

    猜你喜欢
    • 2021-07-07
    • 2020-02-22
    • 1970-01-01
    • 1970-01-01
    • 2019-12-11
    • 2021-10-22
    • 1970-01-01
    • 2023-03-07
    • 1970-01-01
    相关资源
    最近更新 更多