Update docs, events, add threads

src/index.html

@@ -45,8 +45,11 @@ <h1>PeerJS - WebRTC video chat</h1>
 <form class="msg">
 
 <button type="button" onclick="window.location.hash = parseInt(Math.random()*1e4,10).toString(16);">New thread</button>
+<button type="button" onclick="toggleMedia()">Toggle User Media</button>
+<button type="button" onclick="toggleMute()">Mute</button>
+<button type="button" onclick="togglePicture()">Picture</button>
 <div class="demo">
-	<video id="myvideo" onclick="addMedia(this)"></video>
+	<video id="myvideo" onclick="toggleMedia()"></video>
 </div>
 
 <input type="text" name="input" placeholder="message"/>
@@ -86,7 +89,7 @@ <h2>Demo Code</h2>
 peer.on('thread:connect', function(e){
 
 	// Insert a message of the connection
-	message( e.from, e.thread, "User connected to thread, a request for video has been made" );
+	message( "User connected to thread", e );
 
 });
 
@@ -102,21 +105,72 @@ <h2>Demo Code</h2>
 <p><b>connect video</b>. The function below addMedia(element) invokes gUM (getUserMedia) function and adds our local stream to peerjs.</p>
 
 <script class="pre">
-function addMedia(elm){
-	peer.addMedia(function(stream){
-		// Attach our stream to the video tab above.
-		var url = window.URL.createObjectURL(stream);
-		elm.src = url;
-		elm.autoplay = true;
-		elm.play();
-
-		// Attach the stream to the UI
-		var url = window.URL.createObjectURL(stream);
-		elm.onerror = function(event) {
-			stream.stop();
-		};
-
-	});	
+function toggleMedia(){
+
+	// Stop the stream
+	if(peer.localmedia){
+		peer.localmedia.stop();
+		return;
+	}
+
+	peer.addMedia(showLocalStream);	
+}
+</script>
+
+<p>Toggle Mute on the local stream</p>
+<script class="pre">
+var audioTrack;
+function toggleMute(){
+
+	var stream = peer.localmedia;
+
+	if(!stream){
+		// First you have to connect media
+		return;
+	}
+
+	var tracks = stream.getAudioTracks();
+	if(tracks.length){
+		audioTrack = tracks[0];
+		console.log("Removed track", audioTrack);
+		stream.removeTrack(audioTrack);
+	}
+	else{
+		console.log("Restored track", audioTrack);
+		stream.addTrack(audioTrack);
+	}
+
+	// Show the changed stream
+	showLocalStream(stream);
+}
+</script>
+
+<p>Toggle Picture on local media stream</p>
+
+<script class="pre">
+var videoTrack;
+function togglePicture(){
+
+	var stream = peer.localmedia;
+
+	if(!stream){
+		// First you have to connect media
+		return;
+	}
+
+	var tracks = stream.getVideoTracks();
+	if(tracks.length){
+		videoTrack = tracks[0];
+		console.log("Removed track", videoTrack);
+		stream.removeTrack(videoTrack);
+	}
+	else{
+		console.log("Restored track", videoTrack);
+		stream.addTrack(videoTrack);
+	}
+
+	// Show the changed stream
+	showLocalStream(stream);
 }
 </script>
 
@@ -133,8 +187,7 @@ <h2>Demo Code</h2>
 
 var threadId = null;
 
-window.addEventListener('hashchange', function(){
-
+function onhashchange(){
 	// Have we got a new room, 
 	// Is there an old thread
 	if( threadId && threadId !== window.location.hash ){
@@ -157,8 +210,14 @@ <h2>Demo Code</h2>
 	// At the same time it broadcasts a "join" event to others listening that this user has joined.
 	// Also the final parameter says what media this user is accepting
 	peer.thread( threadId, ['video', 'data'] );
+}
+
+window.addEventListener('hashchange', onhashchange);
+
+if(window.location.hash){
+	onhashchange();
+}
 
-});
 
 </script>
 
@@ -198,8 +257,8 @@ <h2>Demo Code</h2>
 
 
 // Friend connect
-// A frienda session has connected
-peer.on( 'friend:connect', function(e){
+// A frienda session is connected
+peer.on( 'socket:watch', function(e){
 
 	// Connected
 
@@ -212,7 +271,7 @@ <h2>Demo Code</h2>
 
 // Friend Disconnect
 // A friends session has disconnected
-peer.on( 'friend:disconnect', function(e){
+peer.on( 'socket:watch', function(e){
 
 	// Disconnected
 
@@ -307,6 +366,26 @@ <h2>Demo Code</h2>
 	}
 });
 
+//
+// Fired when the local media is disconnected
+peer.on( 'localmedia:disconnect', function(){
+	document.getElementById('myvideo').src = '';
+});
+
+
+//
+// DATACHANNEL
+//
+peer.on('channel:connect', function(e){
+	// A datachannel has been siccessfully created with user e.id
+
+});
+
+
+peer.on('channel:message', function(e){
+	// A message has been sent over the datachannel from user e.id
+	console.log(e);
+});
 
 
 // Listen to incoming messages
@@ -335,9 +414,32 @@ <h2>Demo Code</h2>
 
 	// QuerySelector
 	document.querySelector('div.demo').appendChild(vid);
+
+	vid.play();
+
 	return vid;
 }
 
+
+function showLocalStream(stream){
+
+	// Attach our stream to the video tab above.
+	var elm = document.getElementById('myvideo');
+	elm.src = window.URL.createObjectURL(stream);
+
+	// Ensure this is muted, we dont want to hear ourselves
+	elm.muted = true;
+
+	// Play content, not sure both are required, but hey
+	elm.autoplay = true;
+	elm.play();
+
+	// Attach the stream to the UI
+	elm.onerror = function(event) {
+		stream.stop();
+	};
+}
+
 </script>
 
 
@@ -402,4 +504,9 @@ <h2>Demo Code</h2>
 	ctx.fillText("start camera", 0, 16);
 	ctx.fillText("[click]", 30, 35);
 }
+
+var msg_box = document.querySelector('textarea');
+function message(msg, obj){
+	msg_box.innerHTML += msg + " (thread:"+(obj.thread||'')+",from:"+obj.from+")\n";
+}
 </script>

src/peer-server.js

@@ -85,27 +85,36 @@ module.exports = function(app){
 			to : socket.id
 		}));
 
+		socket.on('*', function(data){
+			console.log(arguments);
+		});
 
 		//
 		// Assign user to a 'thread'
 		// Listen for a 'join' event
 		// We can join multiple threads simultaneously
 		//
-		socket.on('thread:connect', function(thread){
+		socket.on('thread:connect', function(data){
 
-			threads.push(thread);
+			var thread = data.thread;
 
-			socket.join(thread);
+			// Join Group
+			if(threads.indexOf( thread ) === -1){
+				threads.push(data.thread);
+				socket.join(data.thread);
+			}
 
-			// Broadcast to yourself that you have joined a room
-			socket.send(JSON.stringify({
-				type : 'thread:connect',
-				from : socket.id,
-				to : socket.id
-			}));
+			// Add from address
+			data.type = "thread:connect";
+			data.from = socket.id;
 
-			// Join Group
-			console.log("join: "+thread);
+			if(!data.to){
+				// Broadcast your thread:connect event to everyone
+				socket.broadcast.to(data.thread).send(JSON.stringify(data));
+			}
+			else{
+				send(data.to, data);
+			}
 		});
 
 		// Leave