enumerate-devices
Version:
A small project to normalize browser differences for enumerating media devices
91 lines (90 loc) • 4.07 kB
HTML
<html>
<head>
<title>Enumerate Devices Demo</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.min.css" />
<link rel="stylesheet" href="yeti-guide.min.css"/>
</head>
<body>
<style>
section {
max-width: 600px;
margin: auto;
}
.hide {
display: none;
}
.error-message {
color: red;
}
video {
height: 0;
}
video[src^="blob"], video[autoplay] {
height: auto;
}
</style>
<div class="github-fork-ribbon-wrapper right">
<div class="github-fork-ribbon">
<a href="https://github.com/xdumaine/enumerateDevices">Fork me on GitHub</a>
</div>
</div>
<section>
<aside>
<p>
This page is intended to be a demo of device enumeration via the wrapper module
<a href="https://github.com/xdumaine/enumerateDevices">enumerateDevices</a>. The module normalizes
enumeration of devices from different implementations to a feature closer to
<a href="http://www.w3.org/TR/2015/WD-mediacapture-streams-20150414/#enumerating-devices">the spec</a>.
</p>
<p>
This example page goes a bit further, showing how the device enumeration can be used to change media
access via getUserMedia and attaching them to the DOM, via other helpful modules,
<a href="https://github.com/HenrikJoreteg/getUserMedia">getUserMedia</a> and
<a href="https://github.com/HenrikJoreteg/attachMediaStream">attachMediaStream</a>.
</p>
</aside>
</section>
<section>
<aside id="http-message">
<p>To avoid repeated permissions prompts, run on https</p>
<p>Devices will have generic labels (e.g., "camera 1") on http. For real device names, run on https.</p>
</aside>
<aside class="error-message hide">
<p>Sorry, your browser doesn't support device enumeration</p>
</aside>
<fieldset id="device-selection">
<legend>Select Devices</legend>
<select id="video-options"></select><br/>
<select id="audio-options"></select><br/>
<button class="button button-small" id="refresh-video">Get Media</button>
</fieldset>
<fieldset id="video-display">
<legend>Video Result</legend>
<aside id="get-started">Press "Get Media" to start</aside>
<video id="video-preview" muted="true"></video>
</fieldset>
</section>
<section>
<aside>
<p>
As of today (September 2015), this demo page should function in Chrome 36 or later, and Firefox 42 or later. FF 39-41 will
list devices, but changing the selection won't have any effect (default camera will always be used). FF 38
will show an error. Safari and IE have no support.
</p>
</aside>
</section>
<section>
<p>Created by
<a href="http://xdumaine.com">Xander Dumaine</a> |
<a href="https://twitter.com/xanderdumaine">@xanderdumaine</a> |
<a href="https://github.com/xdumaine">git://xdumaine</a>
</p>
</section>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="../enumerateDevices.bundle.js"></script>
<script src="getusermedia.bundle.js"></script>
<script src="attachmediastream.bundle.js"></script>
<script src="testApp.js"></script>
</body>
</html>