Quantcast
Channel: Active questions tagged youtube-api - Stack Overflow
Viewing all articles
Browse latest Browse all 3831

react native youtube live stream unable to detect camera error

$
0
0

I a trying to integrate youtube live streaming feature in my reactnative app but the problem is when it runs it gives me an error below

[11:49:25] W | ReactNativeJS ▶︎ Warning: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.││ Check the render method of YoutubeLiveStream.││ This error is located at:│ at RCTView ()I am using react-native-nodemediaclient

i am not sure what am i doing wrong is there anyone that can help me to resolve this issue

or do I have to use built in camera and push it via rtmp

This is my code

 `import NodeCameraView from 'react-native-nodemediaclient';    export function YoutubeLiveStream({ route }: Props) {        const { rtmp_url, stream_key } = route.params;        const [isStreaming, setIsStreaming] = useState<boolean>(false);        const nodeCameraRef = useRef<NodeCameraView | null>(null);         useEffect(() => {          requestCameraPermission();         }, []);  const requestCameraPermission = async () => {    if (Platform.OS === "android") {      try {        const granted = await PermissionsAndroid.requestMultiple([          PermissionsAndroid.PERMISSIONS.CAMERA,          PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,        ]);        if (          granted["android.permission.CAMERA"] ===            PermissionsAndroid.RESULTS.GRANTED &&          granted["android.permission.RECORD_AUDIO"] ===            PermissionsAndroid.RESULTS.GRANTED        ) {          console.log("Camera & mic permissions granted ✅");        } else {          console.log("Camera or mic permission denied ❌");        }      } catch (err) {        console.warn(err);      }    }  };const onPressStreamingAction = () => {  if (!isStreaming) {    nodeCameraRef.current?.start();    setIsStreaming(true);  } else {    nodeCameraRef.current?.stop();    setIsStreaming(false);  }};  if (!stream_key) {    return;  }  return (<View><NodeCameraView        ref={nodeCameraRef}        style={{          width: Dimensions.get('screen').width,          height: Dimensions.get('screen').height,        }}        outputUrl={`${rtmp_url}/${stream_key}`}        camera={{cameraId: 1, cameraFrontMirror: true}}        audio={{bitrate: 32000, profile: 1, samplerate: 44100}}        video={{          preset: 12,          bitrate: 400000,          profile: 1,          fps: 15,          videoFrontMirror: false,        }}        autopreview={true}      /><View style={styles.actionWrapper}><TouchableOpacity onPress={onPressStreamingAction}><Text>{isStreaming ? 'Stop' : 'Start Streaming'}</Text></TouchableOpacity></View></View>  );`

Viewing all articles
Browse latest Browse all 3831

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>