Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

remove old version

  • Loading branch information...
commit 5b7c8a91e1eaa422abf8595f608de87c8ca761f8 1 parent 7c6f3dd
Dennis Mårtensson authored
225 example/index.html
View
@@ -1,225 +0,0 @@
-<html>
- <head>
- <title>Example webrtc.io</title>
- <link type="text/css" href="/style.css" rel="stylesheet"></link>
-
- <script src="/webrtc.io.js"></script>
- </head>
- <body onload="init()">
- <div id="videos">
- <a href="https://github.com/webRTC"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"></a>
- <video id="you" class="flip" autoplay></video>
- </div>
- <div id="chatbox">
- <button id="fullscreen">Enter Full Screen</button>
- <button id="newRoom">Create A New Room</button>
- <div id="messages">
- </div>
- <br>
- <input id="chatinput" type="text"/>
- </div>
- <script>
- var videos = [];
- var rooms = [1,2,3,4,5];
- var PeerConnection = window.PeerConnection || window.webkitPeerConnection00 || window.webkitRTCPeerConnection;
-
- 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 = '<span style="color: ' + color + '; padding-left: 15px">' + msg + '</span>';
- } else {
- msg = '<strong style="padding-left: 15px">' + msg + '</strong>';
- }
- messages.innerHTML = messages.innerHTML + msg + '<br>';
- messages.scrollTop = 10000;
- }
-
- function sanitize(msg) {
- return msg.replace(/</g, '&lt;');
- }
-
- function initFullScreen() {
- var button = document.getElementById("fullscreen");
- button.addEventListener('click', function(event) {
- var elem = document.getElementById("videos");
- //show full screen
- elem.webkitRequestFullScreen();
- });
- }
-
- function initNewRoom() {
- var button = document.getElementById("newRoom");
-
- button.addEventListener('click', function(event) {
-
- var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
- var string_length = 8;
- var randomstring = '';
- for (var i=0; i<string_length; i++) {
- var rnum = Math.floor(Math.random() * chars.length);
- randomstring += chars.substring(rnum,rnum+1);
- }
-
- window.location.hash = randomstring;
- location.reload();
- })
- }
-
-
- var websocketChat = {
- send: function (message) {
- rtc._socket.send(message);
- },
- recv: function (message) {
- return message;
- },
- event: 'receive_chat_msg'
- };
-
- var dataChannelChat = {
- send: function (message) {
- for (var connection in rtc.dataChannels) {
- var channel = rtc.dataChannels[connection];
- channel.send(message);
- }
- },
- recv: function (channel, message) {
- return JSON.parse(message).data;
- },
- event: 'data stream data'
- };
-
- function initChat() {
- var chat;
-
- if (rtc.dataChannelSupport) {
- console.log('initializing data channel chat');
- chat = dataChannelChat;
- } else {
- console.log('initializing websocket chat');
- chat = websocketChat;
- }
-
- var input = document.getElementById("chatinput");
- var room = window.location.hash.slice(1);
- var color = "#"+((1<<24)*Math.random()|0).toString(16);
-
- input.addEventListener('keydown', function(event) {
- var key = event.which || event.keyCode;
- if (key === 13) {
- chat.send(JSON.stringify({
- "eventName": "chat_msg",
- "data": {
- "messages": input.value,
- "room": room,
- "color": color
- }
- }));
- addToChat(input.value);
- input.value = "";
- }
- }, false);
- rtc.on(chat.event, function() {
- var data = chat.recv.apply(this, arguments);
- console.log(data.color);
- addToChat(data.messages, data.color.toString(16));
- });
- }
-
-
- function init() {
- if(PeerConnection){
- rtc.createStream({"video": true, "audio": true}, function(stream) {
- document.getElementById('you').src = URL.createObjectURL(stream);
- videos.push(document.getElementById('you'));
- //rtc.attachStream(stream, 'you');
- subdivideVideos();
- });
- }else {
- alert('Your browser is not supported or you have to turn on flags. In chrome you go to chrome://flags and turn on Enable PeerConnection remember to restart chrome');
- }
-
-
- var room = window.location.hash.slice(1);
- var url = "ws:"+window.location.href.substring(window.location.protocol.length);
- var hash = url.indexOf('#');
- url = (hash !== -1) ? url.substring(0, hash) : url;
- rtc.connect(url, room);
-
- rtc.on('add remote stream', function(stream, socketId) {
- console.log("ADDING REMOTE STREAM...");
- var clone = cloneVideo('you', socketId);
- document.getElementById(clone.id).setAttribute("class", "");
- rtc.attachStream(stream, clone.id);
- subdivideVideos();
- });
- rtc.on('disconnect stream', function(data) {
- console.log('remove ' + data);
- removeVideo(data);
- });
- initFullScreen();
- initNewRoom();
- initChat();
- }
-
- window.onresize = function(event) {
- subdivideVideos();
- };
- </script>
- </body>
-</html>
58 example/server.js
View
@@ -1,58 +0,0 @@
-var app = require('express')();
-var server = require('http').createServer(app);
-var webRTC = require('webrtc.io').listen(server);
-
-server.listen(8000);
-
-
-
-app.get('/', function(req, res) {
- res.sendfile(__dirname + '/index.html');
-});
-
-app.get('/style.css', function(req, res) {
- res.sendfile(__dirname + '/style.css');
-});
-
-app.get('/webrtc.io.js', function(req, res) {
- res.sendfile(__dirname + '/webrtc.io.js');
-});
-
-
-webRTC.rtc.on('connect', function(rtc) {
- //Client connected
-});
-
-webRTC.rtc.on('send answer', function(rtc) {
- //answer sent
-});
-
-webRTC.rtc.on('disconnect', function(rtc) {
- //Client disconnect
-});
-
-webRTC.rtc.on('chat_msg', function(data, socket) {
- var roomList = webRTC.rtc.rooms[data.room] || [];
-
- for (var i = 0; i < roomList.length; i++) {
- var socketId = roomList[i];
-
- if (socketId !== socket.id) {
- var soc = webRTC.rtc.getSocket(socketId);
-
- if (soc) {
- soc.send(JSON.stringify({
- "eventName": "receive_chat_msg",
- "data": {
- "messages": data.messages,
- "color": data.color
- }
- }), function(error) {
- if (error) {
- console.log(error);
- }
- });
- }
- }
- }
-});
52 example/style.css
View
@@ -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);
-}
1  example/webrtc.io.js
View
Please sign in to comment.
Something went wrong with that request. Please try again.