A WebRTC module for React Native.
Objective-C Java JavaScript Python Other
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Documentation doc: update Android installation instructions Aug 16, 2018
android Merge pull request #496 from saghul/merge-jitsi Aug 17, 2018
ios ios: remove unneeded method Aug 15, 2018
tools tools: fix getting all headers in iOS builds Aug 15, 2018
.gitignore Update .gitignore Apr 25, 2017
ISSUE_TEMPLATE.md misc: add issue template Jul 6, 2017
LICENSE Create LICENSE Nov 6, 2015
MediaStream.js [Android] Fix MediaStream.id collisions Oct 29, 2016
MediaStreamError.js Style fixes Jun 30, 2016
MediaStreamErrorEvent.js Style fixes Jun 30, 2016
MediaStreamEvent.js Style fixes Jun 30, 2016
MediaStreamTrack.js js: fix promisify catch and support single success callback. Jun 6, 2018
MediaStreamTrackEvent.js Style fixes Jun 30, 2016
MessageEvent.js Style fixes Jun 30, 2016
README.md readme: update to 1.67.0 and remove out-dated info Aug 17, 2018
RTCDataChannel.js Fix for sending TypedArray's that are a subview of the underlying Arr… Sep 14, 2017
RTCDataChannelEvent.js Style fixes Jun 30, 2016
RTCEvent.js Style fixes Jun 30, 2016
RTCIceCandidate.js Style fixes Jun 30, 2016
RTCIceCandidateEvent.js Merge pull request #96 from philikon/style_fixes Jul 3, 2016
RTCPeerConnection.js Merge remote-tracking branch 'oney/master' into merge-upstream Aug 15, 2018
RTCSessionDescription.js Style fixes Jun 30, 2016
RTCUtil.js RTCUtil.js Deep clone default constraints (#434) Aug 17, 2018
RTCView.js Migrate to 'prop-types' module Jan 19, 2018
getUserMedia.js RTCUtil.js Deep clone default constraints (#434) Aug 17, 2018
index.js Style fixes Jun 30, 2016
package.json release 1.67.0 Aug 17, 2018
react-native-webrtc.podspec ios: fix build when using `use_frameworks!` Apr 19, 2018

README.md

react-native-webrtc

npm version npm downloads

A WebRTC module for React Native.

  • Support iOS / Android.
  • Support Video / Audio / Data Channels.

WebRTC Revision

react-native-webrtc WebRTC Version arch(ios) arch(android) npm published note additional picks
0.54.7 M54
(13869)
(+6-14091)
x86_64
i386
armv7
arm64
armeabi-v7a
x86
✔️ RN < 40
1.57.1 M57
(16123)
(+7-16178)
x86_64
i386
armv7
arm64
armeabi-v7a
x86
✔️ * 16805
* 16462
1.58.3 M58
commit
(16937)
(+21-18206)
x86_64
i386
armv7
arm64
armeabi-v7a
x86
✔️ Promise Support * 17065
* 17925
* 18140
* 18277
1.63.0 M63
commit
(20237)
(+14-21432)
x86_64
i386
armv7
arm64
armeabi-v7a
x86
✔️ * 20611
* 21519
1.67.0 M67
commit
(22779)
(+28-23167)
x86_64
i386
armv7
arm64
armeabi-v7a
x86
✔️
master M67
commit
(22779)
(+28-23167)
x86_64
i386
armv7
arm64
armeabi-v7a
x86
⚠️ test me plz

Since 0.53, we use same branch version number like in webrtc native. please see wiki page about revision history

format:

${branch_name} stable (${branched_from_revision})(+${Cherry-Picks-Num}-${Last-Cherry-Picks-Revision})

  • the webrtc revision in brackets is extracting frrom Cr-Branched-From instead Cr-Commit-Position
  • the number follows with + is the additional amount of cherry-picks since Branched-From revision.

note:

the order of commit revision is nothing to do with the order of cherry-picks, for example, the earlier committed cherry-pick-#2 may have higher revision than cherry-pick-#3 and vice versa.

Installation

Usage

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

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

Anything about using RTCPeerConnection, RTCSessionDescription and RTCIceCandidate is like browser.
Support most WebRTC APIs, please see the Document.

var configuration = {"iceServers": [{"url": "stun:stun.l.google.com:19302"}]};
var pc = new RTCPeerConnection(configuration);

let isFront = true;
MediaStreamTrack.getSources(sourceInfos => {
  console.log(sourceInfos);
  let videoSourceId;
  for (const 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, // Provide your own width, height and frame rate here
        minHeight: 300,
        minFrameRate: 30
      },
      facingMode: (isFront ? "user" : "environment"),
      optional: (videoSourceId ? [{sourceId: videoSourceId}] : [])
    }
  }, function (stream) {
    console.log('dddd', stream);
    callback(stream);
  }, logError);
});

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
};

// also support setRemoteDescription, createAnswer, addIceCandidate, onnegotiationneeded, oniceconnectionstatechange, onsignalingstatechange, onaddstream

However, render video stream should be used by React way.

Rendering RTCView.

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

And set stream to RTCView

container.setState({videoURL: stream.toURL()});

Custom APIs

MediaStreamTrack.prototype._switchCamera()

This function allows to switch the front / back cameras in a video track on the fly, without the need for adding / removing tracks or renegotiating.

VideoTrack.enabled

Starting with version 1.67, when setting a local video track's enabled state to false, the camera will be closed, but the track will remain alive. Setting it back to true will re-enable the camera.

Demos

Official Demo

author: @oney

The demo project is https://github.com/oney/RCTWebRTCDemo
And you will need a signaling server. I have written a signaling server https://react-native-webrtc.herokuapp.com/ (the repository is https://github.com/oney/react-native-webrtc-server).
You can open this website in browser, 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.

Demo by Folks

author: @thoqbk

Native control

Use react-native-incall-manager to keep screen on, mute microphone, etc.

Sponsorship

This repository doesn't have a plan to get sponsorship.(This can be discussed afterwards by collaborators). If you would like to pay bounty to fix some bugs or get some features, be free to open a issue that adds [BOUNTY] category in title. Add other bounty website link like this will be better.