Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Added getUserMedia option style detection #1

Merged
merged 1 commit into from

2 participants

@phuu

Based on work by @miketaylr here, and me here.

Should allow this shim to support browsers with string style or object style options.

@phuu phuu Added getUserMedia option style detection to support implementations …
…that use string and dictionary style implementations.
d9ae0bf
@addyosmani
Owner

Great work, @phuu!. I'll be doing some testing on this this afternoon just to confirm the demos still play nice, but otherwise the PR is looking solid. Should be able to merge today. Thanks!.

@phuu

Cheers.

I should say, I've tested in the Opera Labs Camera build, Opera Next 12.0.0, Opera 11.61, Chrome 17.0.963.79, Chrome Canary 19.0.1067.0 and Firefox 10.0.2 all on OSX Lion. I woulda done IE, but I don't have my external drive with the VMs on it!

@addyosmani
Owner

Very useful to know! Cheers. I'll get the IE testing out of the way and cover testing on Windows + Leopard for the others.

@addyosmani addyosmani merged commit 152f0c3 into addyosmani:master
@addyosmani
Owner

Thanks for this again @phuu!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 13, 2012
  1. @phuu

    Added getUserMedia option style detection to support implementations …

    phuu authored
    …that use string and dictionary style implementations.
This page is out of date. Refresh to see the latest.
Showing with 73 additions and 26 deletions.
  1. +73 −26 js/getusermedia.js
View
99 js/getusermedia.js
@@ -4,38 +4,85 @@
getUserMedia = function (options, successCallback, errorCallback) {
- navigator.getUserMedia_ = navigator.getUserMedia || navigator.webkitGetUserMedia;
+ navigator.getUserMedia_ = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
+
+ // detect if {video: true} or "video" style options
+ // by creating an iframe and blowing it up
+ // style jacked from @kangax
+ // taken here from @miketaylr: //gist.github.com/f2ac64ed7fc467ccdfe3
+ var optionStyle = (function (win) {
+
+ var el = document.createElement('iframe'),
+ root = document.body || document.documentElement,
+ string = true, object = true, nop = function(){};
+ root.appendChild(el);
+
+ var f = win.frames[win.frames.length-1];
+
+ f.navigator.getUserMedia || (f.navigator.getUserMedia = f.navigator.webkitGetUserMedia || f.navigator.mozGetuserMedia || f.navigator.msGetUserMedia);
+
+ try { // Try spec (object) syntax
+ f.navigator.getUserMedia({video: true, audio: true}, nop);
+ } catch (e) {
+ object = false;
+ try { // Try string syntax
+ f.navigator.getUserMedia("video, audio", nop);
+ } catch (e) { // Neither supported
+ string = false;
+ }
+ } finally { // Clean up
+ root.removeChild(el);
+ el = null;
+ }
+
+ return { string: string, object: object }
+
+ }(window));
if (!! navigator.getUserMedia_ ) {
- if ( !(options.audio && options.video) ) {
- alert('This mode is not yet supported: NOT_SUPPORTED_ERR');
- } else {
-
- var container, temp, video, ow, oh;
-
- container = document.getElementById(options.el);
- temp = document.createElement('video');
-
- // Fix for ratio
- ow = parseInt(container.offsetWidth);
- oh = parseInt(container.offsetHeight);
- if(options.width < ow && options.height < oh){
- options.width = ow;
- options.height = oh;
- }
+ if( !optionStyle.string && !optionStyle.object ) {
+ return undefined;
+ }
+
+ var getUserMediaOptions = undefined;
+ if( optionStyle.string ) {
+ if( options.video && options.audio )
+ getUserMediaOptions = 'video, audio';
+ else if( options.video )
+ getUserMediaOptions = 'video';
+ else if( options.audio )
+ getUserMediaOptions = 'audio';
+ } else if( optionStyle.object ) {
+ if( options.video )
+ getUserMediaOptions.video = true;
+ if( options.audio )
+ getUserMediaOptions.audio = true;
+ }
+
+ var container, temp, video, ow, oh;
+
+ container = document.getElementById(options.el);
+ temp = document.createElement('video');
+
+ // Fix for ratio
+ ow = parseInt(container.offsetWidth);
+ oh = parseInt(container.offsetHeight);
+ if(options.width < ow && options.height < oh){
+ options.width = ow;
+ options.height = oh;
+ }
- temp.width = options.width;
- temp.height = options.height;
- temp.autoplay = true;
- container.appendChild(temp);
- video = temp;
- options.videoEl = video;
- options.context = 'webrtc';
+ temp.width = options.width;
+ temp.height = options.height;
+ temp.autoplay = true;
+ container.appendChild(temp);
+ video = temp;
+ options.videoEl = video;
+ options.context = 'webrtc';
- navigator.getUserMedia_('video', successCallback, errorCallback);
+ navigator.getUserMedia_(getUserMediaOptions, successCallback, errorCallback);
- }
} else {
// fallback to flash
var source, el, cam;
Something went wrong with that request. Please try again.