@rphk/wide-webrtc
v2.0.0
Published
WebRTC for React Native
Downloads
7
Maintainers
Readme
-rphk-react-native-webrtc
Forked from react-native-webrtc
with minimal changes to use the ultra wide camera in ios instead of the standard wide. This change is hard coded, so it renders the standard wide unusable. Todo: do it properly.
This is based on version 1.100.1
which fits expo sdk 46.
A WebRTC module for React Native.
- Support iOS / macOS / Android.
- Support Video / Audio / Data Channels.
🚨 Expo: This package is not available in the Expo Go app. Learn how you can use this package in Custom Dev Clients via the out-of-tree Expo Config Plugin.
Community
Everyone is welcome to our Discourse community to discuss any React Native and WebRTC related topics.
WebRTC Revision
- Currently used revision: M100
- 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.