Skip to content

Commit 858bc46

Browse files
tomcartwrightuktomcartwrightuk
authored
Merge pull request socketio#32 from sprusr/master
Add media streaming example
2 parents e2215ca + 9536aa8 commit 858bc46

File tree

5 files changed

+95
-2
lines changed

5 files changed

+95
-2
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ p2p.on('ready', function(){
2020
p2p.emit('peer-obj', { peerId: peerId });
2121
})
2222

23-
// this event will be triggered over the socket transport
23+
// this event will be triggered over the socket transport
2424
// until `usePeerConnection` is set to `true`
2525
p2p.on('peer-msg', function(data){
2626
console.log(data);
@@ -66,7 +66,7 @@ The `opts` object can include options for setup of the overall socket.io-p2p con
6666

6767
- `numClients` - max number of peers each client can connect to; `5` by default.
6868
- `autoUpgrade` - upgrade to a p2p connection (from s.io one) when peers are ready; `true` by default
69-
- `peerOpts` - object of options to be passed to underlying peers. See [here](https://github.com/feross/simple-peer/blob/master/README.md#api) for currently supported options.
69+
- `peerOpts` - object of options to be passed to underlying peers. See [here](https://github.com/feross/simple-peer/blob/master/README.md#api) for currently supported options. See [here](examples/streaming) for an example.
7070

7171
`cb` is an optional callback. Called when connection is upgraded to a WebRTC connection.
7272

‎examples/streaming/README.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# socket.io-p2p streaming example
2+
3+
## Install dependencies
4+
If you haven't done so already, go to the root of the repository and `npm install` the dependencies.
5+
6+
## Run
7+
To start, `cd` to this directory (`examples/streaming`) and run the following:
8+
9+
```
10+
browserify src/index.js -o bundle.js
11+
node server.js
12+
```
13+
14+
(You will need `browserify` for this. If it isn't installed get it with `npm install --global browserfiy`)
15+
16+
## Further examples
17+
See [feross/simple-peer](https://github.com/feross/simple-peer#videovoice) for additional examples on how to stream media.

‎examples/streaming/index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Socket.io-p2p Streaming Example</title>
8+
</head>
9+
<body>
10+
<h1>Socket.io-p2p Streaming Example</h1>
11+
<button id="start-stream">Start streaming</button>
12+
<audio controls></audio>
13+
<script src="/bundle.js"></script>
14+
</body>
15+
</html>

‎examples/streaming/server.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
var ecstatic = require('ecstatic')
2+
var server = require('http').createServer(
3+
ecstatic({ root: __dirname, handleError: false })
4+
)
5+
var p2pserver = require('socket.io-p2p-server').Server
6+
var io = require('socket.io')(server)
7+
8+
server.listen(3030, function () {
9+
console.log('Listening on 3030')
10+
})
11+
12+
io.use(p2pserver)
13+
14+
io.on('connection', function (socket) {
15+
socket.on('start-stream', function (data) {
16+
console.log('Stream started')
17+
socket.broadcast.emit('start-stream', data)
18+
})
19+
})

‎examples/streaming/src/index.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
var P2P = require('../../../index')
2+
var io = require('socket.io-client')
3+
4+
window.AudioContext = window.AudioContext || window.webkitAudioContext
5+
6+
var socket = io()
7+
var p2p = new P2P(socket)
8+
var startButton = document.getElementById('start-stream')
9+
10+
p2p.on('start-stream', function () {
11+
p2p.usePeerConnection = true
12+
startButton.setAttribute('disabled', true)
13+
})
14+
15+
p2p.on('stream', function (stream) {
16+
var audio = document.querySelector('audio')
17+
audio.src = window.URL.createObjectURL(stream)
18+
audio.play()
19+
})
20+
21+
function startStream () {
22+
startButton.setAttribute('disabled', true)
23+
navigator.getUserMedia({ audio: true }, function (stream) {
24+
var audioContext = new window.AudioContext()
25+
var mediaStreamSource = audioContext.createMediaStreamSource(stream)
26+
var mediaStreamDestination = audioContext.createMediaStreamDestination()
27+
mediaStreamSource.connect(mediaStreamDestination)
28+
29+
var socket = io()
30+
var p2p = new P2P(socket, {peerOpts: {stream: mediaStreamDestination.stream}})
31+
32+
p2p.on('ready', function () {
33+
p2p.usePeerConnection = true
34+
})
35+
36+
p2p.emit('ready', { peerId: p2p.peerId })
37+
}, function (err) {
38+
console.log(err)
39+
})
40+
}
41+
42+
startButton.addEventListener('click', startStream)

0 commit comments

Comments
 (0)