A WebRTC module for React Native.
- Support iOS / Android.
- Support Video / Audio / Data Channels.
Everyone is welcome to you our Discourse community to discuss any React Native and WebRTC related topics.
| 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.1 | M57 (16123) (+7-16178) | x86_64 i386 armv7 arm64 | armeabi-v7a x86 | ✔️ | * 16805 * 16462 | |
| 1.58.3 | M58 commit (16937) (+21-18206) | x86_64 i386 armv7 arm64 | armeabi-v7a x86 | ✔️ | ✨ Promise Support ✨ | * 17065 * 17925 * 18140 * 18277 |
| 1.63.0 | M63 commit (20237) (+14-21432) | x86_64 i386 armv7 arm64 | armeabi-v7a x86 | ✔️ | * 20611 * 21519 | |
| 1.67.1 | M67 commit (22779) (+28-23167) | x86_64 i386 armv7 arm64 | armeabi-v7a x86 | ✔️ | ||
| master | M67 commit (22779) (+28-23167) | x86_64 i386 armv7 arm64 | armeabi-v7a x86 | test me plz |
Since 0.53, we use same branch version number like in webrtc native.
please see wiki page about revision history
${branch_name} stable (${branched_from_revision})(+${Cherry-Picks-Num}-${Last-Cherry-Picks-Revision})
- the webrtc revision in brackets is extracting frrom
Cr-Branched-Frominstead `Cr-Commit-Position - the number follows with
+is the additional amount of cherry-picks sinceBranched-Fromrevision.
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.
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.
varWebRTC=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.
varconfiguration={"iceServers": [{"url": "stun:stun.l.google.com:19302"}]};varpc=newRTCPeerConnection(configuration);letisFront=true;MediaStreamTrack.getSources(sourceInfos=>{console.log(sourceInfos);letvideoSourceId;for(leti=0;i<sourceInfos.length;i++){constsourceInfo=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 hereminHeight: 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, onaddstreamHowever, render video stream should be used by React way.
Rendering RTCView.
varcontainer;varRCTWebRTCDemo=React.createClass({getInitialState: function(){return{videoURL: null};},componentDidMount: function(){container=this;},render: function(){return(<View><RTCViewstreamURL={this.state.videoURL}/></View>);}});And set stream to RTCView
container.setState({videoURL: stream.toURL()});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.
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.
Use react-native-incall-manager to keep screen on, mute microphone, etc.
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.