├── .gitignore ├── README.md ├── call.js ├── config.js.example ├── index.js ├── package.json ├── public ├── app.js ├── normalize.css └── style.css ├── routes.js └── views ├── call.ejs └── index.ejs /.gitignore: -------------------------------------------------------------------------------- 1 | config.js 2 | node_modules -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | WebRTC / PeerJS Audio Chat Demo 2 | ================= 3 | 4 | This is a barebones proof-of-concept WebRTC audio chat app built using [PeerJS](http://peerjs.com). It uses a simple Node backend that keeps track of peer IDs for each call. 5 | 6 | [Live demo](http://audiochat.noahburney.com/) 7 | 8 | ------------------------------- 9 | ## How it works 10 | This app uses the new [WebRTC APIs](http://www.html5rocks.com/en/tutorials/webrtc/basics/) to connect directly to other users' browsers. Here's how it all works. 11 | 12 | #### 1. Access your Microphone with getUserMedia() 13 | When you land on the call page, your browser will prompt you to allow the page to access your microphone. This is done by calling [`navigator.getUserMedia()`](https://developer.mozilla.org/en-US/docs/NavigatorUserMedia.getUserMedia). 14 | 15 | After allowing microphone access, you have access to a [`LocalMediaStream`](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_API#LocalMediaStream). There lots of other things you can do with this stream using the [Web Audio API](http://www.html5rocks.com/en/tutorials/webaudio/intro/), but we are't doing anything fancy here. 16 | 17 | Here's what we're doing: 18 | ```javascript 19 | // handle browser prefixes 20 | navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); 21 | 22 | // Get access to microphone 23 | navigator.getUserMedia ( 24 | // Only request audio 25 | {video: false, audio: true}, 26 | 27 | // Success callback 28 | function success(localAudioStream) { 29 | // Do something with audio stream 30 | }, 31 | // Failure callback 32 | function error(err) { 33 | // handle error 34 | } 35 | ); 36 | ``` 37 | 38 | #### 2. Connect to PeerJS 39 | [PeerJS](http://peerjs.com) takes care of the hairier parts of using WebRTC for us (STUN, TURN, signaling). To connect, you need to include the PeerJS javascript, then make a new instance of [`Peer`](http://peerjs.com/docs/#api): 40 | 41 | ```javascript 42 | var me = new Peer({key: API_KEY}); 43 | me.on('open', function() { 44 | console.log('My PeerJS ID is:', me.id); 45 | }); 46 | ``` 47 | 48 | The `open` event will fire once you're connected. 49 | 50 | For this demo, we're sending this ID to the server, where it's associated with this call ID. When someone else opens the call we then pass them everyone else's PeerJS IDs. 51 | 52 | #### 3. Call peers 53 | When other people open the call page, they'll have your PeerJS ID (and maybe other people's). These IDs are then used to connect to each other. 54 | 55 | Each `Peer` instance has a `.call()` method that takes a peer's ID, your `LocalMediaStream` as arguments and returns a PeerJS `MediaConnection` object. 56 | 57 | ```javascript 58 | var outgoing = me.call(peerId, myAudioStream); 59 | ``` 60 | 61 | This `MediaConnection` object will fire a `stream` event when the other person answers your call with their own audio stream. 62 | 63 | ```javascript 64 | outgoing.on('stream', function(stream) { 65 | // Do something with this audio stream 66 | }); 67 | ``` 68 | 69 | When receiving a `.call()`, your `Peer` instance will fire a `call` event, which gets passes an instance of a PeerJS `MediaConnection`. You then listen for the `stream` event on this object to get incoming audio stream: 70 | 71 | ```javascript 72 | me.on('call', function(incoming) { 73 | incoming.on('stream', function(stream) { 74 | // Do something with this audio stream 75 | }); 76 | }); 77 | ``` 78 | 79 | Once all this happens, both parties should have an audio stream from the other person. 80 | 81 | #### 4. Play audio 82 | There are two ways to play an audio stream: the Web Audio API, and the HTML5 `