### server.js
var express = require('express.io');
var app = express();
var PORT = 3000;
var fs = require("fs");
var https = require("https");
var options = {
key: fs.readFileSync('key.pem'),
cert: fs.readFileSync('server.crt')
}
app.https(options).io();
console.log('server started' + PORT);
app.use(express.static(__dirname + '/public'));
app.get('/', function(req, res){
res.render('index.ejs');
});
app.io.route('ready', function(req){
req.io.join(req.data)
app.io.room(req.data).broadcast('announce', {
message: 'New client in the ' + req.data + ' room.'
})
})
app.io.route('send', function(req){
app.io.room(req.data.room).broadcast('message', {
message: req.data.message,
author: req.data.author,
})
})
app.listen(PORT);
### index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebRTC</title>
<link rel="stylesheet" type="text/css" href="public/styles.css">
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<p><button id="takeProfilePicture" type="button" autofocus="true">Create Profile Picture</button></p>
<video id="videoTag" autoplay></video>
<div>
<label>Your Name</label><input id="myName" type="text">
<label>Message</label><input id="myMessage" type="text">
<input id="sendMessage" type="submit">
<div id="chatArea">Message: output:<br></div>
</div>
<script>
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || window.navigator.mozGetUserMedia;
var constraints = {audio: false, video: {
mandatory: {
maxWidth: 240,
maxHeight: 240
}
}
};
var videoArea = document.querySelector("video");
var myName = document.querySelector("#myName");
var myMessage = document.querySelector("#myMessage");
var sendMessage = document.querySelector("#sendMessage");
var chatArea = document.querySelector("#chatArea");
var ROOM = "chat";
io = io.connect();
io.emit('ready', ROOM);
io.on('announce', function(data){
displayMessage(data.message);
});
io.on('message', function(data){
displayMessage(data.author + ": " + data.message);
});
sendMessage.addEventListener('click', function(ev){
io.emit('send', {"author":myName.value, "message":myMessage.value, "room":ROOM});
ev.preventDefault();
}, false);
function displayMessage(message){
chatArea.innerHTML = chatArea.innerHTML + "<br>" + message;
}
navigator.getUserMedia(constraints, onSuccess, onError);
function onSuccess(stream){
console.log("Success! we have a stream!");
// videoArea.src = window.URL.createObjectURL(stream);
// videoArea.className = "grayscale_filter";
videoArea.srcObject = stream;
}
function onError(error){
console.log("Error with getUserMedia: ", error);
}
</script>
</body>
</html>
chat room top -> chat room create -> insert into mysql -> chat room display -> other user join って流れか
socket ioは、HTTP通信ではなく、WebSocketによって通信を行なっている
あれ、待てよ、webrtcだと、SDPの送信が必要なわけだけど、Socket.ioは、TURN serverは提供していないわけだから、TURNで取得したpublic ipをsocket.ioで転送するってこと？
