Skip to content

Latest commit

 

History

History
162 lines (121 loc) · 7.89 KB

README.md

File metadata and controls

162 lines (121 loc) · 7.89 KB
Raw

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.2 M75 x86_64
i386
armv7
arm64		 armeabi-v7a
arm64-v8a
x86
x86_64		 ✔️
1.75.1 M75 x86_64
i386
armv7
arm64		 armeabi-v7a
arm64-v8a
x86
x86_64		 ✔️
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,
  registerGlobals
} 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

registerGlobals()

By calling this method the JavaScript global namespace gets "polluted" with the following additions:

  • navigator.mediaDevices.getUserMedia()
  • navigator.mediaDevices.enumerateDevices()
  • window.RTCPeerConnection
  • window.RTCIceCandidate
  • window.RTCSessionDescription
  • window.MediaStream
  • window.MediaStreamTrack

This is useful to make existing WebRTC JavaScript libraries (that expect those globals to exist) work with react-native-webrtc.

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.