├── .gitignore ├── README.md ├── build.sh ├── decoupling.diff ├── imports.js ├── package.json └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | peerjs/ 2 | dist/ 3 | node_modules/ 4 | .idea 5 | 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Native PeerJS 2 | 3 | [react-native-webrtc](https://github.com/react-native-webrtc/react-native-webrtc) has brought WebRTC to React Native. [PeerJS](https://github.com/peers/peerjs) is a simple API to work with WebRTC in the Browser. 4 | 5 | I made it so that PeerJS works with react-native-webrtc in a React Native application. 6 | 7 | ## Install 8 | 9 | Install react-native-webrtc according to their install guide. Then add react-native-peerjs: 10 | 11 | ``` 12 | yarn add react-native-peerjs 13 | ``` 14 | 15 | ## Usage 16 | 17 | Just refer to the PeerJS documentation. Here is an example: 18 | 19 | ```js 20 | import Peer from 'react-native-peerjs'; 21 | 22 | const localPeer = new Peer(); 23 | localPeer.on('error', console.log); 24 | 25 | localPeer.on('open', localPeerId => { 26 | console.log('Local peer open with ID', localPeerId); 27 | 28 | const remotePeer = new Peer(); 29 | remotePeer.on('error', console.log); 30 | remotePeer.on('open', remotePeerId => { 31 | console.log('Remote peer open with ID', remotePeerId); 32 | 33 | const conn = remotePeer.connect(localPeerId); 34 | conn.on('error', console.log); 35 | conn.on('open', () => { 36 | console.log('Remote peer has opened connection.'); 37 | console.log('conn', conn); 38 | conn.on('data', data => console.log('Received from local peer', data)); 39 | console.log('Remote peer sending data.'); 40 | conn.send('Hello, this is the REMOTE peer!'); 41 | }); 42 | }); 43 | }); 44 | 45 | localPeer.on('connection', conn => { 46 | console.log('Local peer has received connection.'); 47 | conn.on('error', console.log); 48 | conn.on('open', () => { 49 | console.log('Local peer has opened connection.'); 50 | console.log('conn', conn); 51 | conn.on('data', data => console.log('Received from remote peer', data)); 52 | console.log('Local peer sending data.'); 53 | conn.send('Hello, this is the LOCAL peer!'); 54 | }); 55 | }); 56 | ``` 57 | 58 | -------------------------------------------------------------------------------- /build.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | exec 2>&1 4 | 5 | rm -rf dist/ peerjs/ 6 | git clone https://github.com/peers/peerjs peerjs 7 | cd peerjs 8 | git apply ../decoupling.diff 9 | ../node_modules/.bin/parcel build --no-source-maps lib/exports.ts -d ../dist --out-file peerjs.min.js 10 | cd ../ 11 | cat imports.js dist/peerjs.min.js > dist/react-native-peerjs.js 12 | rm dist/peerjs.min.js 13 | 14 | echo "Done. dist/react-native-peerjs.js" 15 | 16 | -------------------------------------------------------------------------------- /decoupling.diff: -------------------------------------------------------------------------------- 1 | diff --git a/lib/dataconnection.ts b/lib/dataconnection.ts 2 | index aec3c05..f0ca925 100644 3 | --- a/lib/dataconnection.ts 4 | +++ b/lib/dataconnection.ts 5 | @@ -58,7 +58,7 @@ export class DataConnection extends BaseConnection implements IDataConnection { 6 | this.options.connectionId || DataConnection.ID_PREFIX + util.randomToken(); 7 | 8 | this.label = this.options.label || this.connectionId; 9 | - this.serialization = this.options.serialization || SerializationType.Binary; 10 | + this.serialization = this.options.serialization || SerializationType.JSON; 11 | this.reliable = !!this.options.reliable; 12 | 13 | this._encodingQueue.on('done', (ab: ArrayBuffer) => { 14 | diff --git a/lib/exports.ts b/lib/exports.ts 15 | index 5772d02..63a57e3 100644 16 | --- a/lib/exports.ts 17 | +++ b/lib/exports.ts 18 | @@ -7,7 +7,3 @@ export const peerjs = { 19 | }; 20 | 21 | export default Peer; 22 | - 23 | -(window).peerjs = peerjs; 24 | -/** @deprecated Should use peerjs namespace */ 25 | -(window).Peer = Peer; 26 | diff --git a/lib/negotiator.ts b/lib/negotiator.ts 27 | index e2b3df9..c48efa3 100644 28 | --- a/lib/negotiator.ts 29 | +++ b/lib/negotiator.ts 30 | @@ -142,10 +142,11 @@ export class Negotiator { 31 | // MEDIACONNECTION. 32 | logger.log("Listening for remote stream"); 33 | 34 | - peerConnection.ontrack = (evt) => { 35 | - logger.log("Received remote stream"); 36 | + // react-native-webrtc implements the old API. 37 | + peerConnection.onaddstream = (evt) => { 38 | + logger.log("Received remote stream", evt); 39 | 40 | - const stream = evt.streams[0]; 41 | + const stream = evt.stream; 42 | const connection = provider.getConnection(peerId, connectionId); 43 | 44 | if (connection.type === ConnectionType.Media) { 45 | @@ -168,7 +169,7 @@ export class Negotiator { 46 | this.connection.peerConnection = null; 47 | 48 | //unsubscribe from all PeerConnection's events 49 | - peerConnection.onicecandidate = peerConnection.oniceconnectionstatechange = peerConnection.ondatachannel = peerConnection.ontrack = () => { }; 50 | + peerConnection.onicecandidate = peerConnection.oniceconnectionstatechange = peerConnection.ondatachannel = peerConnection.onaddstream = () => { }; 51 | 52 | const peerConnectionNotClosed = peerConnection.signalingState !== "closed"; 53 | let dataChannelNotClosed = false; 54 | @@ -340,15 +341,14 @@ export class Negotiator { 55 | ): void { 56 | logger.log(`add tracks from stream ${stream.id} to peer connection`); 57 | 58 | - if (!peerConnection.addTrack) { 59 | + // react-native-webrtc implements the old API. 60 | + if (!peerConnection.addStream) { 61 | return logger.error( 62 | - `Your browser does't support RTCPeerConnection#addTrack. Ignored.` 63 | + `Your browser does't support RTCPeerConnection#addStream. Ignored.` 64 | ); 65 | } 66 | 67 | - stream.getTracks().forEach(track => { 68 | - peerConnection.addTrack(track, stream); 69 | - }); 70 | + peerConnection.addStream(stream); 71 | } 72 | 73 | private _addStreamToMediaConnection( 74 | diff --git a/lib/peer.ts b/lib/peer.ts 75 | index 8f11659..1af0753 100644 76 | --- a/lib/peer.ts 77 | +++ b/lib/peer.ts 78 | @@ -111,11 +111,6 @@ export class Peer extends EventEmitter { 79 | }; 80 | this._options = options; 81 | 82 | - // Detect relative URL host. 83 | - if (this._options.host === "/") { 84 | - this._options.host = window.location.hostname; 85 | - } 86 | - 87 | // Set path correctly. 88 | if (this._options.path) { 89 | if (this._options.path[0] !== "/") { 90 | diff --git a/lib/supports.ts b/lib/supports.ts 91 | index 1801188..db1dc70 100644 92 | --- a/lib/supports.ts 93 | +++ b/lib/supports.ts 94 | @@ -1,5 +1,3 @@ 95 | -import { webRTCAdapter } from './adapter'; 96 | - 97 | export const Supports = new class { 98 | readonly isIOS = ['iPad', 'iPhone', 'iPod'].includes(navigator.platform); 99 | readonly supportedBrowsers = ['firefox', 'chrome', 'safari']; 100 | @@ -28,36 +26,15 @@ export const Supports = new class { 101 | } 102 | 103 | getBrowser(): string { 104 | - return webRTCAdapter.browserDetails.browser; 105 | + return 'chrome'; 106 | } 107 | 108 | getVersion(): number { 109 | - return webRTCAdapter.browserDetails.version || 0; 110 | + return this.minChromeVersion; 111 | } 112 | 113 | isUnifiedPlanSupported(): boolean { 114 | - const browser = this.getBrowser(); 115 | - const version = webRTCAdapter.browserDetails.version || 0; 116 | - 117 | - if (browser === 'chrome' && version < 72) return false; 118 | - if (browser === 'firefox' && version >= 59) return true; 119 | - if (!window.RTCRtpTransceiver || !('currentDirection' in RTCRtpTransceiver.prototype)) return false; 120 | - 121 | - let tempPc: RTCPeerConnection; 122 | - let supported = false; 123 | - 124 | - try { 125 | - tempPc = new RTCPeerConnection(); 126 | - tempPc.addTransceiver('audio'); 127 | - supported = true; 128 | - } catch (e) { } 129 | - finally { 130 | - if (tempPc) { 131 | - tempPc.close(); 132 | - } 133 | - } 134 | - 135 | - return supported; 136 | + return false; 137 | } 138 | 139 | toString(): string { 140 | -------------------------------------------------------------------------------- /imports.js: -------------------------------------------------------------------------------- 1 | import { 2 | RTCPeerConnection, 3 | RTCIceCandidate, 4 | RTCSessionDescription, 5 | } from 'react-native-webrtc'; 6 | 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-peerjs", 3 | "version": "1.0.4", 4 | "description": "react-native-webrtc + peerjs", 5 | "keywords": [ 6 | "webrtc", 7 | "react native", 8 | "peerjs" 9 | ], 10 | "repository": "https://github.com/Zemke/react-native-peerjs", 11 | "author": "Zemke ", 12 | "license": "MIT", 13 | "scripts": { 14 | "build": "./build.sh", 15 | "prepare": "./build.sh" 16 | }, 17 | "main": "dist/react-native-peerjs.js", 18 | "devDependencies": { 19 | "parcel": "^1.12.3", 20 | "peerjs": "1.1.0" 21 | } 22 | } 23 | --------------------------------------------------------------------------------