Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

make gum demos use adapter.js and attachMediaStream #517

Merged
merged 12 commits into from Jun 22, 2015
Merged

make gum demos use adapter.js and attachMediaStream #517

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
5dcd60b
make gum demos use adapter.js and attachMediaStream
fippo Jun 5, 2015
2ca6cd3
fix variable name
fippo Jun 5, 2015
5cdf4aa
request video in gum
fippo Jun 5, 2015
96e00d1
adapter-ify all the getusermedia things
fippo Jun 7, 2015
6f17546
stop all tracks instead of calling ms.stop()
fippo Jun 12, 2015
ea1590c
make grunt happy
fippo Jun 12, 2015
9bf89c9
remove check for number of audio/video tracks
fippo Jun 13, 2015
789ff83
GUM is shimmed by adapter
fippo Jun 13, 2015
e243b8a
Merge remote-tracking branch 'upstream/master' into harmonize-demos
fippo Jun 19, 2015
2f1240b
use document.querySelector
fippo Jun 19, 2015
18c07e5
edge is supported as well (for getUserMedia)
fippo Jun 15, 2015
d4c4808
bump adapter to 1db82d714bdddf05b881657282e8445a36b10ad5
fippo Jun 19, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/content/getusermedia/audio/index.html
View file
Open in desktop
Expand Up @@ -34,7 +34,7 @@

<h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC samples</a> <span>getUserMedia, audio only</span></h1>

<audio controls autoplay></audio>
<audio id="gum-local" controls autoplay></audio>

<p>Render the audio stream from an audio-only <code>getUserMedia()</code> call with an audio element.</p>

Expand All @@ -44,6 +44,7 @@ <h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC

</div>

<script src="../../../js/adapter.js"></script>
<script src="js/main.js"></script>

<script src="../../../js/lib/ga.js"></script>
Expand Down
23 changes: 7 additions & 16 deletions src/content/getusermedia/audio/js/main.js
View file
Open in desktop
Expand Up @@ -9,30 +9,21 @@
'use strict';

// Put variables in global scope to make them available to the browser console.
var audio = window.audio = document.querySelector('audio');
var audio = document.getElementById('gum-local');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think querySelector is the recommended way of doing this (@samdutton)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think if you need to use querySelector() once, it's neater and slightly more understandable to use it for everything.

getElementById() is quicker, but that's not an issue here.

Don't feel very strongly though.

var constraints = window.constraints = {
audio: true,
video: false
};
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

function successCallback(stream) {
var videoTracks = stream.getVideoTracks();
var audioTracks = stream.getAudioTracks();
if (audioTracks.length === 1 && videoTracks.length === 0) {
console.log('Got stream with constraints:', constraints);
console.log('Using audio device: ' + audioTracks[0].label);
stream.onended = function() {
console.log('Stream ended');
};
}
console.log('Got stream with constraints:', constraints);
console.log('Using audio device: ' + audioTracks[0].label);
stream.onended = function() {
console.log('Stream ended');
};
window.stream = stream; // make variable available to browser console
if (window.URL) {
audio.src = window.URL.createObjectURL(stream);
} else {
audio.src = stream;
}
attachMediaStream(audio, stream);
}

function errorCallback(error) {
Expand Down
1 change: 1 addition & 0 deletions src/content/getusermedia/canvas/index.html
View file
Open in desktop
Expand Up @@ -46,6 +46,7 @@ <h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC

</div>

<script src="../../../js/adapter.js"></script>
<script src="js/main.js"></script>
<script src="../../../js/lib/ga.js"></script>

Expand Down
9 changes: 1 addition & 8 deletions src/content/getusermedia/canvas/js/main.js
View file
Open in desktop
Expand Up @@ -21,21 +21,14 @@ button.onclick = function() {

var video = document.querySelector('video');

navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

var constraints = {
audio: false,
video: true
};

function successCallback(stream) {
window.stream = stream; // make stream available to browser console
if (window.URL) {
video.src = window.URL.createObjectURL(stream);
} else {
video.src = stream;
}
attachMediaStream(video, stream);
}

function errorCallback(error) {
Expand Down
1 change: 1 addition & 0 deletions src/content/getusermedia/filter/index.html
View file
Open in desktop
Expand Up @@ -66,6 +66,7 @@ <h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC
<a href="https://github.com/webrtc/samples/tree/gh-pages/src/content/getusermedia/filter" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>
</div>

<script src="../../../js/adapter.js"></script>
<script src="js/main.js"></script>

<script src="../../../js/lib/ga.js"></script>
Expand Down
9 changes: 1 addition & 8 deletions src/content/getusermedia/filter/js/main.js
View file
Open in desktop
Expand Up @@ -30,21 +30,14 @@ filterButton.onclick = function() {
canvas.className = filters[newIndex];
};

navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

var constraints = {
audio: false,
video: true
};

function successCallback(stream) {
window.stream = stream; // make stream available to browser console
if (window.URL) {
video.src = window.URL.createObjectURL(stream);
} else {
video.src = stream;
}
attachMediaStream(video, stream);
}

function errorCallback(error) {
Expand Down
1 change: 1 addition & 0 deletions src/content/getusermedia/gum/index.html
View file
Open in desktop
Expand Up @@ -43,6 +43,7 @@ <h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC
<a href="https://github.com/webrtc/samples/tree/gh-pages/src/content/getusermedia/gum" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>
</div>

<script src="../../../js/adapter.js"></script>
<script src="js/main.js"></script>

<script src="../../../js/lib/ga.js"></script>
Expand Down
23 changes: 11 additions & 12 deletions src/content/getusermedia/gum/js/main.js
View file
Open in desktop
Expand Up @@ -8,23 +8,22 @@

'use strict';

// variables in global scope so available to console
var video = document.querySelector('video');
var constraints = {
// Put variables in global scope to make them available to the browser console.
var video = document.getElementById('gum-local');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here: I prefer querySelector() in these examples, with the element name for clarity (though I think csslint may complain, because of the performance hit, though that's not relevant here).

var constraints = window.constraints = {
audio: false,
video: true
};

navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

function successCallback(stream) {
window.stream = stream; // stream available to console
if (window.URL) {
video.src = window.URL.createObjectURL(stream);
} else {
video.src = stream;
}
var videoTracks = stream.getVideoTracks();
console.log('Got stream with constraints:', constraints);
console.log('Using video device: ' + videoTracks[0].label);
stream.onended = function() {
console.log('Stream ended');
};
window.stream = stream; // make variable available to browser console
attachMediaStream(video, stream);
}

function errorCallback(error) {
Expand Down
6 changes: 2 additions & 4 deletions src/content/getusermedia/resolution/js/main.js
View file
Open in desktop
Expand Up @@ -77,9 +77,6 @@ var fullHdConstraints = {
}
};

navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

function successCallback(stream) {
window.stream = stream; // stream available to console
video.src = window.URL.createObjectURL(stream);
Expand All @@ -103,7 +100,8 @@ video.onplay = function() {
function getMedia(constraints) {
if (stream) {
video.src = null;
stream.stop();
stream.getAudioTracks().forEach(function(track) { track.stop(); });
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

possible helper function for adapter? seems like this will be used in multiple places

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc-ing @alvestrand
one of the other things I noticed (here and in https://github.com/MicrosoftEdge/Demos/pull/68) is that we might also need a way to shim to deattach a stream from an element. Possibly attachMediaStream with a null stream.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@fippo, maybe create an issue in the adapter repo for that? Then bump adapter.js in a separate PR.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@juberti, filed https://github.com/webrtc/adapter/issues/58 for adding a helper function for stopping all tracks, all video and all audio tracks.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done (for both issues)

stream.getVideoTracks().forEach(function(track) { track.stop(); });
}
navigator.getUserMedia(constraints, successCallback, errorCallback);
}
1 change: 1 addition & 0 deletions src/content/getusermedia/source/index.html
View file
Open in desktop
Expand Up @@ -58,6 +58,7 @@ <h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC
<a href="https://github.com/webrtc/samples/tree/gh-pages/src/content/getusermedia/source" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>
</div>

<script src="../../../js/adapter.js"></script>
<script src="js/main.js"></script>

<script src="../../../js/lib/ga.js"></script>
Expand Down
8 changes: 3 additions & 5 deletions src/content/getusermedia/source/js/main.js
View file
Open in desktop
Expand Up @@ -12,9 +12,6 @@ var videoElement = document.querySelector('video');
var audioSelect = document.querySelector('select#audioSource');
var videoSelect = document.querySelector('select#videoSource');

navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

function gotSources(sourceInfos) {
for (var i = 0; i !== sourceInfos.length; ++i) {
var sourceInfo = sourceInfos[i];
Expand All @@ -41,7 +38,7 @@ if (typeof MediaStreamTrack === 'undefined') {

function successCallback(stream) {
window.stream = stream; // make stream available to console
videoElement.src = window.URL.createObjectURL(stream);
attachMediaStream(videoElement, stream);
}

function errorCallback(error) {
Expand All @@ -51,7 +48,8 @@ function errorCallback(error) {
function start() {
if (window.stream) {
videoElement.src = null;
window.stream.stop();
window.stream.getAudioTracks().forEach(function(track) { track.stop(); });
window.stream.getVideoTracks().forEach(function(track) { track.stop(); });
}
var audioSource = audioSelect.value;
var videoSource = videoSelect.value;
Expand Down
1 change: 1 addition & 0 deletions src/content/getusermedia/volume/index.html
View file
Open in desktop
Expand Up @@ -64,6 +64,7 @@ <h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC
</div>


<script src="../../../js/adapter.js"></script>
<script src="js/soundmeter.js"></script>
<script src="js/main.js"></script>

Expand Down
3 changes: 0 additions & 3 deletions src/content/getusermedia/volume/js/main.js
View file
Open in desktop
Expand Up @@ -31,9 +31,6 @@ var constraints = window.constraints = {
video: false
};

navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

function successCallback(stream) {
// Put variables in global scope to make them available to the browser console.
window.stream = stream;
Expand Down