使用 Janus-gateway 的远程视频流未在 react-native 中显示

Posted 2023-02-23

【中文标题】使用 Janus-gateway 的远程视频流未在 react-native 中显示

【英文标题】：Remote video streaming using Janus-gateway not displaying in react-native

【发布时间】：2020-02-26 13:50:05

【问题描述】：

我正在尝试在我的 react 本机项目中使用 janus 网关显示远程流媒体视频。 我正在使用这个包：https://github.com/oney/react-native-webrtc 在我的组件和 janus 库（janus.mobile.js 文件）中显示流视频，从这里https://github.com/atyenoria/react-native-webrtc-janus-gateway/blob/master/src/janus.mobile.js

我的 onremotestream 功能被触发，但我一直收到黑屏而不是我的流媒体视频。（android 和 ios）

我正在使用 react-native-webrtc v：1.75.3 反应原生：0.60.5

我在我的组件中这样调用 Janus： 这是我的代码：

`导出默认类 VideoExample 扩展组件 组件DidMount() containerStreaming = this;

    Janus.init(debug: "all", callback: function() 
            if(started)
                return;
            started = true;
        );

    this.janusStart();


janusStart = () => 
    containerStreaming.setState( visible: true );
            let janus = new Janus(
                server: containerStreaming.props.server,
                iceServers: containerStreaming.props.iceServers,
                token: containerStreaming.props.token,

                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: containerStreaming.props.id  );
                        ,
                        error: function(error) 
                            Janus.error(`Error Attaching Janus Plugin $error`)
                        ,
                        mediaState: function(medium, on) 
                            containerStreaming.setState(status: 'stopped', info: 'Stopped');
                            Janus.log("Janus " + (on ? "started" : "stopped") + " receiving our " + medium);
                        ,
                        webrtcState: function(on) 
                            console.log("Janus says our WebRTC PeerConnection is " + (on ? "up" : "down") + " now");
                            // $("#videolocal").parent().parent().unblock();
                        ,
                        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());
                        ,
                        oncleanup: function() 
                            Janus.log('Janus clean up notification')
                        
                    )
                ,
                error: function(error) 
                    Janus.error('Janus  -- ' + error);
                    Janus.error('Destroying Janus');
                    janus.destroy();
                ,
                destroyed: function() 
                    window.location.reload();
                ,

            );
;

`

render() return ( <RTCView zOrder=0 streamURL=this.state.selfViewSrc style=styles.streamingStyle /> );;

【参考方案1】：

桌面 chromium 应用与 cefsharp.Net 的情况相同