react-native-webrtc

react-native-webrtc

A WebRTC module for React Native.

Installation

1.) Run react-native init RCTWebRTCDemo to create your react native project. (RCTWebRTCDemo can be any name you like)
2.) npm install react-native-webrtc --save
3.) Open RCTWebRTCDemo/node_modules/react-native-webrtc
4.) Drag RCTWebRTC directory to you project. Uncheck Copy items if needed and select Added folders: Create groups

5.) Select your target, select Build Phases, open Link Binary With Libraries, add those libraries

AVFoundation.framework
AudioToolbox.framework
CoreGraphics.framework
GLKit.framework
CoreAudio.framework
CoreVideo.framework
VideoToolbox.framework
libc.tbd
libsqlite3.tbd
libstdc++.tbd

6.) select Build Settings, find Library Search Paths, add $(SRCROOT)/../node_modules/react-native-webrtc with recursive
7.) Maybe you have to set Dead Code Stripping to No and Enable Bitcode to No.

Usage

Now, you can use WebRTC like in brower. In your index.ios.js, you can require WebRTC to import RTCPeerConnection, RTCSessionDescription, etc.

var WebRTC = require('react-native-webrtc');
var {
  RTCPeerConnection,
  RTCMediaStream,
  RTCIceCandidate,
  RTCSessionDescription,
  RTCView
} = WebRTC;

Anything about using RTCPeerConnection, RTCSessionDescription and RTCIceCandidate is like brower. However, render video stream should be used by react way.

Rendering RTCView.

var container;
var RCTWebRTCDemo = React.createClass({
  getInitialState: function() {
    return {videoSrc: null};
  },
  componentDidMount: function() {
    container = this;
  },
  render: function() {
    return (
      <View>
        <RTCView src={this.state.videoSrc}/>
      </View>
    );
  }
});

And set stream to RTCView

container.setState({videoSrc: stream.objectId});

Demo

The demo project is https://github.com/oney/RCTWebRTCDemo
And you will need a signaling server. I have written a signaling server http://react-native-webrtc.herokuapp.com/ (the repository is https://github.com/oney/react-native-webrtc-server).
You can enter this website in brower, and then set it as signaling server in the app, and run the app. After you enter the same room ID, the video stream will be connected.