react-native-webrtc

A WebRTC module for React Native.

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

NOTE for Expo users: this plugin doesn't work unless you eject.

Important note for React Native 0.58 users

React Native 0.58 supports 64bit apps on Android, but this plugin doesn't yet have support for 64bits. While this support is added, make sure your app is built only for 32bits, by making sure your app/build.gradle has this content in the defaultConfig section:

ndk {
    abiFilters 'armeabi-v7a', 'x86'
}

packagingOptions {
    // The project react-native does not provide 64-bit binaries at the
    // time of this writing. Unfortunately, packaging any 64-bit
    // binaries into the .apk will crash the app at runtime on 64-bit
    // platforms.
    exclude '/lib/mips64/**'
    exclude '/lib/arm64-v8a/**'
    exclude '/lib/x86_64/**'
}

Comunity

Everyone is welcome to you our Discourse community to discuss any React Native and WebRTC related topics.

WebRTC Revision

Please see wiki page about revision history.

Installation

• iOS
• Android

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.

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

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

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

let isFront = true;
mediaDevices.enumerateDevices().then(sourceInfos => {
  console.log(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;
    }
  }
  mediaDevices.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}] : [])
    }
  })
  .then(stream => {
    // Got stream!
  })
  .catch(error => {
    // Log error
  });
});

pc.createOffer().then(desc => {
  pc.setLocalDescription(des).then(() => {
    // Send pc.localDescription to peer
  });
});

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.

<RTCView streamURL={this.state.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.

Related projects

react-native-incall-manager

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

react-native-callkeep

Use react-native-callkeep to use callkit on iOS or connection service on Android to have native dialer with your webrtc application.

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.