Permalink
Fetching contributors…
Cannot retrieve contributors at this time
executable file 241 lines (201 sloc) 9.06 KB
<!--
> Muaz Khan - github.com/muaz-khan
> MIT License - www.webrtc-experiment.com/licence
> Documentation - www.RTCMultiConnection.org
-->
<!DOCTYPE html>
<html lang="en">
<head>
<script>
if(!location.hash.replace('#', '').length) {
location.href = location.href.split('#')[0] + '#' + (Math.random() * 100).toString().replace('.', '');
location.reload();
}
</script>
<title>navigator.getMediaDevices / navigator.enumerateDevices / MediaStreamTrack.getSources using RTCMultiConnection | Muaz Khan</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
<meta name="author" content="Muaz Khan">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="https://cdn.webrtc-experiment.com/style.css">
<style>
audio,
video {
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
-webkit-transition: all 1s ease;
transition: all 1s ease;
vertical-align: top;
}
input {
border: 1px solid #d9d9d9;
border-radius: 1px;
font-size: 2em;
margin: .2em;
width: 20%;
}
.setup {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
font-size: 102%;
height: 47px;
margin-left: -9px;
margin-top: 8px;
position: absolute;
}
p {
padding: 1em;
}
li {
border-bottom: 1px solid rgb(189, 189, 189);
border-left: 1px solid rgb(189, 189, 189);
padding: .5em;
}
</style>
<script>
document.createElement('article');
document.createElement('footer');
</script>
<!-- currently only v2+ are supporting "enumerateDevices" method. -->
<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>
</head>
<body>
<article>
<header style="text-align: center;">
<h1>navigator.getMediaDevices / navigator.enumerateDevices / MediaStreamTrack.getSources using <a href="http://www.rtcmulticonnection.org/">RTCMultiConnection.js</a>!</h1>
<p>
<a href="https://www.webrtc-experiment.com/">HOME</a>
<span> &copy; </span>
<a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a> .
<a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a> .
<a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a> .
<a href="https://github.com/muaz-khan/WebRTC-Experiment/issues?state=open" target="_blank">Latest issues</a> .
<a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">What's New?</a>
</p>
</header>
<div class="github-stargazers"></div>
<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>
<!-- just copy this <section> and next script -->
<section class="experiment">
<h2>Select Media Device</h2>
<br />
<br />
<select id="audio-devices"></select>
<select id="video-devices"></select>
<br />
<br />
<button id="select-device">Select Device</button>
<br />
<div id="videos"></div>
</section>
<script>
var connection = new RTCMultiConnection();
connection.setDefaultEventsForMediaElement = false;
// 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.enumerateDevices(function(devices) {
devices.forEach(appendOption);
function appendOption(device) {
var option = document.createElement('option');
option.innerHTML = device.label || (device.kind + ': ' + device.deviceId);
option.value = device.deviceId;
if (device.kind.indexOf('audio') !== -1) {
selectAudioDevices.appendChild(option);
} else selectVideoDevices.appendChild(option);
}
});
document.getElementById('select-device').onclick = function() {
this.disabled = true;
connection.selectDevices(selectAudioDevices.value, selectVideoDevices.value);
connection.captureUserMedia();
};
var selectAudioDevices = document.getElementById('audio-devices');
var selectVideoDevices = document.getElementById('video-devices');
var videos = document.querySelector('#videos');
connection.onstream = function(e) {
videos.appendChild(e.mediaElement);
};
</script>
<section class="experiment">
<h2>How to get media devices?</h2>
<pre>
// get list of devices
connection.getDevices(function(devices){
for (var device in devices) {
device = devices[device];
// device.kind == 'audio' || 'video'
console.log(device.id, device.label);
}
});
// select any audio and/or video device
connection.selectDevices(firstDeviceID, secondDeviceID);
</pre>
</section>
<section class="experiment">
<h2>Reference Links</h2>
<ol>
<li>
<a href="http://www.rtcmulticonnection.org/docs/getDevices/">http://www.rtcmulticonnection.org/docs/getDevices/</a>
</li>
<li>
<a href="http://www.rtcmulticonnection.org/docs/selectDevices/">http://www.rtcmulticonnection.org/docs/selectDevices/</a>
</li>
</ol>
</section>
<section class="experiment">
<h2 class="header" id="feedback">Feedback</h2>
<div>
<textarea id="message" style="border: 1px solid rgb(189, 189, 189); height: 8em; margin: .2em; outline: none; resize: vertical; width: 98%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
</div>
<button id="send-message" style="font-size: 1em;">Send Message</button>
<small style="margin-left: 1em;">Enter your email too; if you want "direct" reply!</small>
</section>
<section class="experiment own-widgets latest-commits">
<h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">Latest Updates</a>
</h2>
<div id="github-commits"></div>
</section>
</article>
<a href="https://github.com/muaz-khan/RTCMultiConnection" class="fork-left"></a>
<footer>
<a href="https://www.webrtc-experiment.com/" target="_blank">WebRTC Experiments!</a> and
<a href="http://www.RTCMultiConnection.org/docs/" target="_blank">RTCMultiConnection.js</a> ©
<a href="mailto:muazkh@gmail.com" target="_blank">Muaz Khan</a>:
<a href="https://twitter.com/WebRTCWeb" target="_blank">@WebRTCWeb</a>
</footer>
<!-- commits.js is useless for you! -->
<script>window.useThisGithubPath = 'muaz-khan/RTCMultiConnection';</script>
<script src="https://cdn.webrtc-experiment.com/commits.js" async></script>
</body>
</html>