├── README.md ├── app.js ├── firebase-init.js ├── github.png ├── index.html └── vendor ├── firebase.js └── simplePeer.js /README.md: -------------------------------------------------------------------------------- 1 | # Tutorials 2 | 3 | ## Tutorials used: 4 | 5 | - WebRTC without setting up server: https://www.grafikart.fr/tutoriels/javascript/webrtc-864 6 | - WebRTC without any external libraries: https://websitebeaver.com/insanely-simple-webrtc-video-chat-using-firebase-with-codepen-demo 7 | - WebRTC with Firebase https://dev.to/rynobax_7/creating-a-multiplayer-game-with-webrtc 8 | 9 | ## Other tutorials found 10 | 11 | - WebRTC with Pusher and Node: https://pusher.com/tutorials/webrtc-video-call-app-nodejs 12 | 13 | ### Definition of STUN/SERVER 14 | 15 | > A STUN/TURN server is used for NAT traversal in VoIP. Whether you're at home behind a common router, at work behind an enterprise firewall, or traveling, chances are that you will be behind a NAT which must be traversed before making calls. [source: [Viagénie](http://numb.viagenie.ca)] 16 | 17 | > If a STUN server doesn’t work, then WebRTC will try the next server, which is why you should add several. But using more than two STUN/TURN servers slows down discovery. STUN servers are cheaper than TURN servers, which is why Google and Firefox allow anyone to access their STUN servers for free. TURN servers are harder to find for free, but they do exist. [sources: [websitebeaver](https://websitebeaver.com/insanely-simple-webrtc-video-chat-using-firebase-with-codepen-demo), [Bugzilla](https://bugzilla.mozilla.org/show_bug.cgi?id=1322659)] 18 | 19 | ### Servers used in this app 20 | 21 | [simple-peer](https://github.com/feross/simple-peer) provides by default two STUN server: 22 | 23 | ```js 24 | config: { 25 | iceServers: [ 26 | { urls: 'stun:stun.l.google.com:19302' }, 27 | { urls: 'stun:global.stun.twilio.com:3478?transport=udp' }, 28 | ] 29 | } 30 | ``` 31 | 32 | Mozilla provides another free STUN server : `{urls: 'stun:stun.services.mozilla.com'}` 33 | 34 | [Viagénie](http://numb.viagenie.ca) provides a free TURN server: 35 | 36 | ```js 37 | {urls: 'turn:numb.viagenie.ca','credential': '****','username': '****'} 38 | ``` 39 | 40 | So my final config is as follows: 41 | 42 | ```js 43 | config: { 44 | iceServers: [ 45 | { urls: 'stun:stun.l.google.com:19302' }, 46 | { urls: 'stun:global.stun.twilio.com:3478?transport=udp' }, 47 | { urls: 'stun:stun.services.mozilla.com' }, 48 | { urls: 'turn:numb.viagenie.ca', credential: '****', username: '****' }, 49 | ] 50 | } 51 | ``` 52 | 53 | Paid service provided by [Twilio](https://www.twilio.com/stun-turn): 54 | 55 | - [Pricing](https://www.twilio.com/stun-turn/pricing) 56 | - [FAQ](https://www.twilio.com/docs/stun-turn/faq) 57 | 58 | ### WebRTC in real world apps: 59 | 60 | - Google Allo 61 | - Goole Duo 62 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | const showMyFaceButton = document.querySelector('#start') 2 | const showFriendsFaceButton = document.querySelector('#receiver') 3 | const showMyFaceVideo = document.querySelector('#emitter-video') 4 | const showFriendsFaceVideo = document.querySelector('#receiver-video') 5 | 6 | const offerTextarea = document.querySelector('#offer') 7 | 8 | const yourId = Math.floor(Math.random() * 1000000000) 9 | 10 | let p = null 11 | 12 | import { database } from './firebase-init.js' 13 | 14 | function readMessage(data) { 15 | const msg = JSON.parse(data.val().message) 16 | const sender = data.val().sender 17 | 18 | if (sender != yourId) { 19 | console.log(msg) 20 | if (p === null) { 21 | p = new SimplePeer({ 22 | initiator: false, 23 | config: { 24 | iceServers: [ 25 | { urls: 'stun:stun.l.google.com:19302' }, 26 | { urls: 'stun:global.stun.twilio.com:3478?transport=udp' }, 27 | { urls: 'stun:stun.services.mozilla.com' }, 28 | { 29 | urls: 'turn:numb.viagenie.ca', 30 | credential: '****', 31 | username: '****', 32 | }, 33 | ], 34 | }, 35 | }) 36 | bindEvents(p) 37 | } 38 | p.signal(msg) 39 | } 40 | } 41 | 42 | function bindEvents(p) { 43 | p.on('error', err => { 44 | console.log(err) 45 | }) 46 | 47 | p.on('signal', data => { 48 | const msg = database.push({ 49 | sender: yourId, 50 | message: JSON.stringify(data), 51 | }) 52 | 53 | msg.remove() 54 | }) 55 | 56 | p.on('stream', stream => { 57 | console.log('streaming') 58 | console.log(stream) 59 | showFriendsFaceVideo.srcObject = stream 60 | }) 61 | } 62 | 63 | database.on('child_added', readMessage) 64 | 65 | showMyFaceButton.addEventListener('click', async e => { 66 | try { 67 | const stream = await navigator.mediaDevices.getUserMedia({ 68 | video: true, 69 | audio: true, 70 | }) 71 | 72 | p = new SimplePeer({ 73 | initiator: true, 74 | stream, 75 | config: { 76 | iceServers: [ 77 | { urls: 'stun:stun.l.google.com:19302' }, 78 | { urls: 'stun:global.stun.twilio.com:3478?transport=udp' }, 79 | { urls: 'stun:stun.services.mozilla.com' }, 80 | { 81 | urls: 'turn:numb.viagenie.ca', 82 | credential: 'hiragana', 83 | username: 'mornirmornir@hotmail.com', 84 | }, 85 | ], 86 | }, 87 | }) 88 | 89 | bindEvents(p) 90 | showMyFaceVideo.srcObject = stream 91 | } catch (e) { 92 | console.log(e.message) 93 | } 94 | }) 95 | -------------------------------------------------------------------------------- /firebase-init.js: -------------------------------------------------------------------------------- 1 | const config = { 2 | apiKey: 'AIzaSyDMZZs3Kiic0XEFAxKoZYnR6bbRZwCmGPE', 3 | authDomain: 'web-rtc-3f476.firebaseapp.com', 4 | databaseURL: 'https://web-rtc-3f476.firebaseio.com', 5 | projectId: 'web-rtc-3f476', 6 | storageBucket: 'web-rtc-3f476.appspot.com', 7 | messagingSenderId: '705697983314', 8 | } 9 | firebase.initializeApp(config) 10 | 11 | const database = firebase.database().ref() 12 | 13 | export { database } 14 | -------------------------------------------------------------------------------- /github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mornir/webrtc-firebase/595107ed7af1cb18e5efd8a375bdd07d90910dcf/github.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 8 |27 | 28 |
29 |