add speaker device support (only works in canary for now)

html5/verto/js/src/jquery.FSRTC.js

@@ -354,6 +354,7 @@ var iceTimer;
 
 	self.options.useCamera = params.useCamera || "any";
 	self.options.useMic = params.useMic || "any";
+	self.options.useSpeak = params.useSpeak || "any";
 
         function onSuccess(stream) {
             self.localStream = stream;
@@ -486,6 +487,10 @@ var iceTimer;
 	var useVideo = obj.options.useVideo;
 
 	if (useVideo && obj.options.useCamera && obj.options.useCamera !== "none") {
+	    if (!video.optional) {
+		video.optional = [];
+	    }
+
 	    if (obj.options.useCamera !== "any") {
 		video.optional.push({sourceId: obj.options.useCamera});
 	    }

html5/verto/js/src/jquery.verto.js

@@ -1618,6 +1618,7 @@
 	    screenShare: false,
 	    useCamera: "any",
 	    useMic: "any",
+	    useSpeak: "any",
             tag: verto.options.tag,
             localTag: verto.options.localTag,
             login: verto.options.login,
@@ -1626,6 +1627,7 @@
 	
 	dialog.useCamera = verto.options.deviceParams.useCamera;
 	dialog.useMic = verto.options.deviceParams.useMic;
+	dialog.useSpeak = verto.options.deviceParams.useSpeak;
 
         dialog.verto = verto;
         dialog.direction = direction;
@@ -1637,6 +1639,7 @@
 	dialog.screenShare = params.screenShare || false;
 	dialog.useCamera = params.useCamera;
 	dialog.useMic = params.useMic;
+	dialog.useSpeak = params.useSpeak;
 
         if (dialog.params.callID) {
             dialog.callID = dialog.params.callID;
@@ -1736,7 +1739,8 @@
             iceServers: verto.options.iceServers,
 	    screenShare: dialog.screenShare,
 	    useCamera: dialog.useCamera,
-	    useMic: dialog.useMic
+	    useMic: dialog.useMic,
+	    useSpeak: dialog.useSpeak
         });
 
         dialog.rtc.verto = dialog.verto;
@@ -1820,6 +1824,23 @@
         }
 
         switch (dialog.state) {
+
+        case $.verto.enum.state.early:
+        case $.verto.enum.state.active:
+
+	    var speaker = dialog.useSpeak;
+	    console.info("Using Speaker: ", speaker);
+
+	    if (speaker && speaker !== "any") {
+		var videoElement = dialog.audioStream;
+
+		setTimeout(function() {
+		    console.info("Setting speaker:", videoElement, speaker);
+		    attachSinkId(videoElement, speaker);}, 500);
+	    }
+
+	    break;
+
         case $.verto.enum.state.trying:
             setTimeout(function() {
                 if (dialog.state == $.verto.enum.state.trying) {
@@ -2067,6 +2088,7 @@
 
 	    dialog.useCamera = verto.options.deviceParams.useCamera;
 	    dialog.useMic = verto.options.deviceParams.useMic;
+	    dialog.useSpeak = verto.options.deviceParams.useSpeak;
 
             if (params) {
                 if (params.useVideo) {
@@ -2076,6 +2098,7 @@
 		dialog.params.callee_id_number = params.callee_id_number;
 		dialog.useCamera = params.useCamera;
 		dialog.useMic = params.useMic;
+		dialog.useSpeak = params.useSpeak;
             }
 	    
             dialog.rtc.createAnswer(params);
@@ -2263,27 +2286,28 @@
     });
 
     $.verto.videoDevices = [];
-    $.verto.audioDevices = [];
+    $.verto.audioInDevices = [];
+    $.verto.audioOutDevices = [];
 
     var checkDevices = function(runtime) {
 	console.info("enumerating devices");
-	var aud = [], vid = [];	
+	var aud_in = [], aud_out = [], vid = [];	
 
-	if (MediaStreamTrack.getSources) {
+	if ((!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) && MediaStreamTrack.getSources) {
 	    MediaStreamTrack.getSources(function (media_sources) {
 		for (var i = 0; i < media_sources.length; i++) {
 
 		    if (media_sources[i].kind == 'video') {
 			vid.push(media_sources[i]);
 		    } else {
-			aud.push(media_sources[i]);
+			aud_in.push(media_sources[i]);
 		    }
 		}
 		
 		$.verto.videoDevices = vid;
-		$.verto.audioDevices = aud;
+		$.verto.audioInDevices = aud_in;
 		
-		console.info("Audio Devices", $.verto.audioDevices);
+		console.info("Audio Devices", $.verto.audioInDevices);
 		console.info("Video Devices", $.verto.videoDevices);
 		runtime();
 	    });
@@ -2307,16 +2331,20 @@
 			
 			if (device.kind === "videoinput") {
 			    vid.push({id: device.deviceId, kind: "video", label: device.label});
-			} else {
-			    aud.push({id: device.deviceId, kind: "audio", label: device.label});
+			} else if (device.kind === "audioinput") {
+			    aud_in.push({id: device.deviceId, kind: "audio_in", label: device.label});
+			} else if (device.kind === "audiooutput") {
+			    aud_out.push({id: device.deviceId, kind: "audio_out", label: device.label});
 			}
 		    });
 		    
 
 		    $.verto.videoDevices = vid;
-		    $.verto.audioDevices = aud;
+		    $.verto.audioInDevices = aud_in;
+		    $.verto.audioOutDevices = aud_out;
 		    
-		    console.info("Audio Devices", $.verto.audioDevices);
+		    console.info("Audio IN Devices", $.verto.audioInDevices);
+		    console.info("Audio Out Devices", $.verto.audioOutDevices);
 		    console.info("Video Devices", $.verto.videoDevices);
 		    runtime();
 		    

html5/verto/video_demo/index.html

@@ -363,6 +363,8 @@ if ($('#devices').is(':visible')) {
 <br><br></div>
 
 <legend><b>Microphone</b>:</legend><select data-theme="a" data-overlay-theme="a" data-native-menu="false" id="usemic"></select>
+<br>
+<legend><b>Speaker</b>:</legend><select data-theme="a" data-overlay-theme="a" data-native-menu="false" id="usespeak"></select>
 
 <Br clear="all"><Br>
 

html5/verto/video_demo/verto.js

@@ -201,6 +201,31 @@ function check_vid() {
     return use_vid;
 }
 
+// Attach audio output device to video element using device/sink ID.                                                                                            
+function attachSinkId(element, sinkId) {
+    if (typeof element.sinkId !== 'undefined') {
+	element.setSinkId(sinkId)
+	    .then(function() {
+		console.log('Success, audio output device attached: ' + sinkId);
+	    })
+	    .catch(function(error) {
+		var 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 messageTextToJQ(body) {
 	// Builds a jQuery collection from body text, linkifies http/https links, imageifies http/https links to images, and doesn't allow script injection
 	
@@ -437,7 +462,9 @@ var callbacks = {
 		    callee_id_name: $("#cidname").val(),
 		    callee_id_number: $("#cid").val(),
 		    useCamera: $("#usecamera").find(":selected").val(),
-		    useMic: $("#usemic").find(":selected").val()
+		    useMic: $("#usemic").find(":selected").val(),
+		    useSpeak: $("#usespeak").find(":selected").val()
+
 		});
                 $('#dialog-incoming-call').dialog('close');
             });
@@ -457,7 +484,8 @@ var callbacks = {
                         useVideo: true,
 			useStereo: $("#use_stereo").is(':checked'),
 			useCamera: $("#usecamera").find(":selected").val(),
-			useMic: $("#usemic").find(":selected").val()
+			useMic: $("#usemic").find(":selected").val(),
+			useSpeak: $("#usespeak").find(":selected").val()
                     });
                 });
                 // the buttons in this jquery mobile wont hide .. gotta wrap them in a div as a workaround
@@ -489,7 +517,9 @@ var callbacks = {
 	    } else {
 		display("Talking to: " + d.cidString());
 	    }
+
             goto_page("incall");
+
             break;
         case $.verto.enum.state.hangup:
 	    $("#main_info").html("Call ended with cause: " + d.cause);
@@ -738,6 +768,7 @@ function docall() {
         useStereo: $("#use_stereo").is(':checked'),
 	useCamera: sessid ? "none" : $("#usecamera").find(":selected").val(),
 	useMic: $("#usemic").find(":selected").val(),
+	useSpeak: $("#usespeak").find(":selected").val(),
 	dedEnc: $("#use_dedenc").is(':checked'),
 	mirrorInput: $("#mirror_input").is(':checked'),
         userVariables: {
@@ -874,14 +905,17 @@ function refresh_devices()
     $("#useshare").selectmenu({});
     $("#useshare").selectmenu({});
     $("#usemic").selectmenu({});
+    $("#usespeak").selectmenu({});
 
     $("#useshare").selectmenu("enable");
     $("#useshare").selectmenu("enable");
     $("#usemic").selectmenu("enable");
+    $("#usespeak").selectmenu("enable");
 
     $("#useshare").empty();
     $("#usecamera").empty();
     $("#usemic").empty();
+    $("#usespeak").empty();
     
 
 
@@ -889,6 +923,7 @@ function refresh_devices()
 
     $("#usecamera").append(new Option("No Camera", "none"));
     $("#usemic").append(new Option("Do Not Specify", "any"));
+    $("#usespeak").append(new Option("Do Not Specify", "any"));
     for (var i in $.verto.videoDevices) {
 	var source = $.verto.videoDevices[i];
 	var o = new Option(source.label, source.id);
@@ -907,8 +942,8 @@ function refresh_devices()
 
     x = 1;
     
-    for (var i in $.verto.audioDevices) {
-	var source = $.verto.audioDevices[i];
+    for (var i in $.verto.audioInDevices) {
+	var source = $.verto.audioInDevices[i];
 	var o = new Option(source.label, source.id);
 	if (!x++) {
 	    o.selected = true;
@@ -916,6 +951,15 @@ function refresh_devices()
 	$("#usemic").append(o);
     }
 
+    for (var i in $.verto.audioOutDevices) {
+	var source = $.verto.audioOutDevices[i];
+	var o = new Option(source.label, source.id);
+	if (!x++) {
+	    o.selected = true;
+	}
+	$("#usespeak").append(o);
+    }
+
 
     var o = new Option("Screen", "screen");
     o.selected = true;
@@ -925,6 +969,7 @@ function refresh_devices()
     
     $("#usecamera").selectmenu('refresh', true);
     $("#usemic").selectmenu('refresh', true);
+    $("#usespeak").selectmenu('refresh', true);
     $("#useshare").selectmenu('refresh', true);
 
     //$("input[type='radio']).checkboxradio({});
@@ -945,6 +990,12 @@ function refresh_devices()
         $('#usemic option[value=' + tmp + ']').prop('selected', 'selected').change();
         pop_select("#usemic","verto_demo_mic_selected", tmp);
     }
+
+    tmp = $.cookie("verto_demo_speak_selected") || "false";
+    if (tmp) {
+        $('#usespeak option[value=' + tmp + ']').prop('selected', 'selected').change();
+        pop_select("#usespeak","verto_demo_speak_selected", tmp);
+    }
 }
 
 function init() {
@@ -953,6 +1004,7 @@ function init() {
 
     $("#usecamera").selectmenu({});
     $("#usemic").selectmenu({});
+    $("#usespeak").selectmenu({});
     $("#useshare").selectmenu({});
 
     if (!autocall) {
@@ -1307,20 +1359,19 @@ function init() {
         //localTag: $("#local_video").is(':checked') ? "local_webcam" : null,
         ringFile: "sounds/bell_ring2.wav",
 	sessid: sessid,
-	//loginParams: {second_screen: second_screen},
         videoParams: {
             "minWidth": vid_width,
             "minHeight": vid_height,
 	    "maxWidth": vid_width,
 	    "maxHeight": vid_height,
 	    "minFrameRate": 15,
-	    "vertoBestFrameRate": 30,
-	    //chromeMediaSource: 'screen',
-	    //mediaSource: 'screen'
+	    "vertoBestFrameRate": 30
         },
 
 	deviceParams: {
-	    useCamera: $("#usecamera").find(":selected").val(),                                                                                                            useMic: $("#usemic").find(":selected").val()
+	    useCamera: $("#usecamera").find(":selected").val(),                                                                                                            useMic: $("#usemic").find(":selected").val(),
+            useSpeak: $("#usespeak").find(":selected").val()
+
 	},
 
 //	audioParams: {