README example doesn't work.

[mirusu400]

Hello. I'm trying to build these package and examples in my environment, but it doesn't work, it just shows white screen. I've trying to fix it out, I've trace it and in my console log, this.state.publishers.publisher always print null, so I changed like this:

on line 27
--            videoRoom.setOnStreamListener((stream) => {
--                this.setState(state => ({
--                    publishers: [
--                        ...state.publishers,
--                       {
--                            publisher: publisher,
--                            stream: stream,
--                        },
--                    ],
--                }));
--            });

to
++            let tstream = videoRoom.setOnStreamListener()
++            this.setState({
++                publishers: [
++                    ...this.state.publishers,
++                    {
++                        publisher: _publisher,
++                        stream: tstream,
++                    }
++                ]
++            });

after changing this, the publishers doesn't have null and now they have proper objects, but after this I got another error on render:

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)

How can I fix these? Can you give me a advice?

Also, here is my environment:

+-- @babel/core@7.9.0
+-- @babel/runtime@7.9.2
+-- @react-native-community/eslint-config@1.0.0
+-- eslint@6.8.0
+-- metro-react-native-babel-preset@0.58.0
+-- react-native-janus@0.0.1
+-- react-native-webrtc@1.75.3
+-- react-native@0.62.2
`-- react@16.11.0

[davidyashgur]

you want to use the toURL method on the stream object so try something like this.state.publishers.stream

[mirusu400]

@CodeHownd I found the problem

• The written code in README saves stream on state.publishers, but not publisher.
• The written code by me saves publisher on state.publisher, but not stream.

Also, I fount that setOnStreamListener is internally important function using callback, so changing these callbacks are much dangerous. Anyway, how can I get both stream and publisher on these method and save into state.publishers? is there any way to get them?

[davidyashgur]

so the publishers key in the state object should have a value that is a list of { publisher: publisher, stream: stream, }. objects. We want to append a new entry to the list so we take the stream we get from the onStreamListener and make an object with the publisher of that stream and append it in that listener callback. Hope this helps

[fukemy]

@mirusu400 @CodeHownd can u provide the reacthook way, i did

const [publishers, setPublisher] = React.useState()

videoRoom.setOnStreamListener((stream) => {
                setPublisher(...publishers,
                    {
                        publisher: publisher,
                        stream: stream,
                    })
            });

But can not see the video, please help