Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
react-native-webrtc
Advanced tools
A WebRTC module for React Native.
NOTE for Expo users: this plugin doesn't work unless you eject.
Everyone is welcome to our Discourse community to discuss any React Native and WebRTC related topics.
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
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 |
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.
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.
The react-native-webrtc organization provides a number of packages which are useful when developing Real Time Communications applications.
Thanks to all contributors for helping with the project!
Special thanks to Wan Huang Yang for creating the first version of this package.
FAQs
WebRTC for React Native
The npm package react-native-webrtc receives a total of 9,794 weekly downloads. As such, react-native-webrtc popularity was classified as popular.
We found that react-native-webrtc demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.