webrtc-library-test
TypeScript icon, indicating that this package has built-in type declarations

1.9.1 • Public • Published

webrtc-library-test

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

The Discourse community hosts discussions of React Native and WebRTC related topics.

WebRTC Revision

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" : "environment")) {
      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

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.

Readme

Keywords

Package Sidebar

Install

npm i webrtc-library-test

Weekly Downloads

2

Version

1.9.1

License

MIT

Unpacked Size

60.2 MB

Total Files

188

Last publish

Collaborators

  • gmccobb22