RTC无法在Android上渲染视频

时间:2018-11-14 07:59:13

标签: android react-native webrtc

我正在研究RTC Oney Example 我已经使用了最基本的示例,但是仍然无法在RTC视图中查看我的localstream,我在日志中没有看到任何错误,有人可以帮助我我在做什么错吗?

这是我的代码:

'use strict';

import React from 'react';
import {
    Platform,
    Animated,
    StyleSheet,
    View,
    Text
} from 'react-native';

import {
    RTCPeerConnection,
    RTCIceCandidate,
    RTCSessionDescription,
    RTCView,
    MediaStream,
    MediaStreamTrack,
    getUserMedia
} from 'react-native-webrtc'

export default class WebRTC extends React.Component {

    state = {
        videoURL: null,
        isFront: true
    }

    componentDidMount() {
        const configuration = { "iceServers": [{ "url": "stun:stun.l.google.com:19302" }] };
        const pc = new RTCPeerConnection(configuration);
        const { isFront } = this.state;
        MediaStreamTrack.getSources(sourceInfos => {
            console.log('MediaStreamTrack.getSources', sourceInfos);
            let videoSourceId;
            for (let i = 0; i < sourceInfos.length; i++) {
                const sourceInfo = sourceInfos[i];
                if (sourceInfo.kind === 'video' && sourceInfo.facing === (isFront ? 'front' : 'back')) {
                    videoSourceId = sourceInfo.id;
                }
            }
            getUserMedia({
                audio: true,
                video: {
                    mandatory: {
                        minWidth: 500, 
                        minHeight: 500
                    },
                    facingMode: (isFront ? 'user' : 'environment'),
                    optional: (videoSourceId ? [{ sourceId: videoSourceId }] : [])
                }
            }, (stream) => {
                console.log('Streaming OK', stream);
                this.setState({
                    videoURL: stream.toURL()
                });
                pc.addStream(stream);
            }, error => {
                console.log('Oops, we getting error', error.message);
                throw error;
            });
        });
        pc.createOffer((desc) => {
            pc.setLocalDescription(desc, () => {
                console.log('pc.setLocalDescription');
            }, (e) => { throw e; });
        }, (e) => { throw e; });

        pc.onicecandidate = (event) => {
            console.log('onicecandidate', event);
        };

    }

    render() {
        if (this.state.videoURL) {
            console.warn(this.state.videoURL);
            return (
                <View style={styles.container}>
                    <Text style={styles.text}>Working On Web RTC</Text>
                    <RTCView streamURL={this.state.videoURL}  />
                </View>

            );
        }
        else {
            return (
                <View>
                    <Text style={styles.text}>Not Working On Web RTC</Text>
                </View>

            );
        }

    }
}
const styles = {
    text: {
        textAlign: "center"
    },
    container: {
        flex: 1,
        backgroundColor: '#ccc',
        borderWidth: 1,
        borderColor: '#000'
    }
};

它说我需要使用信令服务器,但是我遵循了this教程,并且没有任何信令服务器就可以正常工作。

  

我正在使用:react-native-cli:2.0.1 react-native:0.57.4

0 个答案:

没有答案