canozgen9 / react-native-janus Goto Github PK

import React, { useEffect, useState } from 'react';
import {StyleSheet,View,Text, Dimensions, 
    TouchableOpacity, SearchBar, StatusBar, 
    FlatList, Button,
    PlatformColor} from "react-native" ;
import { useLayoutEffect } from 'react/cjs/react.production.min';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import * as RootNavigation from '../../utils/navigation/RootNavigation';

import { Janus } from 'react-native-janus';

import {mediaDevices, MediaStream, RTCIceCandidate, RTCPeerConnection, RTCSessionDescription, RTCView} from 'react-native-webrtc';
 
Janus.setDependencies({
    RTCPeerConnection,
    RTCSessionDescription,
    RTCIceCandidate,
    MediaStream,
});

export default function GroupCallScreen({navigation}){
    const [stream, setStream] = useState()
    const [publisher, setPublisher] = useState([])
    

    useEffect(() => {
        navigation.setOptions({
            headerLeft: () => (<MaterialCommunityIcons 
                    name='arrow-left'
                    size={24}
                    color={RootNavigation.defaultNavBtnColor}
                    onPress={() => {navigation.pop()}} />)
        })
    }, []);


    _receivePublisher = async (publisher) => {
        try {
            let videoRoom = new JanusVideoRoomPlugin(this.janus);
            videoRoom.setRoomID(1234);
            videoRoom.setOnStreamListener((stream) => {
                setStream(stream)
                setPublisher(publisher)
            });

            await videoRoom.createPeer();
            await videoRoom.connect();
            await videoRoom.receive(this.videoRoom.getUserPrivateID(), publisher);
        } catch (e) {
            console.error(e);
        }
    };

    _removePublisher = async (publisher) => {
        try {
            setPublisher(publishers.filter(pub => pub.publisher == null || pub.publisher.id !== publisherID))
        } catch(e) {
            console.error(e);
        }
    };

    _initJanus = async (stream) => {
        try {
            setStream(null)
            setPublisher([])

            this.janus = new Janus('ws://${YOUR_JANUS_ADDRESS]:8188');
            this.janus.setApiSecret('janusrocks');
            await this.janus.init();
 
            this.videoRoom = new JanusVideoRoomPlugin(this.janus);
            this.videoRoom.setRoomID(1234);
            this.videoRoom.setDisplayName('can');
            this.videoRoom.setOnPublishersListener((publishers) => {
                for (let i = 0; i < publishers.length; i++) {
                    this.receivePublisher(publishers[i]);
                }
            });
            this.videoRoom.setOnPublisherJoinedListener((publisher) => {
                this.receivePublisher(publisher);
            });
            this.videoRoom.setOnPublisherLeftListener((publisherID) => {
                this.removePublisher(publisherID);
            });
            this.videoRoom.setOnWebRTCUpListener(async () => {
 
            });
 
            await this.videoRoom.createPeer();
            await this.videoRoom.connect();
            await this.videoRoom.join();
            await this.videoRoom.publish(stream);
        } catch(e) {
            console.error(e);
        }
    };
   
    _getMediaStream = async () => {
        let isFront = true;
        let sourceInfos = await mediaDevices.enumerateDevices();
        let videoSourceId;
        for (let i = 0; i < sourceInfos.length; i++) {
            const sourceInfo = sourceInfos[i];
            console.log(sourceInfo);
            if (sourceInfo.kind == 'videoinput' && sourceInfo.facing == (isFront ? 'front' : 'environment')) {
                videoSourceId = sourceInfo.deviceId;
            }
        }

        let stream = await mediaDevices.getUserMedia({
            audio: true,
            video: {
                facingMode: (isFront ? 'user' : 'environment'),
            },
        });
        await this.initJanus(stream);
    };
 
    return(
        <View style={{flex: 1, width: '100%', height: '100%', backgroundColor: 'white', flexDirection: 'row'}}>
                <StatusBar translucent={true} barStyle={'light-content'}/>
                <FlatList
                    data={stream.publishers}
                    numColumns={2}
                    keyExtractor={(item, index) => {
                        if (item.publisher === null) {
                            return `rtc-default`;
                        }
                        return `rtc-${item.publisher.id}`;
                    }}
                    renderItem={({item}) => (
                        <RTCView style={{
                            flex: 1,
                            height: (Dimensions.get('window').height / 2),
                        }} objectFit={'cover'} streamURL={item.stream.toURL()}/>
                    )}
                />
        </View>
    )
}

const GroupCallLeftHeader = (props) => {
    return(
        <View style={{
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center'
        }}>
            <MaterialCommunityIcons name='qrcode' color={navBtnColor} size={24} style={{ marginLeft: 12, marginRight: 24}}/>
            <MaterialIcons name='business-center' color={navBtnColor} size={28} style={{ marginBottom: 3}}/>
        </View>
        
    )
}

TypeError: Cannot read property 'toURL' of undefined

This error is located at:
    in CellRenderer (at VirtualizedList.js:851)
    in RCTView (at ScrollView.js:1063)
    in RCTScrollView (at ScrollView.js:1196)
    in ScrollView (at VirtualizedList.js:1280)
    in VirtualizedList (at FlatList.js:633)
    in FlatList (at test.js:181)
    in RCTView (at test.js:173)
    in JanusVideoRoomScreen
    in RCTView (at SafeAreaView.js:41)
    in ForwardRef(SafeAreaView) (at App.js:39)
    in App (at renderApplication.js:45)
    in RCTView (at AppContainer.js:109)
    in RCTView (at AppContainer.js:135)
    in AppContainer (at renderApplication.js:39)

+-- @babel/[email protected]
+-- @babel/[email protected]
+-- @react-native-community/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]