Created
July 28, 2019 19:31
-
-
Save bigsnarfdude/fe68bbb05ac73db0cf8adb1546261c92 to your computer and use it in GitHub Desktop.
index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="description" content="WebRTC code samples"> | |
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1"> | |
<meta itemprop="description" content="Client-side WebRTC code samples"> | |
<meta itemprop="image" content="../../../images/webrtc-icon-192x192.png"> | |
<meta itemprop="name" content="WebRTC code samples"> | |
<meta name="mobile-web-app-capable" content="yes"> | |
<meta id="theme-color" name="theme-color" content="#ffffff"> | |
<base target="_blank"> | |
<title>Select audio and video sources</title> | |
<link rel="icon" sizes="192x192" href="../../../images/webrtc-icon-192x192.png"> | |
<link href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css"> | |
<link rel="stylesheet" href="../../../css/main.css"> | |
<style> | |
div.select { | |
display: inline-block; | |
margin: 0 0 1em 0; | |
} | |
p.small { | |
font-size: 0.7em; | |
} | |
label { | |
width: 12em; | |
display: inline-block; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="container"> | |
<div class="select"> | |
<label for="videoSource"> Choose webcam here: </label><select id="videoSource"></select> | |
</div> | |
<video id="video" playsinline autoplay></video> | |
<p> | |
<div class="" hidden> | |
<label for=""> </label> <select id="audioSource"></select> | |
</div> | |
<div class="" hidden> | |
<label for=""> </label><select id="audioOutput"></select> | |
</div> | |
</div> | |
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script> | |
<script src="js/main.js" async></script> | |
<script src="../../../js/lib/ga.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
const videoElement = document.querySelector('video'); | |
const audioInputSelect = document.querySelector('select#audioSource'); | |
const audioOutputSelect = document.querySelector('select#audioOutput'); | |
const videoSelect = document.querySelector('select#videoSource'); | |
const selectors = [videoSelect]; | |
audioOutputSelect.disabled = !('sinkId' in HTMLMediaElement.prototype); | |
function gotDevices(deviceInfos) { | |
// Handles being called several times to update labels. Preserve values. | |
const values = selectors.map(select => select.value); | |
selectors.forEach(select => { | |
while (select.firstChild) { | |
select.removeChild(select.firstChild); | |
} | |
}); | |
for (let i = 0; i !== deviceInfos.length; ++i) { | |
const deviceInfo = deviceInfos[i]; | |
const option = document.createElement('option'); | |
option.value = deviceInfo.deviceId; | |
if (deviceInfo.kind === 'audioinput') { | |
option.text = deviceInfo.label || `microphone ${audioInputSelect.length + 1}`; | |
//audioInputSelect.appendChild(option); | |
} else if (deviceInfo.kind === 'audiooutput') { | |
option.text = deviceInfo.label || `speaker ${audioOutputSelect.length + 1}`; | |
//audioOutputSelect.appendChild(option); | |
} else if (deviceInfo.kind === 'videoinput') { | |
option.text = deviceInfo.label || `camera ${videoSelect.length + 1}`; | |
videoSelect.appendChild(option); | |
} else { | |
console.log('Some other kind of source/device: ', deviceInfo); | |
} | |
} | |
selectors.forEach((select, selectorIndex) => { | |
if (Array.prototype.slice.call(select.childNodes).some(n => n.value === values[selectorIndex])) { | |
select.value = values[selectorIndex]; | |
} | |
}); | |
} | |
navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(handleError); | |
// Attach audio output device to video element using device/sink ID. | |
function attachSinkId(element, sinkId) { | |
if (typeof element.sinkId !== 'undefined') { | |
element.setSinkId(sinkId) | |
.then(() => { | |
console.log(`Success, audio output device attached: ${sinkId}`); | |
}) | |
.catch(error => { | |
let errorMessage = error; | |
if (error.name === 'SecurityError') { | |
errorMessage = `You need to use HTTPS for selecting audio output device: ${error}`; | |
} | |
console.error(errorMessage); | |
// Jump back to first output device in the list as it's the default. | |
audioOutputSelect.selectedIndex = 0; | |
}); | |
} else { | |
console.warn('Browser does not support output device selection.'); | |
} | |
} | |
function gotStream(stream) { | |
window.stream = stream; // make stream available to console | |
videoElement.srcObject = stream; | |
// Refresh button list in case labels have become available | |
return navigator.mediaDevices.enumerateDevices(); | |
} | |
function handleError(error) { | |
console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name); | |
} | |
function start() { | |
if (window.stream) { | |
window.stream.getTracks().forEach(track => { | |
track.stop(); | |
}); | |
} | |
//const audioSource = audioInputSelect.value; | |
const videoSource = videoSelect.value; | |
const constraints = { | |
video: {deviceId: videoSource ? {exact: videoSource} : undefined} | |
}; | |
navigator.mediaDevices.getUserMedia(constraints).then(gotStream).then(gotDevices).catch(handleError); | |
} | |
audioInputSelect.onchange = start; | |
//audioOutputSelect.onchange = changeAudioDestination; | |
videoSelect.onchange = start; | |
start(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment