tutorial - ¿Cómo elegir el dispositivo de entrada de video para webrtc?
webrtc video streaming (4)
Estoy estudiando la aplicación webRTC.
Mi referencia es este software
apprtc https://code.google.com/p/webrtc/source/browse/trunk/samples/js/apprtc/
demostración https://apprtc.appspot.com/
Mi computadora tiene un dispositivo de video integrado y apprtc usa este dispositivo de video. Sin embargo quiero usar cámara de video USB en su lugar.
Estoy buscando la manera de cambiar los dispositivos de entrada de video. Pero no pude encontrar ninguna pista en los archivos de origen.
¿Alguien tiene información?
Me parece que estás buscando facingMode . Puede verlo en este documento: http://www.w3.org/TR/2013/WD-mediacapture-streams-20130516/#idl-def-AllVideoCapabilities
Aunque no estoy seguro de qué tan bien está soportado.
Pruebe esta demostración que está capturando todos los dispositivos de entrada de audio / video:
https://www.webrtc-experiment.com/demos/MediaStreamTrack.getSources.html
Puedes capturar cualquier dispositivo "específico" usando la misma API.
Editado el 01 de marzo de 2014:
MediaStreamTrack.getSources(function (media_sources) {
for (var i = 0; i < media_sources.length; i++) {
var media_source = media_sources[i];
var constraints = {};
// if audio device
if (media_source.kind == ''audio'') {
constraints.audio = {
optional: [{
sourceId: media_source.id
}]
};
}
// if video device
if (media_source.kind == ''video'') {
constraints.video = {
optional: [{
sourceId: media_source.id
}]
};
}
// invoke getUserMedia to capture this device
navigator.webkitGetUserMedia(constraints, function (stream) {
console.log(stream.id, stream);
}, console.error);
}
});
Actualizado el 5 de septiembre de 2015:
Ahora Microsoft Edge, Chrome 44+, Firefox 38+, todos estos navegadores son compatibles con la API navigator.mediaDevices.enumerateDevices .
Aquí hay una secuencia de comandos reutilizable que proporciona compatibilidad entre varios navegadores para todas estas API de fuentes de medios. Funcionará incluso en chrome antiguo (43 y más) (incluso en dispositivos Android):
if (navigator.mediaDevices && navigator.mediaDevices.enumerateDevices) {
// Firefox 38+, Microsoft Edge, and Chrome 44+ seems having support of enumerateDevices
navigator.enumerateDevices = function(callback) {
navigator.mediaDevices.enumerateDevices().then(callback);
};
}
function getAllAudioVideoDevices(successCallback, failureCallback) {
if (!navigator.enumerateDevices && window.MediaStreamTrack && window.MediaStreamTrack.getSources) {
navigator.enumerateDevices = window.MediaStreamTrack.getSources.bind(window.MediaStreamTrack);
}
if (!navigator.enumerateDevices && navigator.mediaDevices.enumerateDevices) {
navigator.enumerateDevices = navigator.mediaDevices.enumerateDevices.bind(navigator);
}
if (!navigator.enumerateDevices) {
failureCallback(null, ''Neither navigator.mediaDevices.enumerateDevices NOR MediaStreamTrack.getSources are available.'');
return;
}
var allMdiaDevices = [];
var allAudioDevices = [];
var allVideoDevices = [];
var audioInputDevices = [];
var audioOutputDevices = [];
var videoInputDevices = [];
var videoOutputDevices = [];
navigator.enumerateDevices(function(devices) {
devices.forEach(function(_device) {
var device = {};
for (var d in _device) {
device[d] = _device[d];
}
// make sure that we are not fetching duplicate devics
var skip;
allMdiaDevices.forEach(function(d) {
if (d.id === device.id) {
skip = true;
}
});
if (skip) {
return;
}
// if it is MediaStreamTrack.getSources
if (device.kind === ''audio'') {
device.kind = ''audioinput'';
}
if (device.kind === ''video'') {
device.kind = ''videoinput'';
}
if (!device.deviceId) {
device.deviceId = device.id;
}
if (!device.id) {
device.id = device.deviceId;
}
if (!device.label) {
device.label = ''Please invoke getUserMedia once.'';
}
if (device.kind === ''audioinput'' || device.kind === ''audio'') {
audioInputDevices.push(device);
}
if (device.kind === ''audiooutput'') {
audioOutputDevices.push(device);
}
if (device.kind === ''videoinput'' || device.kind === ''video'') {
videoInputDevices.push(device);
}
if (device.kind.indexOf(''audio'') !== -1) {
allAudioDevices.push(device);
}
if (device.kind.indexOf(''video'') !== -1) {
allVideoDevices.push(device);
}
// there is no ''videoouput'' in the spec.
// so videoOutputDevices will always be [empty]
allMdiaDevices.push(device);
});
if (successCallback) {
successCallback({
allMdiaDevices: allMdiaDevices,
allVideoDevices: allVideoDevices,
allAudioDevices: allAudioDevices,
videoInputDevices: videoInputDevices,
audioInputDevices: audioInputDevices,
audioOutputDevices: audioOutputDevices
});
}
});
}
Aquí le indicamos cómo usar el calzo de navegador cruzado reutilizable anterior:
getAllAudioVideoDevices(function(result) {
if (result.allMdiaDevices.length) {
console.debug(''Number of audio/video devices available:'', result.allMdiaDevices.length);
}
if (result.allVideoDevices.length) {
console.debug(''Number of video devices available:'', result.allVideoDevices.length);
}
if (result.allAudioDevices.length) {
console.debug(''Number of audio devices available:'', result.allAudioDevices.length);
}
if (result.videoInputDevices.length) {
console.debug(''Number of video-input devices available:'', result.videoInputDevices.length);
}
if (result.audioInputDevices.length) {
console.debug(''Number of audio-input devices available:'', result.audioInputDevices.length);
}
if (result.audioOutputDevices.length) {
console.debug(''Number of audio-output devices available:'', result.audioOutputDevices.length);
}
if (result.allMdiaDevices.length && result.allMdiaDevices[0].label === ''Please invoke getUserMedia once.'') {
console.warn(''It seems you did not invoke navigator-getUserMedia before using these API.'');
}
console.info(''All audio input devices:'');
result.audioInputDevices.forEach(function(device) {
console.log(''Audio input device id:'', device.id, ''Device label:'', device.label);
});
console.info(''All audio output devices:'');
result.audioOutputDevices.forEach(function(device) {
console.log(''Audio output device id:'', device.id, ''Device label:'', device.label);
});
console.info(''All video input devices:'');
result.videoInputDevices.forEach(function(device) {
console.log(''Video input device id:'', device.id, ''Device label:'', device.label);
});
}, function(error) {
alert(error);
});
Resulta que Chrome es compatible con la API MediaStreamTrack que le permite hacer esto. En Firefox esta API sigue siendo experimental. Aquí está la implementación de Chrome:
if (typeof MediaStreamTrack === ''undefined''){
alert(''This browser does not support MediaStreamTrack./n/nTry Chrome Canary.'');
} else {
MediaStreamTrack.getSources( onSourcesAcquired);
}
function onSourcesAcquired(sources) {
for (var i = 0; i != sources.length; ++i) {
var source = sources[i];
// source.id -> DEVICE ID
// source.label -> DEVICE NAME
// source.kind = "audio" OR "video"
// TODO: add this to some datastructure of yours or a selection dialog
}
}
....
And then when calling getUserMedia, specify the id in the constraints:
var constraints = {
audio: {
optional: [{sourceId: selected_audio_source_id}]
},
video: {
optional: [{sourceId: selected_video_source_id}]
}
};
navigator.getUserMedia(constraints, onSuccessCallback, onErrorCallback);
