From 19134bae95b385cb011668a40a67f0fe6cc31252 Mon Sep 17 00:00:00 2001
From: "vikasmarwaha@webrtc.org"
 <vikasmarwaha@webrtc.org@4adac7df-926f-26a2-2b94-8c16560cd09d>
Date: Tue, 1 Oct 2013 17:02:32 +0000
Subject: [PATCH] Updated device-switch demo page to work with Chrome M30.
 BUG=2218 R=braveyao@webrtc.org, dutton@google.com

Review URL: https://webrtc-codereview.appspot.com/2025004

git-svn-id: http://webrtc.googlecode.com/svn/trunk@4892 4adac7df-926f-26a2-2b94-8c16560cd09d
---
 samples/js/demos/html/device-switch.html | 297 +++++++++++++----------
 1 file changed, 172 insertions(+), 125 deletions(-)
diff --git a/samples/js/demos/html/device-switch.html b/samples/js/demos/html/device-switch.html
index f819a94fb3..e291fa9b02 100644
--- a/samples/js/demos/html/device-switch.html
+++ b/samples/js/demos/html/device-switch.html
@@ -1,154 +1,201 @@
 <!DOCTYPE html>
 <html>
+<!-- Load the polyfill to switch-hit between Chrome and Firefox -->
+<script src='../../base/adapter.js'></script>
 <head>
-<title>Device Switching</title>
+<title>Device Switch Demo</title>
 <style>
-video {
-    border:5px solid black;
-    width:480px;
-    height:360px;
+h2 {
+  font-size: 1em;
+  font-family: sans-serif;
+  margin: 0 0 0.5em 0;
+  padding: 0;
 }
-button {
-    font: 18px sans-serif;
-    padding: 8px;
+video {
+  width:40%;
 }
 </style>
-<script>
-
-// If the getSourceInfos call is not present, fake it.
-var fakeSources = [
-  {"id": "zxyfyz", "kind": "audio", "label": "Default audio"},
-  {"id": "xfesaa", "kind": "video", "label": "Default video",
-   "facing": "front"},
-  {"id": "blwe4e", "kind": "video", "label": "Alternate video",
-   "facing": "rear"}
-];
-
-var fakeSourcesNoLabel = [
-  {"id": "zxyfyz", "kind": "audio"},
-  {"id": "xfesaa", "kind": "video", "facing": "front"},
-  {"id": "blwe4e", "kind": "video", "facing": "rear"}
-];
-
-var isAuthorized = false;
-
-// Make sure there's a MediaStreamTrack object to manipulate.
-if (typeof(MediaStreamTrack) === 'undefined') {
-  MediaStreamTrack = new Object;
-}
-
-if (!MediaStreamTrack.getSourceInfos) {
-  MediaStreamTrack.getSourceInfos = function() {
-    if (!isAuthorized) {
-      return fakeSourcesNoLabel;
-    }
-    return fakeSources;
-  };
-}
-// End fake getSourceInfos implementation.
-
-var mainStream;
-var choices;
-
-</script>
 </head>
 <body>
-This demo shows device switching via the (proposed) device selection API.
-The big frame shows the currently playing stream; the grid below shows
-available devices, with a button for choosing a device.
-<p>
-<video id="vid" autoplay="true"></video>
-<br>
-<button id="btn" onclick="start()">Start</button>
-<div id="choices">
+<video id="vid1" autoplay muted></video>
+<video id="vid2" autoplay></video>
+<div>
+<h2>Select an audio and video source, then click Start.</h2>
+Audio source: <select id="audiosrc"></select>
+Video source: <select id="videosrc"></select><br>
+<button id="btn1">Start</button>
+<button id="btn2">Call</button>
+<button id="btn3">Hang Up</button>
 </div>
 <script>
-function failure() {
-  console.log("Failure");
-  alert("Failure!")
+var btn1 = document.querySelector('button#btn1');
+var btn2 = document.querySelector('button#btn2');
+var btn3 = document.querySelector('button#btn3');
+var audio_select = document.getElementById("audiosrc");
+var video_select = document.getElementById("videosrc");
+//audio_select.onchange = changeDevices;
+//video_select.onchange = changeDevices;
+btn1.onclick = start;
+btn2.onclick = call;
+btn3.onclick = hangup;
+btn1.disabled = false;
+btn2.disabled = true;
+btn3.disabled = true;
+var pc1,pc2;
+var localstream;
+var sdpConstraints = {'mandatory': {
+                        'OfferToReceiveAudio':true,
+                        'OfferToReceiveVideo':true }};
+refreshSources();
+
+function refreshSources() {
+  if (webrtcDetectedVersion >= 30) {
+    MediaStreamTrack.getSources(gotSources);
+  } else {
+    alert('Make sure that you have Chrome M30 to test device enumeration api.');
+  }
+}
+
+function gotSources(sourceInfos) {
+  var audio_count = 0;
+  var video_count = 0;
+  audio_select.disabled = true;
+  video_select.disabled = true;
+  audio_select.innerHTML = '';
+  video_select.innerHTML = '';
+  for (var i = 0; i < sourceInfos.length; i++) {
+    var option = document.createElement("option");
+    option.value = sourceInfos[i].id;
+    option.text = sourceInfos[i].label;
+    if (sourceInfos[i].kind === 'audio') {
+      audio_count++;
+      if (option.text === '') {
+        option.text = 'Audio ' + audio_count;
+      }
+      audio_select.appendChild(option);
+    } else {
+      video_count++;
+      if (option.text === '') {
+        option.text = 'Video ' + video_count;
+      }
+      video_select.appendChild(option);
+    }
+  }
+  audio_select.disabled = false;
+  video_select.disabled = false;
 }
 
 function start() {
-  navigator.webkitGetUserMedia({video:true}, gotStream, failure);
-  btn.disabled = true;
+  changeDevices();
+  btn1.disabled = true;
+  btn2.disabled = false;
+  audio_select.disabled = true;
+  video_select.disabled = true;
+}
+
+function changeDevices() {
+  var audio_source = null;
+  var video_source = null;
+  if (audio_select.options.length > 0) {
+    audio_source = audio_select.options[audio_select.selectedIndex].value;
+    trace('selected audio_source :' + audio_source);
+  }
+  if (video_select.options.length > 0 ) {
+    video_source = video_select.options[video_select.selectedIndex].value;
+    trace('selected video_source :' + video_source);
+  }
+  setWebcamAndMic(audio_source, video_source);
+}
+
+function setWebcamAndMic(audio_source, video_source) {
+  trace("Requesting local stream");
+  // Call into getUserMedia via the polyfill (adapter.js).
+  getUserMedia({ audio: {optional: [{sourceId: audio_source}]},
+                 video: {optional: [{sourceId: video_source}]}
+               }, gotStream, function() {});
 }
 
 function gotStream(stream) {
-  mainStream = stream;
-  video.src = webkitURL.createObjectURL(stream);
-  // Telling fake that permission is granted:
-  isAuthorized = true;
-  getChoices();
+  trace("Received local stream");
+  // Call the polyfill wrapper to attach the media stream to this element.
+  attachMediaStream(vid1, stream);
+  localstream = stream;
+ }
+
+function call() {
+  btn2.disabled = true;
+  btn3.disabled = false;
+  trace("Starting call");
+  videoTracks = localstream.getVideoTracks();
+  audioTracks = localstream.getAudioTracks();
+  if (videoTracks.length > 0) {
+    trace('Using Video device: ' + videoTracks[0].label);
+  }
+  if (audioTracks.length > 0) {
+    trace('Using Audio device: ' + audioTracks[0].label);
+  }
+  var servers = null;
+  pc1 = new RTCPeerConnection(servers);
+  trace("Created local peer connection object pc1");
+  pc1.onicecandidate = iceCallback1;
+  pc2 = new RTCPeerConnection(servers);
+  trace("Created remote peer connection object pc2");
+  pc2.onicecandidate = iceCallback2;
+  pc2.onaddstream = gotRemoteStream;
+
+  pc1.addStream(localstream);
+  trace("Adding Local Stream to peer connection");
+  pc1.createOffer(gotDescription1);
 }
 
-function switchTo(id) {
-  console.log('Switching to camera with id ' + id);
-  // Note: Constraint should be mandatory. Setting it to optional here
-  // so that call won't fail when the constraint is not known.
-  navigator.webkitGetUserMedia({'audio':false,
-                                'video': {'optional': [{'sourceId': id }]}},
-      switchedTo, failure);
+function gotDescription1(desc) {
+  pc1.setLocalDescription(desc);
+  trace("Offer from pc1 \n" + desc.sdp);
+  pc2.setRemoteDescription(desc);
+  // Since the "remote" side has no media stream we need
+  // to pass in the right constraints in order for it to
+  // accept the incoming offer of audio and video.
+  pc2.createAnswer(gotDescription2, null, sdpConstraints);
 }
 
-function switchedTo(stream) {
-  console.log("Switching main video feed to new track");
-  try {
-    mainStream.removeTrack(mainStream.getVideoTracks()[0]);
-    mainStream.addTrack(stream.getVideoTracks()[0]);
-  } catch(e) {
-    console.log('Failure to switch tracks: ' + e);
+function gotDescription2(desc) {
+  pc2.setLocalDescription(desc);
+  trace("Answer from pc2 \n" + desc.sdp);
+  pc1.setRemoteDescription(desc);
+}
+
+function hangup() {
+  trace("Ending call");
+  localstream.stop();
+  pc1.close();
+  pc2.close();
+  pc1 = null;
+  pc2 = null;
+  btn3.disabled = true;
+  btn1.disabled = false;
+  audio_select.disabled = false;
+  video_select.disabled = false;
+}
+
+function gotRemoteStream(e) {
+  // Call the polyfill wrapper to attach the media stream to this element.
+  attachMediaStream(vid2, e.stream);
+  trace("Received remote stream");
+}
+
+function iceCallback1(event) {
+  if (event.candidate) {
+    pc2.addIceCandidate(new RTCIceCandidate(event.candidate));
+    trace("Local ICE candidate: \n" + event.candidate.candidate);
   }
 }
 
-function getChoices() {
-  choices = MediaStreamTrack.getSourceInfos();
-  var choiceTable = document.getElementById("choices");
-  var choicelist = "";
-  choicelist += "<table border>"
-  for (i = 0; i < choices.length; i++) {
-    if (choices[i].kind === 'video') {
-      // Create a table entry for the video, with a select button.
-      // There is a cleaner way to do this in JS. Apologies.
-      choicelist += "<tr><td>";
-      choicelist += choices[i].id;
-      choicelist += "<td>";
-      choicelist += choices[i].label;
-      choicelist += '<td><button onclick="switchTo(choices[';
-      choicelist += i;
-      choicelist += '].id)">Choose</button>';
-      choicelist += "<td>"
-      if (choices[i].id === videoIdNowPlaying()) {
-        choicelist += "Playing";
-      }
-    }
+function iceCallback2(event) {
+  if (event.candidate) {
+    pc1.addIceCandidate(new RTCIceCandidate(event.candidate));
+    trace("Remote ICE candidate: \n " + event.candidate.candidate);
   }
-  choicelist += "</table>"
-  choiceTable.innerHTML = choicelist;
 }
-
-// Returns the ID of the source of the currently playing video track.
-// This function always returns a string, and logs why the right string
-// is not returned if there is a problem.
-function videoIdNowPlaying() {
-  if (!mainStream) {
-    console.log('No main stream');
-    return 'No main stream';
-  }
-  if (mainStream.getVideoTracks().length == 0) {
-    console.log('No video tracks');
-    return 'No video tracks';
-  }
-  if (!mainStream.getVideoTracks()[0].sourceId) {
-    console.log('No source ID');
-    return 'No source id';
-  }
-  return mainStream.videoTracks()[0].sourceId;
-}
-
-video = document.getElementById("vid");
-getChoices();
-
 </script>
 </body>
 </html>
-
