atyenoria / react-native-webrtc-janus-gateway

Video conference system for mobile application. Base technology is react-native-webrtc + Janus Webrtc Gateway
https://github.com/atyenoria/react-native-janus-gateway-webrtc-video-chat
195 stars 76 forks source link

Streaming video is not displayed in both iOS and android phones ! #10

Open sarray23 opened 4 years ago

sarray23 commented 4 years ago

Hello, I'm trying to display a remote streaming video but i succeed to connect to janus library but i get at the end a black screen instead of video content. Any idea about this issue please? Am using the same library janus.mobile.js In my Video component i call janusStart this way:

janusStart = () => { containerStreaming.setState({ visible: true }); Janus.init({ debug: [], callback: function() { let streaming = null; let janus = new Janus({ iceServers: this.state.iceServers, server: this.state.server, token: this.state.token,

                error: function(error) {
                    Janus.error('Janus  -- ' + error);
                    Janus.error('Destroying Janus');
                    janus.destroy();
                },
                destroyed: function() {
                    Janus.log('Janus ' + name + ' -- ' + 'Janus session destroyed');
                },
                success: function() {
                    janus.attach({
                        plugin: 'janus.plugin.streaming',
                        success: function(pluginHandle) {
                            streaming = pluginHandle;
                            Janus.log(`Janus Plugin Attached : ${pluginHandle.getId()}`);
                            streaming.send({ message: { request: 'watch', id: this.state.id } });
                        },
                        error: function(error) {
                            Janus.error(`Error Attaching Janus Plugin ${error}`)
                        },
                        onmessage: function(msg, jsep) {
                            console.log("jsep" ,jsep.sdp);
                            Janus.log(`Janus Message received : ${JSON.stringify(msg)} and jsep ${jsep}`);
                            var result = msg['result'];
                            if (!!result && result['status'] == 'stopped') {
                                janus.destroy();
                                return;
                            }
                            if (jsep !== null && jsep !== undefined) {
                                Janus.log(`JANUS : Handling SDP as well : ${jsep}`);
                                streaming.createAnswer({
                                    jsep: jsep,
                                    media: { audioSend: false, videoSend: false }, // recvonly
                                    success: function(jsep){
                                        Janus.debug(`Janus Got SDP : ${jsep}`)
                                        streaming.send({ message: { request: 'start' }, jsep: jsep });
                                    },
                                    error: function(error) {
                                        Janus.error(`Janus WebRTC error : ${error}`)
                                    }
                                });
                            }
                        },
                        onremotestream: function(stream) {
                            Janus.log('Janus Remote stream detected');
                            Janus.log(stream);
                            containerStreaming.setState({status: 'streaming', info: 'Streaming'});
                            containerStreaming.setState({selfViewSrc: stream.toURL()});
                            console.log("stream done")
                        },
                        oncleanup: function() {
                            Janus.log('Janus clean up notification')
                        }
                    })
                }
            });
        }
    })
};

I'm using webrtc to display the streaming video this way : <RTCView zOrder={0} streamURL={this.state.selfViewSrc} style={styles.streamingStyle} />

Note: Versions: react-native-webrtc : 1.75.3 RN: 0.60.5 Xcode : 11.3.1 Tested on real iphone device with os version 13 Latest androidStudio version.

adrien-prototype commented 4 years ago

Hi @sarray23 , did you find a solution to this ? I'm experiencing the same issue, everything seems fine but I don't get the video content. Thanks !!

krystianpach commented 4 years ago

This issue is related to react-native-webrtc version. If you want to make this repository work then you need to downgrade react-native-webrtc to 1.67.0 (1.69.0 support Promises instead of callbacks), or modify janus.mobile.js to support Promises.

edritech93 commented 3 years ago

same issue for me

fukemy commented 2 years ago

change turn