Permalink
Fetching contributors…
Cannot retrieve contributors at this time
executable file 192 lines (157 sloc) 6.56 KB
<script>
if(!location.hash.replace('#', '').length) {
location.href = location.href.split('#')[0] + '#' + (Math.random() * 100).toString().replace('.', '');
location.reload();
}
</script>
<title>Broadcast Multiple-Cameras using RTCMultiConnection.js</title>
<h1>Broadcast Multiple-Cameras using <a href="http://www.rtcmulticonnection.org/">RTCMultiConnection.js</a>
</h1>
<style>
video {
width: 30%
}
button {
font-family: Myriad, Arial, Verdana;
font-weight: normal;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
padding: 4px 12px;
text-decoration: none;
color: rgb(27, 26, 26);
display: inline-block;
box-shadow: rgb(255, 255, 255) 1px 1px 0px 0px inset;
text-shadow: none;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.05, rgb(241, 241, 241)), to(rgb(230, 230, 230)));
font-size: 20px;
border: 1px solid red;
}
button[disabled] {
background: rgba(216, 205, 205, 0.2);
border: 1px solid rgb(233, 224, 224);
outline: none;
box-shadow: none;
}
blockquote {
font-size: 20px;
color: rgb(172, 10, 10);
border: 1px solid rgb(172, 10, 10);
padding: 5px 10px;
border-radius: 5px;
margin: 9px 10px;
}
</style>
<blockquote style="background: #f3b7b7;border: 5px solid black;border-radius: 5px; padding: 10px;">
This demo is <span style="border: 1px dotted red; background: yellow; padding: 2px 5px;">out-dated i.e. deprecated (written in 2013)</span>.
<br><br>
Please try other demos: <a href="https://github.com/muaz-khan/RTCMultiConnection">https://github.com/muaz-khan/RTCMultiConnection</a>
</blockquote>
<hr />
<div id="buttons-container">
<button id="broadcast-all-cameras" disabled>Broadcast All Cameras</button>
</div>
<blockquote>
This demo is using <a href="http://www.rtcmulticonnection.org/">RTCMultiConnection.js</a>. This demo enumerates over all available video devices, and appends &lt;button&gt; for each device. You can click any button to capture relevant webcam. Then you can click "Broadcast All Cameras" button to broadcast your "multiple-cameras" over multiple users.
</blockquote>
<hr />
<div id="videos-container"></div>
<script src="https://cdn.webrtc-experiment.com/DetectRTC.js"></script>
<script src="https://cdn.webrtc-experiment.com/socket.io.js"></script>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="https://cdn.webrtc-experiment.com/CodecsHandler.js"></script>
<script src="https://cdn.webrtc-experiment.com/IceServersHandler.js"></script>
<script src="https://cdn.webrtc-experiment.com/RTCMultiConnection.js"></script>
<script>
var connection = new RTCMultiConnection();
// https://github.com/muaz-khan/WebRTC-Experiment/tree/master/socketio-over-nodejs
var SIGNALING_SERVER = 'https://socketio-over-nodejs2.herokuapp.com:443/';
connection.openSignalingChannel = function(config) {
var channel = config.channel || connection.channel || 'default-namespace';
var sender = Math.round(Math.random() * 9999999999) + 9999999999;
io.connect(SIGNALING_SERVER).emit('new-channel', {
channel: channel,
sender: sender
});
var socket = io.connect(SIGNALING_SERVER + channel);
socket.channel = channel;
socket.on('connect', function() {
if (config.callback) config.callback(socket);
});
socket.send = function(message) {
socket.emit('message', {
sender: sender,
data: message
});
};
socket.on('message', config.onmessage);
};
connection.onNewSession = function(session) {
connection.join(session);
};
// connection.getExternalIceServers = false; // optional--remove it.
// connection.iceServers.length = 1; // optional--remove it.
connection.dontCaptureUserMedia = true;
// Parent <div> for videos
connection.body = document.getElementById('videos-container');
connection.session = {
audio: true,
video: true
};
connection.direction = 'one-way';
connection.sdpConstraints.mandatory = {
OfferToReceiveAudio: true,
OfferToReceiveVideo: true
};
var buttonsContainer = document.getElementById('buttons-container');
// DetectRTC.load --- to make sure all devices are captured
// connection.enumerateDevices --- to get list of all captured devices
var skipDuplicateDevies = {};
var uniqueCamerasLength = 0;
DetectRTC.load(function() {
// iterate over devices-array
DetectRTC.MediaDevices.forEach(function(device) {
if (skipDuplicateDevies[device.id]) return;
skipDuplicateDevies[device.id] = true;
// skip audio devices
if (device.kind.indexOf('audio') != -1) return;
uniqueCamerasLength++;
var button = document.createElement('button');
button.id = device.id;
button.innerHTML = device.label || device.id;
button.onclick = function() {
this.disabled = true;
connection._mediaSources.video = this.id;
connection._mediaSources.audio = null;
connection.dontCaptureUserMedia = false;
connection.captureUserMedia(function(stream) {
connection.attachStreams.push(stream);
connection.dontCaptureUserMedia = true;
if (document.getElementById('broadcast-all-cameras').disabled == true) {
document.getElementById('broadcast-all-cameras').disabled = false;
// document.getElementById('broadcast-all-cameras').style.background = '-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.05, rgb(143, 231, 253)), to(rgb(255, 255, 255)))';
document.getElementById('broadcast-all-cameras').style.background = '-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.05, rgb(195, 35, 56)), to(rgb(255, 15, 15)))';
document.getElementById('broadcast-all-cameras').style.color = 'white';
}
if(connection.attachStreams.length >= uniqueCamerasLength) {
document.getElementById('broadcast-all-cameras').onclick();
}
});
};
buttonsContainer.appendChild(button);
});
});
connection.connect();
document.getElementById('broadcast-all-cameras').onclick = function() {
var that = document.getElementById('broadcast-all-cameras');
that.disabled = true;
that.style.background = 'rgba(216, 205, 205, 0.2)';
that.style.color = 'rgb(27, 26, 26)';
connection.sdpConstraints.mandatory = {
OfferToReceiveAudio: false,
OfferToReceiveVideo: false
};
connection.open();
};
</script>