react-native-webrtc
A WebRTC module for React Native.
BREAKING FOR RN 40:
master
branch needs RN >= 40 for now.
if your RN version is under 40, use branch rn-less-40 (npm version 0.54.7
)
see #190 for detials
Support
- Currently support for iOS and Android.
- Support video and audio communication.
- Supports data channels.
- You can use it to build an iOS/Android app that can communicate with web browser.
WebRTC Revision
Since 0.53
, we use same branch version number like in webrtc native.
please see wiki page about revision history
format:
${branch_name} stable (${branched_from_revision})(+${Cherry-Picks-Num}-${Last-Cherry-Picks-Revision})
- the webrtc revision in brackets is extracting frrom
Cr-Branched-From
insteadCr-Commit-Position
- the number follows with
+
is the additional amount of cherry-picks sinceBranched-From
revision.
note:
the order of commit revision is nothing to do with the order of cherry-picks, for example, the earlier committed cherry-pick-#2
may have higher revision than cherry-pick-#3
and vice versa.
react-native-webrtc | WebRTC Version | arch(ios) | arch(android) | npm published | note | additional picks |
---|---|---|---|---|---|---|
0.54.7 | M54 (13869) (+6-14091) |
x86_64 i386 armv7 arm64 |
armeabi-v7a x86 |
✔️ | RN < 40 | |
1.57.0 | M57 (16123) (+7-16178) |
x86_64 i386 armv7 arm64 |
armeabi-v7a x86 |
✔️ | RN >= 40 | * Android HW decoder: Support odd heights for non-texture output * Remove use of selectors matching Apple private API names |
master | M57 (16123) (+7-16178) |
x86_64 i386 armv7 arm64 |
armeabi-v7a x86 |
RN >= 40 | * Android HW decoder: Support odd heights for non-texture output * Remove use of selectors matching Apple private API names |
Installation
react-native-webrtc:
note: 0.10.0~0.12.0 required git-lfs
, see: git-lfs-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.
var WebRTC = require('react-native-webrtc');
var {
RTCPeerConnection,
RTCIceCandidate,
RTCSessionDescription,
RTCView,
MediaStream,
MediaStreamTrack,
getUserMedia,
} = WebRTC;
Anything about using RTCPeerConnection, RTCSessionDescription and RTCIceCandidate is like browser.
Support most WebRTC APIs, please see the Document.
var configuration = {"iceServers": [{"url": "stun:stun.l.google.com:19302"}]};
var pc = new RTCPeerConnection(configuration);
let isFront = true;
MediaStreamTrack.getSources(sourceInfos => {
console.log(sourceInfos);
let videoSourceId;
for (const i = 0; i < sourceInfos.length; i++) {
const sourceInfo = sourceInfos[i];
if(sourceInfo.kind == "video" && sourceInfo.facing == (isFront ? "front" : "back")) {
videoSourceId = sourceInfo.id;
}
}
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}] : [])
}
}, function (stream) {
console.log('dddd', stream);
callback(stream);
}, logError);
});
pc.createOffer(function(desc) {
pc.setLocalDescription(desc, function () {
// Send pc.localDescription to peer
}, function(e) {});
}, function(e) {});
pc.onicecandidate = function (event) {
// send event.candidate to peer
};
// also support setRemoteDescription, createAnswer, addIceCandidate, onnegotiationneeded, oniceconnectionstatechange, onsignalingstatechange, onaddstream
However, render video stream should be used by React way.
Rendering RTCView.
var container;
var RCTWebRTCDemo = React.createClass({
getInitialState: function() {
return {videoURL: null};
},
componentDidMount: function() {
container = this;
},
render: function() {
return (
<View>
<RTCView streamURL={this.state.videoURL}/>
</View>
);
}
});
And set stream to RTCView
container.setState({videoURL: stream.toURL()});
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.
Demos
Official Demo
author: @oney
The demo project is https://github.com/oney/RCTWebRTCDemo
And you will need a signaling server. I have written a signaling server https://react-native-webrtc.herokuapp.com/ (the repository is https://github.com/oney/react-native-webrtc-server).
You can open this website in browser, and then set it as signaling server in the app, and run the app. After you enter the same room ID, the video stream will be connected.
Demo by Folks
author: @thoqbk
- Signaling server and web app: https://rewebrtc.herokuapp.com/ (the repository is https://github.com/thoqbk/rewebrtc-server)
- React native app repository: https://github.com/thoqbk/rewebrtc
Native control
Use react-native-incall-manager to keep screen on, mute microphone, etc.
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.