v0.0.1

first blood
xaccc · Mar 13, 2014 · 17506d0 · 17506d0
commit 17506d0
Show file tree

Hide file tree

Showing 5 changed files with 792 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,148 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+ <meta charset="UTF-8">
+ <title>SkyRTC聊天室Demo</title>
+ <style type="text/css">
+ html, body {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ background-color: #f0f0f0;
+ }
+
+ #videos {
+ position: absolute;
+ left: 30%;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ overflow: auto;
+ }
+
+ #videos video {
+ display: inline-block;
+ width: 32%;
+ }
+
+ #chat {
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ width: 30%;
+ border: 1px solid #0f0f0f;
+ }
+ #chat .msgIpt, #chat .fileIpt{
+ position: absolute;
+ left: 0;
+ width: 80%;
+ }
+ #chat .sendBtn, #chat .sendFileBtn {
+ position: absolute;
+ left: 80%;
+ width: 20%;
+ }
+ #chat .msgIpt,#chat .sendBtn {
+ bottom: 0;
+ }
+ #chat .fileIpt, #chat .sendFileBtn {
+ bottom: 30px;
+ }
+
+ #chat .msgs {
+ padding: 5%;
+ }
+ #chat .msgs p{
+ margin: 0.3em 0;
+ }
+ </style>
+</head>
+<body>
+ <div id="chat">
+ <div class="msgs" id="msgs"></div>
+ <input type="file" id="fileIpt" class="fileIpt">
+ <button id="sendFileBtn" class="sendFileBtn">发送文件</button>
+ <input type="text" id="msgIpt" class="msgIpt">
+ <button id="sendBtn" class="sendBtn">发送</button>
+ </div>
+ <div id="videos">
+ <video id="me" autoplay></video>
+ </div>
+</body>
+<script type="text/javascript" src="/SkyRTC-client.js"></script>
+<script type="text/javascript">
+ var videos = document.getElementById("videos");
+ var sendBtn = document.getElementById("sendBtn");
+ var msgs = document.getElementById("msgs");
+ var sendFileBtn = document.getElementById("sendFileBtn");
+
+ sendBtn.onclick = function(event){
+ var msgIpt = document.getElementById("msgIpt");
+ var msg = msgIpt.value;
+ SkyRTC.broadcast(msg);
+ msgIpt.value = "";
+ };
+
+ sendFileBtn.onclick = function(event){
+ SkyRTC.sendFile(document.getElementById("fileIpt"));
+ };
+
+ SkyRTC.on("connected", function() {
+ SkyRTC.createStream({
+ "video": true,
+ "audio": true
+ });
+ });
+
+ SkyRTC.on("stream_created", function(stream) {
+ document.getElementById('me').src = URL.createObjectURL(stream);
+ document.getElementById('me').play();
+ });
+
+ SkyRTC.on("stream_create_error", function() {
+ alert("create stream failed!");
+ });
+
+ SkyRTC.on('pc_add_stream', function(stream, socketId) {
+ var newVideo = document.createElement("video"),
+ id = "other-" + socketId;
+ newVideo.setAttribute("class", "other");
+ newVideo.setAttribute("autoplay", "autoplay");
+ newVideo.setAttribute("id", id);
+ videos.appendChild(newVideo);
+ SkyRTC.attachStream(stream, id);
+ });
+
+ SkyRTC.on('remove_peer', function(socketId) {
+ var video = document.getElementById('other-' + socketId);
+ if(video){
+ video.parentNode.removeChild(video);
+ }
+ });
+
+ SkyRTC.on('data_channel_message', function(channel, socketId, message){
+ var textNode = document.createTextNode(socketId + ": " + message);
+ var pNode = document.createElement("p");
+ pNode.appendChild(textNode);
+ msgs.appendChild(pNode);
+ });
+
+ SkyRTC.on('send_file', function(file){
+ console.log("start to send file " + file.name);
+ });
+
+ SkyRTC.on('send_file_chunk', function(percent, file){
+ console.log("sending file " + file.name + ": " + percent + "%");
+ });
+ SkyRTC.on('receive_file_chunk', function(uuid, name, percent){
+ console.log("receiving file " + name + ":" + percent + "%");
+ });
+ SkyRTC.on('receive_file', function(uuid, name){
+ console.log("received file " + name);
+ });
+
+ SkyRTC.connect("ws:" + window.location.href.substring(window.location.protocol.length).split('#')[0]);
+</script>
+</html>
diff --git a/lib/SkyRTC.js b/lib/SkyRTC.js
@@ -0,0 +1,172 @@
+var WebSocketServer = require('ws').Server;
+var UUID = require('node-uuid');
+var events = require('events');
+var util = require('util');
+var errorCb = function(error) {
+ if (error) {
+ console.log(error);
+ }
+};
+
+function SkyRTC() {
+ this.sockets = [];
+ this.on('__join', function(data, socket) {
+ var ids = [],
+ i, m,
+ curSocket;
+
+ for (i = 0, m = this.sockets.length; i < m; i++) {
+ curSocket = this.sockets[i];
+ if (curSocket.id === socket.id) {
+ continue;
+ }
+ ids.push(curSocket.id);
+ curSocket.send(JSON.stringify({
+ "eventName": "_new_peer",
+ "data": {
+ "socketId": socket.id
+ }
+ }), errorCb);
+ }
+
+ socket.send(JSON.stringify({
+ "eventName": "_peers",
+ "data": {
+ "connections": ids,
+ "you": socket.id
+ }
+ }), errorCb);
+
+ this.emit('new_peer', socket, this);
+ });
+
+ this.on('__ice_candidate', function(data, socket) {
+ var soc = this.getSocket(data.socketId);
+
+ if (soc) {
+ soc.send(JSON.stringify({
+ "eventName": "_ice_candidate",
+ "data": {
+ "label": data.label,
+ "candidate": data.candidate,
+ "socketId": socket.id
+ }
+ }), errorCb);
+
+ this.emit('get_ice_candidate', this);
+ }
+ });
+
+ this.on('__offer', function(data, socket) {
+ var soc = this.getSocket(data.socketId);
+
+ if (soc) {
+ soc.send(JSON.stringify({
+ "eventName": "_offer",
+ "data": {
+ "sdp": data.sdp,
+ "socketId": socket.id
+ }
+ }), errorCb);
+ }
+ this.emit('send_offer', this);
+ });
+
+ this.on('__answer', function(data, socket) {
+ var soc = this.getSocket(data.socketId);
+ if (soc) {
+ soc.send(JSON.stringify({
+ "eventName": "_answer",
+ "data": {
+ "sdp": data.sdp,
+ "socketId": socket.id
+ }
+ }), errorCb);
+ this.emit('send_answer', this);
+ }
+ });
+}
+
+util.inherits(SkyRTC, events.EventEmitter);
+
+SkyRTC.prototype.addSocket = function(socket) {
+ this.sockets.push(socket);
+};
+
+SkyRTC.prototype.removeSocket = function(socket) {
+ var i = this.sockets.indexOf(socket);
+ this.sockets.splice(i, 1);
+};
+
+SkyRTC.prototype.broadcast = function(data, errorCb) {
+ var i;
+ for (i = this.sockets.length; i--;) {
+ this.sockets[i].send(data, errorCb);
+ }
+};
+
+SkyRTC.prototype.getSocket = function(id) {
+ var i,
+ curSocket;
+ if (!this.sockets) {
+ return;
+ }
+ for (i = this.sockets.length; i--;) {
+ curSocket = this.sockets[i];
+ if (id === curSocket.id) {
+ return curSocket;
+ }
+ }
+ return;
+};
+
+SkyRTC.prototype.init = function(socket) {
+ var that = this;
+ socket.id = UUID.v4();
+ that.addSocket(socket);
+ //为新连接绑定事件处理器
+ socket.on('message', function(data) {
+ var json = JSON.parse(data);
+ if (json.eventName) {
+ that.emit(json.eventName, json.data, socket);
+ } else {
+ that.emit("socket_message", json);
+ }
+ });
+ //新连接关闭后从SkyRTC实例中移除连接，并通知其他连接
+ socket.on('close', function() {
+ var i, m;
+ that.removeSocket(socket);
+
+ that.broadcast(JSON.stringify({
+ "eventName": "_remove_peer",
+ "data": {
+ "socketId": socket.id
+ }
+ }), errorCb);
+
+ that.emit('remove_peer', socket.id, that);
+ });
+ that.emit('new_connect', that);
+};
+
+module.exports.listen = function(server) {
+ var SkyRTCServer;
+ if (typeof server === 'number') {
+ SkyRTCServer = new WebSocketServer({
+ port: server
+ });
+ } else {
+ SkyRTCServer = new WebSocketServer({
+ server: server
+ });
+ }
+
+ SkyRTCServer.rtc = new SkyRTC();
+
+ SkyRTCServer.on('connection', function(socket) {
+ this.rtc.init(socket);
+ });
+
+ return SkyRTCServer;
+};
diff --git a/package.json b/package.json
@@ -0,0 +1,10 @@
+{
+ "name": "demo",
+ "version": "0.0.1",
+ "description": "Drop-in client code for webrtc.io",
+ "dependencies": {
+ "ws": ">= 0.0.0",
+ "node-uuid": ">= 1.4.1",
+ "express": "3.1.0"
+ }
+}