README.md 5.88 KB
Newer Older
Howard Yang's avatar
Howard Yang committed
1 2
# react-native-webrtc

zxcpoiu's avatar
zxcpoiu committed
3 4 5
[![npm version](https://badge.fury.io/js/react-native-webrtc.svg)](https://badge.fury.io/js/react-native-webrtc)
[![npm downloads](https://img.shields.io/npm/dm/react-native-webrtc.svg?maxAge=2592000)](https://img.shields.io/npm/dm/react-native-webrtc.svg?maxAge=2592000)

Howard Yang's avatar
Howard Yang committed
6
A WebRTC module for React Native.
7
- Support iOS / macOS / Android.
8
- Support Video / Audio / Data Channels.
Howard Yang's avatar
Howard Yang committed
9

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

Volkan Yıldız's avatar
Volkan Yıldız committed
12
## Community
13

Denis Andrejew's avatar
Denis Andrejew committed
14
Everyone is welcome to our [Discourse community](https://react-native-webrtc.discourse.group/) to discuss any React Native and WebRTC related topics.
15

16 17
## WebRTC Revision

18
* Currently used revision: [M87](https://github.com/jitsi/webrtc/commit/9a88667ef7b46c175851506453c6cc6b642292cc)
Saúl Ibarra Corretgé's avatar
Saúl Ibarra Corretgé committed
19 20
* Supported architectures
  * Android: armeabi-v7a, arm64-v8a, x86, x86_64
21
  * iOS: arm64, x86_64 (for bitcode support, run [this script](https://github.com/react-native-webrtc/react-native-webrtc/blob/master/tools/downloadBitcode.sh))
22
  * macOS: x86_64
Saúl Ibarra Corretgé's avatar
Saúl Ibarra Corretgé committed
23

zxcpoiu's avatar
zxcpoiu committed
24
## Installation
25

26 27
- [iOS](https://github.com/react-native-webrtc/react-native-webrtc/blob/master/Documentation/iOSInstallation.md)
- [Android](https://github.com/react-native-webrtc/react-native-webrtc/blob/master/Documentation/AndroidInstallation.md)
Howard Yang's avatar
Howard Yang committed
28 29

## Usage
Howard Yang's avatar
Howard Yang committed
30
Now, you can use WebRTC like in browser.
Howard Yang's avatar
Howard Yang committed
31
In your `index.ios.js`/`index.android.js`, you can require WebRTC to import RTCPeerConnection, RTCSessionDescription, etc.
Saúl Ibarra Corretgé's avatar
Saúl Ibarra Corretgé committed
32

Howard Yang's avatar
Howard Yang committed
33
```javascript
Saúl Ibarra Corretgé's avatar
Saúl Ibarra Corretgé committed
34
import {
Howard Yang's avatar
Howard Yang committed
35 36 37
  RTCPeerConnection,
  RTCIceCandidate,
  RTCSessionDescription,
Howard Yang's avatar
Howard Yang committed
38
  RTCView,
Petr Bela's avatar
Petr Bela committed
39
  MediaStream,
Howard Yang's avatar
Howard Yang committed
40
  MediaStreamTrack,
41 42
  mediaDevices,
  registerGlobals
Saúl Ibarra Corretgé's avatar
Saúl Ibarra Corretgé committed
43
} from 'react-native-webrtc';
Howard Yang's avatar
Howard Yang committed
44
```
Saúl Ibarra Corretgé's avatar
Saúl Ibarra Corretgé committed
45
Anything about using RTCPeerConnection, RTCSessionDescription and RTCIceCandidate is like browser.
46
Support most WebRTC APIs, please see the [Document](https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection).
Saúl Ibarra Corretgé's avatar
Saúl Ibarra Corretgé committed
47

Howard Yang's avatar
Howard Yang committed
48
```javascript
Saúl Ibarra Corretgé's avatar
Saúl Ibarra Corretgé committed
49 50
const configuration = {"iceServers": [{"url": "stun:stun.l.google.com:19302"}]};
const pc = new RTCPeerConnection(configuration);
zxcpoiu's avatar
zxcpoiu committed
51 52

let isFront = true;
Saúl Ibarra Corretgé's avatar
Saúl Ibarra Corretgé committed
53
mediaDevices.enumerateDevices().then(sourceInfos => {
zxcpoiu's avatar
zxcpoiu committed
54 55
  console.log(sourceInfos);
  let videoSourceId;
56
  for (let i = 0; i < sourceInfos.length; i++) {
zxcpoiu's avatar
zxcpoiu committed
57
    const sourceInfo = sourceInfos[i];
Oza's avatar
Oza committed
58
    if(sourceInfo.kind == "videoinput" && sourceInfo.facing == (isFront ? "front" : "environment")) {
59
      videoSourceId = sourceInfo.deviceId;
Howard Yang's avatar
Howard Yang committed
60 61
    }
  }
Saúl Ibarra Corretgé's avatar
Saúl Ibarra Corretgé committed
62
  mediaDevices.getUserMedia({
zxcpoiu's avatar
zxcpoiu committed
63 64
    audio: true,
    video: {
65 66
      width: 640,
      height: 480,
Mohit's avatar
Mohit committed
67
      frameRate: 30,
zxcpoiu's avatar
zxcpoiu committed
68
      facingMode: (isFront ? "user" : "environment"),
69
      deviceId: videoSourceId
Howard Yang's avatar
Howard Yang committed
70
    }
Saúl Ibarra Corretgé's avatar
Saúl Ibarra Corretgé committed
71 72 73 74 75 76 77
  })
  .then(stream => {
    // Got stream!
  })
  .catch(error => {
    // Log error
  });
Howard Yang's avatar
Howard Yang committed
78
});
Howard Yang's avatar
Howard Yang committed
79

Saúl Ibarra Corretgé's avatar
Saúl Ibarra Corretgé committed
80
pc.createOffer().then(desc => {
Raees's avatar
Raees committed
81
  pc.setLocalDescription(desc).then(() => {
Howard Yang's avatar
Howard Yang committed
82
    // Send pc.localDescription to peer
Saúl Ibarra Corretgé's avatar
Saúl Ibarra Corretgé committed
83 84
  });
});
zxcpoiu's avatar
zxcpoiu committed
85

Howard Yang's avatar
Howard Yang committed
86 87 88
pc.onicecandidate = function (event) {
  // send event.candidate to peer
};
zxcpoiu's avatar
zxcpoiu committed
89

Howard Yang's avatar
Howard Yang committed
90 91 92
// also support setRemoteDescription, createAnswer, addIceCandidate, onnegotiationneeded, oniceconnectionstatechange, onsignalingstatechange, onaddstream

```
93 94 95

### RTCView

Howard Yang's avatar
Howard Yang committed
96
However, render video stream should be used by React way.
Howard Yang's avatar
Howard Yang committed
97 98

Rendering RTCView.
Saúl Ibarra Corretgé's avatar
Saúl Ibarra Corretgé committed
99

Howard Yang's avatar
Howard Yang committed
100
```javascript
Saúl Ibarra Corretgé's avatar
Saúl Ibarra Corretgé committed
101
<RTCView streamURL={this.state.stream.toURL()}/>
Howard Yang's avatar
Howard Yang committed
102
```
103

104 105 106 107 108 109 110 111
| 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                                                                                              |


112 113
### Custom APIs

114 115 116 117 118 119 120 121 122 123 124 125 126 127 128
#### 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.


Cristian Conedera's avatar
Cristian Conedera committed
129
#### MediaStreamTrack.prototype._switchCamera()
130 131 132 133

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.

Saúl Ibarra Corretgé's avatar
Saúl Ibarra Corretgé committed
134 135 136 137 138 139
#### 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.

140 141
## Related projects

Saúl Ibarra Corretgé's avatar
Saúl Ibarra Corretgé committed
142
The [react-native-webrtc](https://github.com/react-native-webrtc) organization provides a number of packages which are useful when developing Real Time Communications applications.
143

Saúl Ibarra Corretgé's avatar
Saúl Ibarra Corretgé committed
144
## Acknowledgements
Howard Yang's avatar
Howard Yang committed
145

Saúl Ibarra Corretgé's avatar
Saúl Ibarra Corretgé committed
146
Thanks to all [contributors](https://github.com/react-native-webrtc/react-native-webrtc/graphs/contributors) for helping with the project!
147

Saúl Ibarra Corretgé's avatar
Saúl Ibarra Corretgé committed
148
Special thanks to [Wan Huang Yang](https://github.com/oney/) for creating the first version of this package.