AdapterJS
AdapterJS copied to clipboard
No way to know if MediaStream/MediaStreamTrack ended after media device was disconnected
Hi,
I'm not sure if this is a problem of AdapterJS itself, likely it's a problem of Temasys WebRTC plugin, but I don't know where to post bugs for plugin, so will post it here.
Steps to reproduce
- Open a webpage in Safari that requires Temasys WebRTC plugin to be installed, e.g. https://getaroom.io
- Execute following code in console:
navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
// maybe add some additional condition here that you select a webcam that you can unplug
var device = devices.find(function(d) { return d.kind === 'videoinput' });
navigator.mediaDevices.getUserMedia({
video: {
deviceId: device.deviceId,
optional: [
{ sourceId: device.deviceId }
]
}
})
.then(function(stream) {
var video = document.createElement('video');
document.body.appendChild(video);
attachMediaStream(video, stream);
window.track = stream.getTracks()[0];
window.stream = stream;
console.log(window.stream.ended); // false
console.log(window.track.enabled); // true
console.log(window.track.readyState); // "live"
window.stream.onended = function() {
console.log('stream ended');
};
window.stream.addEventListener('ended', function() {
console.log('stream ended');
});
window.track.onended = function() {
console.log('track ended');
};
window.track.addEventListener('ended', function() {
console.log('track ended');
});
});
});
- Just physically unplug your selected webcam.
- Execute following code from console:
console.log(window.stream.ended); // false
console.log(window.track.enabled); // true
console.log(window.track.readyState); // "live"
Actual behavior:
There is no signs that stream or track is in ended state. track.readyState
still says "live"
. No "ended" event handlers were fired.
Expected behavior:
At least some way to discover that track/stream was ended is required. E.g. similar code in Chrome will state that track.readyState
equals to "ended"
in this case. The life-cycle and "ended" state is described in the spec: https://www.w3.org/TR/mediacapture-streams/#track-ended
Other notes:
Firefox has no readyState
property and "ended" events are not fired also, however there is a tricky way to determine that our track's device has ended or not by polling periodically for enumerateDevices()
and comparing list of current devices with device used for track by comparing "label"
+ "kind"
properties:
navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
var deviceIsPresent = !!devices.find(function (d) {
return d.kind === window.track.kind + 'input'
&& d.label === window.track.label;
});
});
In Firefox and Chrome MediaStreamTrack
's label
property is the same as label
property of device used for it (and it's according to spec - https://www.w3.org/TR/mediacapture-streams/#dom-mediastreamtrack-label). However this approach does not also work for Temasys, because for MediaStreamTrack
label property it gives some encoded strings like "jxdbKnDYyl" or "nYGJNn7So0", while for devices from enumerateDevices()
call it gives normal labels like "FaceTime HD-camera" or "Logitech C170" etc.
Hi,
Thanks for the feedback.
Personal Notes 1; this is actually in the specs : https://www.w3.org/TR/mediacapture-streams/#methods-1 Personal note 2 : kind of edge-casy, to be triaged
You can use property 'muted'. Camera Stream end, this muted value will be 'true' opossed to be 'false' you'll get muted from inner method navigator.mediadevices.getUsermedia().getVideoTracks()[0].muted.