这是我的代码:
import React, { Component } from 'react';
// import { Platform } from 'react-native';
import {
RTCPeerConnection,
RTCMediaStream,
RTCIceCandidate,
RTCSessionDescription,
RTCView,
MediaStreamTrack,
getUserMedia,
} from 'react-native-webrtc';
class App extends Component {
// Initial state
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];
// I like ' than "
if (sourceInfo.kind === 'video' && sourceInfo.facing === (isFront ? 'front' : 'back')) {
videoSourceId = sourceInfo.id;
}
}
getUserMedia({
audio: true,
// THIS IS FOR SIMULATOR ONLY
// In fact, you better test on real iOS/Android device
// We just can test audio on simulator, so i set video = false
// video: Platform.OS === 'ios' ? false : {
video: {
mandatory: {
minWidth: 500, // Provide your own width, height and frame rate here
minHeight: 300,
minFrameRate: 30
},
facingMode: (isFront ? 'user' : 'environment'),
optional: (videoSourceId ? [{ sourceId: videoSourceId }] : [])
}
}, (stream) => {
// use arrow function :)
// (stream) or stream are fine
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, () => {
// Send pc.localDescription to peer
console.log('pc.setLocalDescription');
}, (e) => { throw e; });
}, (e) => { throw e; });
pc.onicecandidate = (event) => {
// send event.candidate to peer
console.log('onicecandidate', event);
};
}
render() {
return (
<RTCView streamURL={this.state.videoURL} style={styles.container} />
);
}
}
const styles = {
container: {
flex: 1,
backgroundColor: '#ccc',
borderWidth: 1,
borderColor: '#000'
}
};
export default App;
为什么我总是在问题标题中出现在线错误?。
<RTCView streamURL={this.state.videoURL} style={styles.container} />
这是您忘记做时的常见问题
npx pod-install
降级到react-native-video": "^5.2.1解决了我的问题。
供参考: 反应本机”:“0.74.3