Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Add video chat #1

Merged
merged 1 commit into from

2 participants

@pikotea

No description provided.

@KensakuKOMATSU

LGTM ;-) I'll accept pull req.

@KensakuKOMATSU KensakuKOMATSU merged commit 6efd897 into from
@KensakuKOMATSU

thx!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 25, 2013
  1. @pikotea

    Add video chat

    pikotea authored
This page is out of date. Refresh to see the latest.
View
133 public/javascripts/gum.js
@@ -1,16 +1,16 @@
// room url
var room_no;
(function(){
- var url = location.href;
- $("#room-url").html("<a href='"+url+"' target='_blank'>"+url+"</a>");
+ var url = location.protocol + '//' + location.host + location.pathname + location.search;
+ $("#room-url").html("<a href='"+url+"' target='_blank'>"+url+"</a>");
- var queries = location.search.slice(1).split("&");
- queries.forEach(function(query) {
- if(query.indexOf("r=") === 0) {
- room_no = query.slice(2);
- }
- });
- }());
+ var queries = location.search.slice(1).split("&");
+ queries.forEach(function(query) {
+ if(query.indexOf("r=") === 0) {
+ room_no = query.slice(2);
+ }
+ });
+}());
var ws = new WebSocket('ws://'+location.host+"/"+room_no);
@@ -129,43 +129,45 @@ var localVideo = document.getElementById('local'),
function createConnection() {
navigator.webkitGetUserMedia({video: true, audio:true}, function(stream){
- localStream = stream;
- localVideo.src = webkitURL.createObjectURL(stream);
- localVideo.play();
- });
-
-
- var servers = null;
- // var servers = {"iceServers": [{"url": "stun:stun.l.google.com:19302"}]};
+ localStream = stream;
+ localVideo.src = webkitURL.createObjectURL(stream);
+ localVideo.play();
+ });
+
+ var servers = {
+ iceServers: [
+ { url: "stun:stun.l.google.com:19302"}
+ ]
+ };
+ var options = {
+ optional: [
+ { RtpDataChannels: true } // use data channel
+ ]
+ };
// If you use STUN, indicate stun url except for null
- // window.pc = new webkitRTCPeerConnection(servers,
- // {optional: [{RtpDataChannels: true}]});
- // trace('Created local peer connection object pc');
-
- window.pc = new webkitRTCPeerConnection({
- "iceServers": [
- {"url": "stun:stun.l.google.com:19302"}
- ]
- });
-
- // try {
- // // Reliable Data Channels not yet supported in Chrome
- // // Data Channel api supported from Chrome M25.
- // // You need to start chrome with --enable-data-channels flag.
- // dataChannel = pc.createDataChannel("DataChannel",{reliable: false});
- // // {reliable: true});
- // trace('Created send data channel');
- // } catch (e) {
- // alert('Failed to create data channel. ' +
- // 'You need Chrome M25 or later with --enable-data-channels flag');
- // trace('Create Data channel failed with exception: ' + e.message);
- // }
+ window.pc = new webkitRTCPeerConnection(servers, options);
+ trace('Created local peer connection object pc');
+
+ // data channel
+ try {
+ // Reliable Data Channels not yet supported in Chrome
+ // Data Channel api supported from Chrome M25.
+ // You need to start chrome with --enable-data-channels flag.
+ dataChannel = pc.createDataChannel("DataChannel",{reliable: false});
+ // {reliable: true});
+ trace('Created send data channel');
+ } catch (e) {
+ alert('Failed to create data channel. ' +
+ 'You need Chrome M25 or later with --enable-data-channels flag');
+ trace('Create Data channel failed with exception: ' + e.message);
+ }
pc.onicecandidate = iceCallback1;
- // dataChannel.onopen = onDataChannelStateChange;
- // dataChannel.onmessage = onDataChannelReceiveMessage;
- // dataChannel.onclose = onDataChannelStateChange;
+ dataChannel.onopen = onDataChannelStateChange;
+ dataChannel.onmessage = onDataChannelReceiveMessage;
+ dataChannel.onclose = onDataChannelStateChange;
+
+ // remote stream
pc.onaddstream = function(e) {
- console.log(1);
remoteVideo.src = webkitURL.createObjectURL(e.stream);
remoteVideo.play();
};
@@ -175,39 +177,24 @@ function createConnection() {
}
function startSendOffer(){
-
- // getUserMedia縺ァ蜿門セ励@縺溘せ繝医Μ繝シ繝繝��繧ソ繧定ソス蜉
pc.addStream(localStream);
-
- // 繧ェ繝輔ぃ繝シ繧剃ス懈�
pc.createOffer(function(description){
- pc.setLocalDescription(description);
- sendDescription(description);
- });
-
- // pc.createOffer(function(desc){
- // trace("create Offer succeed. Send it to peer.");
- // pc.setLocalDescription(desc);
- // sendDescription(desc);
- // });
+ trace("create Offer succeed. Send it to peer.");
+ pc.setLocalDescription(description);
+ sendDescription(description);
+ });
}
function onReceiveOffer(desc) {
pc.addStream(localStream);
pc.setRemoteDescription(new RTCSessionDescription(desc), function(){
-
+ trace("Receive Offer from peer.");
pc.createAnswer(function(description){
+ trace("Create Answer succeeded. Send it to peer.");
pc.setLocalDescription(description);
sendDescription(description);
- });
});
- // trace("Receive Offer from peer.");
- // pc.setRemoteDescription(new RTCSessionDescription(desc));
- // pc.createAnswer(function(desc_) {
- // trace("Create Answer succeeded. Send it to peer.");
- // pc.setLocalDescription(desc_);
- // sendDescription(desc_);
- // });
+ });
}
function onReceiveAnswer(desc){
@@ -231,14 +218,14 @@ function iceCallback1(event) {
if (event.candidate) {
trace("Found candidate. Send it to peer.");
sendDescription({
-type: 'candidate',
-label: event.candidate.sdpMLineIndex,
-id: event.candidate.sdpMid,
-candidate: event.candidate.candidate
-});
-} else {
- trace("End of candidate");
-}
+ type: 'candidate',
+ label: event.candidate.sdpMLineIndex,
+ id: event.candidate.sdpMid,
+ candidate: event.candidate.candidate
+ });
+ } else {
+ trace("End of candidate");
+ }
}
View
10 public/stylesheets/style.css
@@ -5,4 +5,14 @@ body {
a {
color: #00B7FF;
+}
+
+video {
+ border: 1px solid gray;
+ width: 200px;
+ height: 200px;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -ms-box-sizing: border-box;
+ box-sizing: border-box;
}
View
9 views/index.ejs
@@ -24,7 +24,12 @@
<button id="start">start</button>
<button id="send-offer">send Offer</button>
-
+
+ <section>
+ <h1>Views</h1>
+ <video id="local" autoplay></video>
+ <video id="remote" autplay></video>
+ </section>
<section id="send">
<h1>send</h1>
@@ -53,5 +58,5 @@
</section>
</body>
- <script src="/javascripts/script.js"></script>
+ <script src="/javascripts/gum.js"></script>
</html>
Something went wrong with that request. Please try again.