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
This commit is contained in:
vikasmarwaha@webrtc.org
parent
b74b96f487
commit
19134bae95
@ -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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user