Skip to content

Commit

Permalink
RTCWeb video broadcasting experiment updated
Browse files Browse the repository at this point in the history 
https://webrtc-experiment.appspot.com/broadcast/
  • Loading branch information
@muaz-khan
muaz-khan committed Dec 26, 2012
1 parent beabe7f commit ce915f5
Show file tree
Hide file tree
Showing 12 changed files with 273 additions and 301 deletions.
3 changes: 2 additions & 1 deletion Python/files/broadcast/1-helper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 11,9 @@ function $(n, t, i) {
}, Object.prototype.hide = function () { return this.length != undefined ? this.each(function (n) { n.style.display = "none"; }) : typeof this == "object" && (this.style.display = "none"), this; }, Object.prototype.show = function (n) { return this.length != undefined ? this.each(function (t) { t.style.display = n ? n : "block"; }) : typeof this == "object" && (this.style.display = n ? n : "block"), this; }, Object.prototype.css = function (n, t) { return this.style[n] = t, this; }, Object.prototype.slideDown = function (n) { return this.css("max-height", (n || 1e6) "px"); }, Object.prototype.slideUp = function () { return this.css("max-height", "0"); };

/* log messages and title */
var logOutput = $('.log').show();
function log(message) {
var logOutput = $('.log').show();

console.log(message);
document.title = message;
logOutput.innerHTML = message;
Expand Down
28 changes: 13 additions & 15 deletions Python/files/broadcast/2-rtc-functions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,27 37,29 @@ function sendice(candidate, socket) {
});
}

/* on getting remote stream */
var remoteVideo = $('#remote-video');

function gotstream(event, recheck) {

if (event) {

remoteVideo.css('margin', '0 30%').show();
clientVideo.css('width', (innerWidth / 4) 'px').css('height', '');
var video = document.createElement('video');
video.src = clientVideo.src;
video.play();

participants.appendChild(video, participants.firstChild);

clientVideo.pause();

if (!navigator.mozGetUserMedia) remoteVideo.src = URL.createObjectURL(event.stream);
else video.mozSrcObject = event.stream;
if (!navigator.mozGetUserMedia) clientVideo.src = URL.createObjectURL(event.stream);
else clientVideo.mozSrcObject = event.stream;

remoteVideo.play();

clientVideo.play();

/* check until remote stream start flowing */
gotstream(null, true);
}

if (recheck) {
if (!(remoteVideo.readyState <= HTMLMediaElement.HAVE_CURRENT_DATA || remoteVideo.paused || remoteVideo.currentTime <= 0)) {
if (!(clientVideo.readyState <= HTMLMediaElement.HAVE_CURRENT_DATA || clientVideo.paused || clientVideo.currentTime <= 0)) {
finallyGotStream();
} else
setTimeout(function() {
Expand All @@ -66,11 68,7 @@ function gotstream(event, recheck) {
}
}

/* remote stream started flowing */

function finallyGotStream() {
clientVideo.css('-webkit-transform', 'rotate(0deg)');
global.isGotRemoteStream = true;
remoteVideo.scrollIntoView(true);

disable(true);
}
127 changes: 43 additions & 84 deletions Python/files/broadcast/4-ui.js
View file
Original file line number Diff line number Diff line change
@@ -1,20 1,23 @@
/* client video capture client camera */
var clientVideo = $('#client-video');

captureCamera();

function captureCamera() {
function captureCamera(callback) {
getUserMedia({
video: clientVideo,
onsuccess: function (stream) {
global.clientStream = stream;
clientVideo.play();

clientVideo.css('margin', '0 30%');
clientVideo.show().play();

setTimeout(function() {
clientVideo.css('-webkit-transform', 'rotate(360deg)');
}, 1000);

$('#video-table').show().scrollIntoView(true);
$('.visible', true).hide();

callback && callback();
},
onerror: function () {
alert('Two possible situations: 1) another window is using your webcam, or 2) you\'ve not allowed you camera. Webcam is mandatory of this app!');
location.reload();
}
});
Expand Down Expand Up @@ -49,88 52,65 @@ global.userToken = uniqueToken();

/* you wanted to create a private room! */
$('#is-private').onchange = function() {
if (this.checked) $('#partner-email').css('padding', '10px 20px').css('height', 'auto').css('border-bottom', '1px double #CACACA').slideDown().querySelector('#partner-email').focus();
if (this.checked) $('#partner-email').css('padding', '10px 20px').css('height', 'auto').css('border-bottom', '1px double #CACACA').slideDown().querySelector('#private-token').focus();
else $('#partner-email').css('padding', 0).css('border-bottom', 0).slideUp();
};

/* you tried to create a new room! */
$('#create-room').onclick = function () {
var fullName = $('#full-name'),
roomName = $('#room-name'),
partnerEmail = $('input#partner-email');
var roomName = $('#room-name'),
privateToken = $('#private-token');

if (fullName.value.length <= 0) {
alert('Please enter your full name.');
fullName.focus();
return;
}

if (roomName.value.length <= 0) {
alert('Please enter room name.');
roomName.focus();
return;
}
roomName = roomName.value.length > 0 ? roomName.value : 'Anonymous';

var isChecked = $('#is-private').checked;

/* if you checked the box but not entered anything like email or token! */
if (isChecked && partnerEmail.value.length <= 0) {
alert('Please enter your partner\'s email or token.');
partnerEmail.focus();
return;
}

/* client stream is MUST! */
if (!global.clientStream) {
alert(global.mediaAccessAlertMessage);
if (isChecked && privateToken.value.length <= 0) {
alert('Please enter private token.');
privateToken.focus();
return;
}

/* setting users defaults */
global.userName = fullName.value;
global.roomName = roomName.value;

/* no need to get anymore rooms */
global.roomName = roomName;
global.isGetAvailableRoom = false;

/* don't allow user to play with input boxes because he created a room! */
hideListsAndBoxes();

/* generating a unique token for room! */
global.roomToken = uniqueToken();

/* client is the one who created offer or...! */
global.offerer = true;

if (isChecked && partnerEmail.value.length) {
global.isPrivateRoom = true;
captureCamera(function () {
if (isChecked && privateToken.value.length) {
global.isPrivateRoom = true;

socket.master && (socket.master = null);
socket.master && (socket.master = null);

masterSocket(partnerEmail.value, spreadRoom);
}
masterSocket(privateToken.value, spreadRoom);
}

/* propagate room around the globe!! */
else spreadRoom();
/* propagate room around the globe!! */
else spreadRoom();
});

/* these 3 lines are extras! */
socket.answer && (socket.answer = null);
remoteVideo.hide();
disable(true);
};

function spreadRoom() {
var g = global;

socket.master.send({
roomToken: g.roomToken,
ownerName: g.userName,
ownerToken: g.userToken,
roomName: g.roomName
});

/* propagate room around the globe! */
setTimeout(spreadRoom, 300);
setTimeout(spreadRoom, 3000);
}

/* you tried to search a private room! */
Expand All @@ -148,8 128,6 @@ $('#search-room').onclick = function () {
socket.master && (socket.master = null);
socket.answer && (socket.answer = null);

window.scrollTo(0, publicRooms.offsetTop);

answerSocket(email.value, function () {
email.value = '';
email.removeAttribute('disabled');
Expand All @@ -159,12 137,7 @@ $('#search-room').onclick = function () {
/* if other end close the room; refreshing the UI for current user */

function refreshUI() {
log('Broadcasted RTC Room is closed by your partner!');
remoteVideo.pause();
remoteVideo.setAttribute('src', '');

disable(false);

global.rtc = null;

global.isGetAvailableRoom = true;
Expand All @@ -186,52 159,38 @@ function getAvailableRooms(response) {
var blockquote = document.createElement('blockquote');
blockquote.setAttribute('id', response.ownerToken);

blockquote.innerHTML = response.roomName
'<a href="#" class="join" id="' response.roomToken '">Join Room</a><br/>'
'<br /><small>Created by <span class="roshan">' response.ownerName '</span></small>';
blockquote.innerHTML = response.roomName '<a href="#" class="join" id="' response.roomToken '">Join Room</a>';

publicRooms.insertBefore(blockquote, publicRooms.childNodes[0]);

/* allowing user to join rooms! */
$('.join', true).each(function (span) {
span.onclick = function () {
if (!global.clientStream) {
alert(global.mediaAccessAlertMessage);
return;
}

global.userName = prompt('Enter your name');

if (!global.userName.length) {
alert('You\'ve not entered your name. Too bad!');
return;
}

global.isGetAvailableRoom = false;
hideListsAndBoxes();

global.roomToken = this.id;

var forUser = this.parentNode.id;

/* telling room owner that I'm your participant! */
socket.answer.send({
participant: global.userName,
userToken: global.userToken,
forUser: forUser,


/* let other end know that whether you support opus */
isopus: isopus
});
captureCamera(function () {
/* telling room owner that I'm your participant! */
socket.answer.send({
participant: global.userToken,
userToken: global.userToken,
forUser: forUser,

socket.master && (socket.master = null);
socket.answer && (socket.answer = null);

answerSocket(global.userToken);
/* let other end know that whether you support opus */
isopus: isopus
});

this.parentNode.parentNode.removeChild(this.parentNode);
socket.master && (socket.master = null);
socket.answer && (socket.answer = null);

participants.scrollIntoView(true);
answerSocket(global.userToken);
});
};
});
}
Loading

0 comments on commit ce915f5

Please sign in to comment.