在谷歌浏览器上选择网络摄像头

Question

当你有多个网络摄像头时。

你可以在Chrome浏览器选择网络摄像头，进入“设置”->“内容”->“媒体”

但我想从脚本中选择摄像头。

如何通过Html5或javascript选择摄像头呢？

- whitebear

Answer 1

请查看这个链接。这是一段庞大的代码，我在这里没有粘贴它。

这是用于文档对象模型 [DOM] 的相机 API。

- Veer Shrivastav

---

链接已失效。 - Mehdi Dehghani

Answer 2

选择网络摄像头需要进行两个步骤。 第一步是列出所有设备：

<select id="video_id"></select>
<script>
navigator.getMedia = ( navigator.getUserMedia ||
                                 navigator.webkitGetUserMedia ||
                                 navigator.mozGetUserMedia ||
                                 navigator.msGetUserMedia);
navigator.mediaDevices.enumerateDevices()
          .then(function(devices) {
            devices.forEach(function(device) {
                if (device.kind == "videoinput"){
                    jQuery("#video_id").append("<option value='" + device.deviceId + "'>" + device.label + "</option>");
                }
              
            });
          });
</script>

非常简单。在mediaDevices中列出所有设备的EnumerateDevices。我使用JQuery将每个设备放入SELECT html中。现在，您拥有所有选项和所有设备，其值为每个设备的ID。

当有人选择设备时，它将触发一个函数：

 jQuery("#video_id").change(function(){
     redo_video();
 })

以上jQuery设置了当选择器(select)更改时的触发器，它将触发函数redo_video()。

 function redo_video(){
            
       constraints = {
             width: { ideal: 1280, max: 1920 },
             height: {ideal: 720, max: 1080 },
             deviceId: { exact: jQuery("#video_id").val()  }
        }
        navigator.getMedia(
        {
           video: constraints,
           audio: false
        },
        function(stream) {               
            video = document.querySelector('#video');
            if (navigator.mozGetUserMedia) {
                video.mozSrcObject = stream;
              } else {
                try {
                  video.srcObject = stream;
                    console.log(stream);
                } catch (error) {
                     video.src = window.URL.createObjectURL(stream);
                }
              }
                video.onloadedmetadata = function(e) {
                   video.play();
             };
              
        },
        function(err) {
          console.log("An error occured! " + err);
        }
    );
            
}

该函数重新启动视频播放器，并选择特定deviceId的设备（选项已选择）。

- Dinidiniz

Answer 3

你需要的一切都在这里 你需要使用html5

- Alkis Kalogeris

Answer 4

我认为你运气不好。目前在HTML5中似乎没有一种列出和选择可用音频/视频设备的方法。

- Petteri H

Answer 5

你不能仅通过脚本选择，只能通过getUsermedia API打开默认设置。

- Ashisha Nautiyal