@daily-co/react-native-webrtc
    TypeScript icon, indicating that this package has built-in type declarations

    1.94.1-daily.5 • Public • Published

    react-native-webrtc

    ⚠️ This is the Daily fork of react-native-webrtc, meant only for use with react-native-daily-js, whose documentation you should refer to for usage information. If you're looking for the standard react-native-webrtc useful for a variety of projects, here it is.

    npm version npm downloads

    A WebRTC module for React Native.

    • Support iOS / macOS / 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

    • Currently used revision: M94
    • Supported architectures
      • Android: armeabi-v7a, arm64-v8a, x86, x86_64
      • iOS: arm64, x86_64 (for bitcode support, run this script)
      • macOS: x86_64

    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: {
          width: 640,
          height: 480,
          frameRate: 30,
          facingMode: (isFront ? "user" : "environment"),
          deviceId: 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.getDisplayMedia()
    • 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

    The react-native-webrtc organization provides a number of packages which are useful when developing Real Time Communications applications.

    The react-native-webrtc-web-shim project provides a shim for react-native-web support, allowing you to use (almost) the same code in react-native-web as in react-native.

    Acknowledgements

    Thanks to all contributors for helping with the project!

    Special thanks to Wan Huang Yang for creating the first version of this package.

    Install

    npm i @daily-co/react-native-webrtc

    DownloadsWeekly Downloads

    973

    Version

    1.94.1-daily.5

    License

    MIT

    Unpacked Size

    476 kB

    Total Files

    121

    Last publish

    Collaborators

    • karldaily
    • moishel
    • jamsea
    • paweldaily
    • paulv-daily
    • aconchillo
    • jasminedaly-daily
    • filipi.fuchter
    • patrick.rothweil.daily
    • daily_wyatt
    • landstrom
    • sunahsuh
    • rajneeshksoni
    • ruthless_daily
    • rory-sawyer
    • kwindla
    • kompfner_daily
    • christian-daily
    • steve-daily
    • vipyne-dailyco
    • cbrianhill
    • jessmitchell
    • chad-daily
    • jptaylor
    • ashley_at_daily