Added getUserMedia option style detection to support implementations …

…that use string and dictionary style implementations.
addyosmani · Mar 13, 2012 · d9ae0bf · d9ae0bf
1 parent 98c0404
commit d9ae0bf
Showing 1 changed file with 73 additions and 26 deletions.
diff --git a/js/getusermedia.js b/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;