Failed to bind EAGLDrawable in WebRTC react native - reactjs

Question

I'm going to create video chat through webRTC using React native iOS. For that I've written react native code for iOS. It's asking me for camera access but after that it fails to load video and throws a warming message,
Failed to bind EAGLDrawable: <CAEAGLLayer: 0x16d50e30> to GL_RENDERBUFFER 1
Failed to make complete framebuffer object 8cd6
I know above warning is due to not getting view to camera for rendering video frames. But i don't know what wrong with my react code which fails to give it frame, my code is following,
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View
} from 'react-native';
var WebRTC = require('react-native-webrtc');
var {
RTCPeerConnection,
RTCMediaStream,
RTCIceCandidate,
RTCSessionDescription,
RTCView
} = WebRTC;
var container;
var configuration = {"iceServers": [{"url": "stun:stun.l.google.com:19302"}]};
var pc = new RTCPeerConnection(configuration);
navigator.getUserMedia({ "audio": true, "video": true }, function (stream) {
pc.addStream(stream);
});
pc.createOffer(function(desc) {
pc.setLocalDescription(desc, function () {
// Send pc.localDescription to peer
}, function(e) {});
}, function(e) {});
pc.onicecandidate = function (event) {
// send event.candidate to peer
};
var RCTWebRTCDemo = React.createClass({
getInitialState: function() {
return {videoURL: null};
},
componentDidMount: function() {
container = this;
},
render: function() {
return (
<View style={styles.container}>
<RTCView streamURL={this.state.videoURL}/>
</View>
);
}
});
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('RCTWebRTCDemo', () => RCTWebRTCDemo);
I'm interested to know where i'm wrong?

Answer 1

I set frame before
<View style={styles.container}>
<RTCView streamURL={this.state.videoURL}/>
</View>
but its was wrong.
The RTCView creation is slightly different so we set frame inside RTCView syntax. Correct way is,
<View>
<RTCView streamURL={this.state.videoURL} style={styles.container}/>
</View>