Hello, I am having trouble displaying an incoming video stream in a react-native-webrtc RTCView!
The following error keeps coming up: “Invariant Violation: requireNativeComponent: “RTCVideoView” was not found in the UIManager.”
Screen.js:
import React, { useContext} from 'react';
import {View, StyleSheet, Text} from 'react-native';
import {
RTCView
} from 'react-native-webrtc';
import {SocketContext} from '../../Context';
import Callnotification from '../components/Callnotification';
function CallScreen(props) {
const { callAccepted, userVideo, callEnded, me } = useContext(SocketContext);
return (
<>
{callAccepted && !callEnded && (
<View style={styles.root}>
<View style={[styles.videos, styles.remoteVideos]}>
<Text>Some text with information</Text>
<RTCView streamURL={userVideo} style={styles.remoteVideo}/>
</View>
</View>
)
}
<Callnotification/>
</>
);
}
Context.js
import React, { createContext, useState, useRef, useEffect } from 'react';
import { io } from 'socket.io-client';
import Peer from 'simple-peer';
const SocketContext = createContext();
const socket = io('http://localhost:5000');
const ContextProvider = ({ children }) => {
const [callAccepted, setCallAccepted] = useState(false);
const [callEnded, setCallEnded] = useState(false);
const [stream, setStream] = useState();
const [name, setName] = useState('');
const [call, setCall] = useState({});
const [me, setMe] = useState('');
const userVideo = useRef();
const connectionRef = useRef();
useEffect(() => {
socket.on('me', (id) => setMe(id));
socket.on('callUser', ({ from, name: callerName, signal }) => {
setCall({ isReceivingCall: true, from, name: callerName, signal });
});
}, [me]);
const answerCall = () => {
setCallAccepted(true);
const peer = new Peer({ initiator: false, trickle: false, stream });
peer.on('signal', (data) => {
socket.emit('answerCall', { signal: data, to: call.from });
});
peer.signal(call.signal);
connectionRef.current = peer;
};
/* const callUser = (id) => {
const peer = new Peer({ initiator: true, trickle: false, stream });
peer.on('signal', (data) => {
socket.emit('callUser', { userToCall: id, signalData: data, from: me, name });
});
peer.on('stream', (currentStream) => {
userVideo.current.srcObject = currentStream;
});
socket.on('callAccepted', (signal) => {
setCallAccepted(true);
peer.signal(signal);
});
connectionRef.current = peer;
};*/
const leaveCall = () => {
setCallEnded(true);
connectionRef.current.destroy();
};
return (
<SocketContext.Provider value={{
call,
callAccepted,
userVideo,
stream,
name,
setName,
callEnded,
me,
leaveCall,
answerCall,
}}
>
{children}
</SocketContext.Provider>
);
};
export { ContextProvider, SocketContext };
package.json:
{
"name": "uiapp",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start --dev-client",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@config-plugins/react-native-webrtc": "^2.1.1",
"@react-native-community/datetimepicker": "4.0.0",
"@react-native-community/hooks": "^2.8.1",
"@react-navigation/elements": "^1.3.3",
"@react-navigation/native": "^6.0.6",
"@react-navigation/native-stack": "^6.2.5",
"events": "^3.3.0",
"expo": "^44.0.0",
"expo-av": "~10.2.0",
"expo-splash-screen": "~0.14.1",
"expo-status-bar": "~1.2.0",
"metro": "^0.66.2",
"moment": "^2.29.1",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-calendars": "^1.1275.0",
"react-native-modal-datetime-picker": "^13.0.1",
"react-native-qrcode-svg": "^6.1.2",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.10.1",
"react-native-svg": "^12.1.1",
"react-native-tvfocus": "^0.2.0",
"react-native-web": "0.17.1",
"react-native-webrtc": "^1.100.0",
"react-native-webview": "11.15.0",
"simple-peer": "^9.11.1",
"socket.io-client": "^4.5.0"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"react-native-svg-transformer": "^1.0.0"
},
"private": true
}
DEVICE: Fire TV Stick Lite
Thank you for your help!