如何为webrtc选择输入视频设备？

我正在学习webRTC应用程序

我的参考是这个软件

阿普尔茨

演示

我的电脑有内置视频设备，APPTC使用该视频设备。 但是我想用USB摄像机代替

我正在搜索更改输入视频设备的方法。 但我在源文件中找不到任何线索

有人有关于Chrome的信息吗？

：

在Firefox上：media.navigator.permission.disabled=false

---

事实证明，Chrome确实支持MediaStreamTrack API，它允许您这样做。在Firefox中，这仍然是实验性的。以下是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);

---

尝试捕获所有音频/视频输入设备的演示：

您可以使用相同的API捕获任何特定设备

2014年3月1日编辑：

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);
    }
});

以下是如何使用上述可重复使用的跨浏览器垫片：

---

听起来你在寻找facingMode。您可以在此文档中查看它：

---

不过，还不确定它的支持程度。

一般来说，当您第一次加载页面并请求您使用设备的权限时，您可以从下拉菜单中选择要使用的设备。你没有这个选择吗？您使用的浏览器是什么？要从javascript执行此操作，请回答：我可以问您Chrome的版本吗，我的版本是24.0.1312.57。但是我的浏览器没有麦克风，摄像头选择选项卡位于“媒体”对不起，是Chrome canary。在chrome stable上，我找不到这样的选项。但是，当网页试图访问相机时，我仍然可以从通知栏中选择相机。我可以按照您所说的找到设备选择菜单。它解决了问题，谢谢Muaz！！我最初认为它是可以通过脚本控制的。这是一个有点令人失望的WebRTC设计。在移动设备上呢？我在chrome mobile vanilla Android 4.3中找不到此菜单，据我所知，chrome 28在任何浏览器上都不受支持，但已计划实施。更新：facingMode自26日起在Firefox for Android中可用，现在在polyfill for chrome for Android中可用。请参阅中的演示。嘿，穆兹，我认为您需要关闭getMediaDevices。看起来每次捕获的麦克风都是相同的，您可以分辨出来，因为所有麦克风的索引都与阵列中的最后一个索引相同。希望这有帮助。此外，为了更好地解决堆栈溢出问题，您应该真正编辑此内容，并将代码包含在文章正文中。如果你的链接断了，这个答案对未来的访问者来说是无用的。希望这有帮助。谢谢你的编辑和你优秀的，有用的演示！MediaStreamTrack.getSources的工作方式正是我所希望的+1@Muaz可汗。当我遵循上述方法时，会出现以下错误：未能在“MediaStreamTrack”上执行“getSources”：未能在“MediaStreamTrack”上执行“getSources”：功能尚未实现。这是否意味着它还没有实现？很可能你正在android上使用chrome测试版；或者您正在使用Firefox或chrome M30或更早版本。据我所知，这些API在chromium中是受支持的。也许你启用了：chrome://flags/disable-device-enumeration 默认情况下，此标志被禁用。@Chiwda感谢提醒-我已经有一段时间没有看这个示例了。会修好的！使用新的API/方法/语法进行演示。

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);
    }
});

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
            });
        }
    });
}

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);
});