Skip to content
The WebRTC module for React Native
Objective-C Java JavaScript Python Shell Ruby C
Branch: master
Clone or download
Latest commit 02cf429 Sep 10, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Documentation doc: update Android installation instructions Aug 29, 2019
android api: add support for the MediaStream constructor Jul 24, 2019
ios ios: add / remove renderes in the RN WebRTC thread Sep 5, 2019
tools tools: commit package-lock too Aug 16, 2019
.gitignore Update .gitignore Apr 25, 2017
ISSUE_TEMPLATE.md misc: we have a Discourse community now! Jan 18, 2019
LICENSE Create LICENSE Nov 6, 2015
MediaDevices.js misc: fix typo Nov 9, 2018
MediaStream.js misc: fix import Aug 5, 2019
MediaStreamError.js Style fixes Jun 30, 2016
MediaStreamErrorEvent.js Style fixes Jun 30, 2016
MediaStreamEvent.js Style fixes Jun 30, 2016
MediaStreamTrack.js api: add support for the MediaStream constructor Jul 24, 2019
MediaStreamTrackEvent.js Style fixes Jun 30, 2016
MessageEvent.js Style fixes Jun 30, 2016
Permissions.js android: workaround RN permissions bug Nov 9, 2018
README.md doc: fix typo in README Sep 10, 2019
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 api: add support for the MediaStream constructor Jul 24, 2019
RTCSessionDescription.js Style fixes Jun 30, 2016
RTCUtil.js fix: typo of STANDARD_OA_OPTIONS in RTCUtil.js Aug 19, 2019
RTCView.js Migrate to 'prop-types' module Jan 19, 2018
getUserMedia.js api: add support for the MediaStream constructor Jul 24, 2019
index.js Use ES6 export Jan 11, 2019
package-lock.json misc: update package-lock.json Aug 16, 2019
package.json release 1.75.0 Aug 16, 2019
react-native-webrtc.podspec build: drop iOS 9 support Jul 3, 2019

README.md

react-native-webrtc

npm version npm downloads

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.

Community

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

WebRTC Revision

react-native-webrtc WebRTC Version arch(ios) arch(android) npm published notes
1.75.0 M75 x86_64
i386
armv7
arm64
armeabi-v7a
arm64-v8a
x86
x86_64
✔️
1.69.2 M69 x86_64
i386
armv7
arm64
armeabi-v7a
arm64-v8a
x86
x86_64
✔️
1.69.1 M69
commit
(24012)
(+16-24348)
x86_64
i386
armv7
arm64
armeabi-v7a
arm64-v8a
x86
x86_64
✔️
1.69.0 M69
commit
(24012)
(+16-24348)
x86_64
i386
armv7
arm64
armeabi-v7a
x86
✔️
master M75 x86_64
i386
armv7
arm64
armeabi-v7a
arm64-v8a
x86
x86_64
⚠️ Please test!

Please see wiki page about revision history.

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.

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 == "videoinput" && sourceInfo.facing == (isFront ? "front" : "back")) {
      videoSourceId = sourceInfo.deviceId;
    }
  }
  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(desc).then(() => {
    // Send pc.localDescription to peer
  });
});

pc.onicecandidate = function (event) {
  // send event.candidate to peer
};

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

RTCView

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

Rendering RTCView.

<RTCView streamURL={this.state.stream.toURL()}/>
Name Type Default Description
mirror boolean false Indicates whether the video specified by "streamURL" should be mirrored during rendering. Commonly, applications choose to mirror theuser-facing camera.
objectFit string 'contain' Can be contain or cover
streamURL string '' This is mandatory
zOrder number 0 Similarly to zIndex

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.

Creator

This repository is originally created by Wan Huang Yang.

You can’t perform that action at this time.