Skip to content

Instantly share code, notes, and snippets.

@jasongaylord

jasongaylord/BrowserFeatures.js

Last active December 18, 2015 05:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jasongaylord/5734097 to your computer and use it in GitHub Desktop.
Save jasongaylord/5734097 to your computer and use it in GitHub Desktop.
Download ZIP
This is an example snippet that demonstrates how to check for a feature and perform an action based on that detection. In this example, we are checking for the new getUserMedia() method. This method is not fully implemented as of the post date. Therefore, the HTML file is grabbing the feature specifically for the WebKit browsers.
Raw
BrowserFeatures.js
// Check to see if jQuery is loaded. If not, load it from the public jQuery CDN.
if (typeof jQuery == 'undefined') {
// Load the latest jQuery library from jQuery
document.write("\<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'>\<\/script>");
}
// Create new BrowserFeatures object
var BrowserFeatures = {
init: function () {
// GetUserMedia
this.getUserMediaSupported = !!(navigator.getUserMedia || navigator.webkitGetUserMedia);
// TODO: Add more feature detection here
}
};
// Initialize the BrowserFeatures object
BrowserFeatures.init();
Raw
TakeMyPicture.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Detecting the WebCam</title>
<script src="browserFeatures.js" type="text/javascript"></script>
</head>
<body>
<video id="livecam" autoplay="autoplay" controls="controls"></video>
<script type="text/javascript">
var livecam = $("#livecam")[0];
if (BrowserFeatures.getUserMediaSupported) {
// Note that we are using webkitGetUserMedia() as getUserMedia() is currently not supported. Once this
// is added to the official HTML5 spec, the browsers should implement it as a standard.
navigator.webkitGetUserMedia(
{ video: true },
function (stream) {
livecam.src = window.webkitURL.createObjectURL(stream);
},
function() {
alert("The stream could not be obtained from your browser.");
});
} else {
alert("This browser does not support webcam access. Sorry :( ");
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment