diff --git a/.gitignore b/.gitignore index 7dccd97..50077fb 100644 --- a/.gitignore +++ b/.gitignore @@ -6,6 +6,7 @@ lib-cov *.out *.pid *.gz +*.swp pids logs diff --git a/README.md b/README.md index 9692824..bb56ce3 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,7 @@ #webrtc.io-demo ============== -webrtc.io modified to supply the client files - -You can have a look at the demo on http://multiwebrtc.nodejitsu.com +You can have a look at the [demo](http://webrtc.dennis.is/) ##Instructions on how to setup the demo: @@ -22,7 +20,7 @@ npm install ``` ```bash -cd example +cd site ``` ```bash @@ -31,18 +29,18 @@ node server.js In a version of Chrome that have webRTC support. -go to [localhost:8000/#1](http://localhost:8000/#1) +go to [localhost:8080](http://localhost:8080) click allow to see your camera -go to [localhost:8000/#1](http://localhost:8000/#1) +go to [localhost:8080](http://localhost:8080) click allow to see your camera and the connection will be made between your to open windows. -##For instructions on how to start with webRTC.io +##For instructions on how to start developing with webRTC.io -go to [https://github.com/cavedweller/webRTC.io](https://github.com/cavedweller/webRTC.io) and read the instructions. +go to [https://github.com/webRTC/webRTC.io](https://github.com/webRTC/webRTC.io) and read the instructions. Developed by: [@dennismatensson](https://github.com/dennismartensson) diff --git a/example/index.html b/example/index.html deleted file mode 100644 index e5ed441..0000000 --- a/example/index.html +++ /dev/null @@ -1,195 +0,0 @@ - - - - Example webrtc.io - - - - - -
- Fork me on GitHub - -
-
- - -
-
-
- -
- - - diff --git a/example/style.css b/example/style.css deleted file mode 100644 index 14e6e61..0000000 --- a/example/style.css +++ /dev/null @@ -1,52 +0,0 @@ -html, body { - height: 100%; -} - -html { - overflow-y: scroll; -} - -body { - padding: 0; - margin: 0; -} - -#videos { - position: absolute; - top: 0px; - left: 0px; - right: 0px; - bottom: 0px; - background-color: #F0F6FB; -} - -#chatbox { - position: absolute; - height: 180px; - right: 20px; - left: 20px; - bottom: 0px; -} - -#chatinput { - width: 100%; - padding-top: 7px; - padding-bottom: 7px; - border-radius: 8px; - border-style:solid; - border-width:1px; -} - -#messages { - overflow: scroll; - height: 100px; - width: 100%; - background-color: white; - border-radius: 8px; - border-style:solid; - border-width:1px; -} - -.flip { --webkit-transform: rotateY(180deg); -} diff --git a/example/webrtc.io.js b/example/webrtc.io.js deleted file mode 120000 index 5b50d99..0000000 --- a/example/webrtc.io.js +++ /dev/null @@ -1 +0,0 @@ -../node_modules/webrtc.io/node_modules/webrtc.io-client/lib/webrtc.io.js \ No newline at end of file diff --git a/package.json b/package.json index 1144e6b..859a1a3 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,14 @@ { "name": "MultiWebRTC", "description": "Example of multi user webrtc", - "version": "0.0.1-31", + "version": "0.0.2-1", "engines": { "node": ">= 0.6.0" }, "dependencies": { "webrtc.io": "latest", - "express": "2.5.1", + "webrtc.io-client": "latest", + "express": "3.1.0", "ws": "latest" }, "subdomain": "MultiWebRTC", @@ -29,4 +30,4 @@ "email": "david.a.peter@gmail.com" } ] -} \ No newline at end of file +} diff --git a/site/fullscrean.png b/site/fullscrean.png new file mode 100644 index 0000000..22890d1 Binary files /dev/null and b/site/fullscrean.png differ diff --git a/site/index.html b/site/index.html new file mode 100644 index 0000000..eb38f1f --- /dev/null +++ b/site/index.html @@ -0,0 +1,27 @@ + + + Example webrtc.io + + + + + +
+ Fork me on GitHub + +
+
+
toggle chat
+
+
+ +
+ +
+
Enter Full Screen
+
Create A New Room
+
+ + + + \ No newline at end of file diff --git a/site/script.js b/site/script.js new file mode 100644 index 0000000..145205a --- /dev/null +++ b/site/script.js @@ -0,0 +1,216 @@ +var videos = []; +var PeerConnection = window.PeerConnection || window.webkitPeerConnection00 || window.webkitRTCPeerConnection || window.mozRTCPeerConnection || window.RTCPeerConnection; + +function getNumPerRow() { + var len = videos.length; + var biggest; + + // Ensure length is even for better division. + if(len % 2 === 1) { + len++; + } + + biggest = Math.ceil(Math.sqrt(len)); + while(len % biggest !== 0) { + biggest++; + } + return biggest; +} + +function subdivideVideos() { + var perRow = getNumPerRow(); + var numInRow = 0; + for(var i = 0, len = videos.length; i < len; i++) { + var video = videos[i]; + setWH(video, i); + numInRow = (numInRow + 1) % perRow; + } +} + +function setWH(video, i) { + var perRow = getNumPerRow(); + var perColumn = Math.ceil(videos.length / perRow); + var width = Math.floor((window.innerWidth) / perRow); + var height = Math.floor((window.innerHeight - 190) / perColumn); + video.width = width; + video.height = height; + video.style.position = "absolute"; + video.style.left = (i % perRow) * width + "px"; + video.style.top = Math.floor(i / perRow) * height + "px"; +} + +function cloneVideo(domId, socketId) { + var video = document.getElementById(domId); + var clone = video.cloneNode(false); + clone.id = "remote" + socketId; + document.getElementById('videos').appendChild(clone); + videos.push(clone); + return clone; +} + +function removeVideo(socketId) { + var video = document.getElementById('remote' + socketId); + if(video) { + videos.splice(videos.indexOf(video), 1); + video.parentNode.removeChild(video); + } +} + +function addToChat(msg, color) { + var messages = document.getElementById('messages'); + msg = sanitize(msg); + if(color) { + msg = '' + msg + ''; + } else { + msg = '' + msg + ''; + } + messages.innerHTML = messages.innerHTML + msg + '
'; + messages.scrollTop = 10000; +} + +function sanitize(msg) { + return msg.replace(/= 0; i--) { + var payload = extractSdp(sdpLines[i], /a=rtpmap:(\d+) CN\/\d+/i); + if (payload) { + var cnPos = mLineElements.indexOf(payload); + if (cnPos !== -1) { + // Remove CN payload from m line. + mLineElements.splice(cnPos, 1); + } + // Remove CN line in sdp + sdpLines.splice(i, 1); + } + } + + sdpLines[mLineIndex] = mLineElements.join(' '); + return sdpLines; +} + +function mergeConstraints(cons1, cons2) { + var merged = cons1; + for (var name in cons2.mandatory) { + merged.mandatory[name] = cons2.mandatory[name]; + } + merged.optional.concat(cons2.optional); + return merged; +} \ No newline at end of file