Skip to content

Commit

Permalink
Fixed "Multi-Broadcasters-and-Many-Viewers.html" muaz-khan#655
Browse files Browse the repository at this point in the history 
Added support for "switch camera".
Integrated this demo to latest "rtcmulticonneciton-server"
implementation.
  • Loading branch information
@muaz-khan
muaz-khan committed Oct 26, 2018
1 parent cd91983 commit bc7cdf5
Show file tree
Hide file tree
Showing 3 changed files with 130 additions and 47 deletions.
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "rtcmulticonnection",
"description": "RTCMultiConnection is a WebRTC JavaScript wrapper library runs top over RTCPeerConnection API to provide multi-session establishment scenarios.",
"version": "3.5.2",
"version": "3.5.3",
"authors": [
{
"name": "Muaz Khan",
Expand Down
173 changes: 128 additions & 45 deletions demos/Multi-Broadcasters-and-Many-Viewers.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!-- Demo version: 2018.10.22 -->
<!-- Demo version: 2018.10.26 -->

<!DOCTYPE html>
<html lang="en" dir="ltr">
Expand Down Expand Up @@ -47,15 +47,14 @@ <h1>
</h1>

<section class="make-center">
<label style="cursor: pointer;"><input type="checkbox"> Are You A Broadcaster?</label>
<br><br>
<input type="text" id="room-id" value="abcdef" autocorrect=off autocapitalize=off size=20>
<button id="open-broadcast" disabled>Open Broadcast</button>
<button id="open-broadcast">Open Broadcast</button>
<button id="join-broadcast">Join Broadcast</button>

<div id="room-urls" style="text-align: center;display: none;background: #F1EDED;margin: 15px -10px;border: 1px solid rgb(189, 189, 189);border-left: 0;border-right: 0;"></div>
<button id="switch-camera" disabled>Switch Camera</button>

<div id="videos-container"></div>

<div id="room-urls" style="text-align: center;display: none;background: #F1EDED;margin: 15px -10px;border: 1px solid rgb(189, 189, 189);border-left: 0;border-right: 0;"></div>
</section>

<script src="/dist/RTCMultiConnection.min.js"></script>
Expand All @@ -66,37 +65,95 @@ <h1>
<link rel="stylesheet" href="/dev/getHTMLMediaElement.css">
<script src="/dev/getHTMLMediaElement.js"></script>
<script>
var checkbox = document.querySelector('input[type=checkbox]');
checkbox.onchange = function() {
if (checkbox.checked === false) {
document.getElementById('open-broadcast').disabled = true;
} else {
document.getElementById('open-broadcast').disabled = false;
}
};

function beforeJoiningARoom(callback) {
if (checkbox.checked === false) {
connection.extra.broadcaster = false;
connection.dontCaptureUserMedia = true;
connection.session.oneway = true;
} else {
connection.extra.broadcaster = true;
}

callback();
}

// ......................................................
// .......................UI Code........................
// ......................................................
document.getElementById('open-broadcast').onclick = function() {
disableInputButtons();

beforeJoiningARoom(function() {
connection.openOrJoin(document.getElementById('room-id').value, function(isRoomExist, roomid) {
connection.extra.broadcaster = true;
DetectRTC.load(function() {
if (DetectRTC.videoInputDevices.length > 1) {
connection.mediaConstraints = {
audio: true,
video: {
deviceId: DetectRTC.videoInputDevices[0].deviceId
}
};
}

connection.openOrJoin(document.getElementById('room-id').value, function(isRoomExist, roomid, error) {
if (error) {
console.error('openOrJoin', error, roomid);
return;
}

showRoomURL(roomid);
afterConnectingSocket();

if (!connection.isInitiator) {
console.log('I am creating my own room as well.');

var initialStatus = connection.dontCaptureUserMedia;
connection.dontCaptureUserMedia = true;
// each user must create a separate room as well!
connection.open(connection.userid, function(isRoomOpened, roomid, error) {
if (error) {
console.error('open', error, roomid);
return;
}
connection.dontCaptureUserMedia = initialStatus;
connection.isInitiator = false;
});
}

if (DetectRTC.videoInputDevices.length > 1) {
document.getElementById('switch-camera').disabled = false;

var idx = 0;
document.getElementById('switch-camera').onclick = function() {
var deviceId = DetectRTC.videoInputDevices[0].deviceId;
if (idx % 2 == 0) {
deviceId = DetectRTC.videoInputDevices[1].deviceId;
}
idx++;

this.disabled = true;
navigator.mediaDevices.getUserMedia({
video: {
deviceId: deviceId
}
}).then(function(cam) {
document.getElementById(connection.userid).media.srcObject = cam;

document.getElementById('switch-camera').disabled = false;
connection.getAllParticipants().forEach(function(remoteUserId) {
var peer = connection.peers[remoteUserId].peer;
var sender = peer.getSenders().filter(function(s) {
return s.track.kind === 'video'
})[0];
var track = cam.getTracks().filter(function(s) {
return s.kind === 'video'
})[0];
if (sender && track) {
sender.track.stop();
sender.replaceTrack(track);
}
});

// for upcoming users
var audioTrack = connection.attachStreams[0].getTracks().filter(function(s) {
return s.kind === 'audio'
})[0];

if(audioTrack) {
cam.addTrack(audioTrack);
}

connection.attachStreams = [cam];
});
};
}
});
});
};
Expand All @@ -112,6 +169,8 @@ <h1>

var connection = new RTCMultiConnection();

connection.autoCloseEntireSession = true;

// by default, socket.io server is assumed to be deployed on your own URL
connection.socketURL = '/';

Expand All @@ -133,7 +192,7 @@ <h1>

connection.videosContainer = document.getElementById('videos-container');
connection.onstream = function(event) {
var width = parseInt(connection.videosContainer.clientWidth / 2) - 20;
var width = parseInt(connection.videosContainer.clientWidth / 4) - 20;
var mediaElement = getHTMLMediaElement(event.mediaElement, {
title: event.userid,
buttons: ['full-screen'],
Expand All @@ -147,7 +206,7 @@ <h1>
mediaElement.media.play();
}, 5000);

mediaElement.id = event.streamid;
mediaElement.id = event.userid;

if (event.type === 'remote' && connection.isInitiator) {
var participants = [];
Expand All @@ -160,7 +219,7 @@ <h1>
connection.socket.emit(connection.socketCustomEvent, {
participants: participants
});
} else if (event.type === 'remote' && checkbox.checked === false) {
} else if (event.type === 'remote' && !connection.extra.broadcaster) {
connection.socket.emit(connection.socketCustomEvent, {
giveAllParticipants: true
});
Expand All @@ -169,16 +228,21 @@ <h1>

function afterConnectingSocket() {
connection.socket.on(connection.socketCustomEvent, function(message) {
console.error('custom message', message);
console.log('custom message', message);

if (message.participants && !connection.isInitiator) {
if (message.participants && !connection.isInitiator && !connection.extra.broadcaster) {
message.participants.forEach(function(participant) {
if (participant.pid === connection.userid) return;
if (connection.getAllParticipants().indexOf(participant.pid) !== -1) return;
if (checkbox.checked === true && participant.broadcaster === false) return;

console.error('I am joining:', participant.pid);
connection.join(participant.pid);
if (!connection.extra.broadcaster && participant.broadcaster === false) return;

console.log('I am joining:', participant.pid);
connection.join(participant.pid, function(isRoomJoined, roomid, error) {
if (error) {
console.error('join', error, roomid);
return;
}
});
});
}

Expand All @@ -198,7 +262,7 @@ <h1>
}

connection.onstreamended = function(event) {
var mediaElement = document.getElementById(event.streamid);
var mediaElement = document.getElementById(event.userid);
if (mediaElement) {
mediaElement.parentNode.removeChild(mediaElement);
}
Expand All @@ -208,7 +272,6 @@ <h1>
document.getElementById('open-broadcast').disabled = true;
document.getElementById('join-broadcast').disabled = true;
document.getElementById('room-id').disabled = true;
checkbox.disabled = true;
}

// ......................................................
Expand Down Expand Up @@ -266,14 +329,34 @@ <h1>
}

function joinBroadcastLooper(roomid) {
connection.extra.broadcaster = false;
connection.dontCaptureUserMedia = true;
connection.session.oneway = true;

// join-broadcast looper
(function reCheckRoomPresence() {
connection.checkPresence(roomid, function(isRoomExist) {
connection.checkPresence(roomid, function(isRoomExist, roomid, extra) {
// note: last parametr on checkPresence will be changed in future
// it is expected to return "error" rather than "extra"
// so you can compare: if(error === connection.errors.ROOM_FULL) {}
if (extra._room) {
if (extra._room.isFull) {
alert('Room is full.');
}

if (extra._room.isPasswordProtected) {
alert('Room is password protected');
}
}

if (isRoomExist) {
beforeJoiningARoom(function() {
connection.join(roomid, function() {
afterConnectingSocket();
});
connection.join(roomid, function(isRoomJoined, roomid, error) {
if (error) {
console.error('join', error, roomid);
return;
}

afterConnectingSocket();
});
return;
}
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "rtcmulticonnection",
"preferGlobal": false,
"version": "3.5.2",
"version": "3.5.3",
"author": {
"name": "Muaz Khan",
"email": "[email protected]",
Expand Down

0 comments on commit bc7cdf5

Please sign in to comment.