如何使用JavaScript获取连接到计算机的摄像机列表？

x8goxv8g 于 2023-11-15 发布在 Java

关注(0)|答案(5)|浏览(141)

我想显示连接到用户计算机的摄像机列表，当他们选择一个时，在HTML5 <video>标记中显示来自该摄像机的流视频。
如何获取连接到用户计算机的摄像机列表？

来源：https://stackoverflow.com/questions/18893787/how-can-i-get-a-list-of-video-cameras-attached-in-my-computer-using-javascript

5条答案

按热度按时间

wwodge7n1#

仅适用于Chrome和Edge

<script>
     navigator.mediaDevices.enumerateDevices().then(function (devices) {
            for(var i = 0; i < devices.length; i ++){
                var device = devices[i];
                if (device.kind === 'videoinput') {
                    var option = document.createElement('option');
                    option.value = device.deviceId;
                    option.text = device.label || 'camera ' + (i + 1);
                    document.querySelector('select#videoSource').appendChild(option);
                }
            };
        });
</script>
 <select id="videoSource"></select>

字符串

赞(0）回复(0）举报 2023-11-15

yqhsw0fo2#

也许Navigator.getUserMedia()（在引擎盖下使用WebRTC）就是你要找的，尽管我没有看到任何东西可以直接告诉你哪些设备是可用的（设备列表不会暴露在你的代码中它会在请求访问可用硬件的权限时呈现给用户）。
还要注意浏览器支持：Chrome 21+，Firefox 20+，Opera 12+，不支持IE，可能还有Safari。

赞(0）回复(0）举报 2023-11-15

oipij1gg3#

试试这个

<!DOCTYPE html>
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="author" content="Victor Stan">
      <meta name="description" content="Get multiple video streams on one page. Adapted from code by Muaz Khan">

      <title>Video Camera</title>

      <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" ></script>

      <style type="text/css" media="screen">
        video {
          border:1px solid gray;
        }
      </style>
  </head>
  <body>
    <script>
      if (!MediaStreamTrack) document.body.innerHTML = '<h1>Incompatible Browser Detected. Try <strong style="color:red;">Chrome Canary</strong> instead.</h1>';

      var videoSources = [];

      MediaStreamTrack.getSources(function(media_sources) {
        console.log(media_sources);
        alert('media_sources : '+media_sources);
        media_sources.forEach(function(media_source){
          if (media_source.kind === 'video') {
            videoSources.push(media_source);
          }
        });

        getMediaSource(videoSources);
      });

      var get_and_show_media = function(id) {
        var constraints = {};
        constraints.video = {
          optional: [{ sourceId: id}]
        };

        navigator.webkitGetUserMedia(constraints, function(stream) {
          console.log('webkitGetUserMedia');
          console.log(constraints);
          console.log(stream);

          var mediaElement = document.createElement('video');
          mediaElement.src = window.URL.createObjectURL(stream);
          document.body.appendChild(mediaElement);
          mediaElement.controls = true;
          mediaElement.play();

        }, function (e) 
        {
          alert('Hii');  
          document.body.appendChild(document.createElement('hr'));
          var strong = document.createElement('strong');
          strong.innerHTML = JSON.stringify(e);
          alert('strong.innerHTML : '+strong.innerHTML);
          document.body.appendChild(strong);
        });
      };

      var getMediaSource = function(media) {
        console.log(media);
        media.forEach(function(media_source) {
          if (!media_source) return;

          if (media_source.kind === 'video') 
          {
            // add buttons for each media item
            var button = $('<input/>', {id: media_source.id, value:media_source.id, type:'submit'});
            $("body").append(button);
            // show video on click
            $(document).on("click", "#"+media_source.id, function(e){
              console.log(e);
              console.log(media_source.id);
              get_and_show_media(media_source.id);
            });
          }
        });
      }
    </script>
  </body>
</html>

字符串

赞(0）回复(0）举报 2023-11-15

piah890a4#

JavaScript无法访问您的相机以返回列表。您需要使用Flash浏览器获取相机信息并将其传递回页面的JavaScript。
编辑：给那些谁投了反对票。这些方法不会给予他一个可用相机的列表。如果是这样，请发布一个链接或代码。在当前日期，获得相机列表的唯一方法（这就是他的问题）是使用Flash（或者可能是银光，但是Flash有更广泛的安装覆盖率）。我已经编辑了我的问题，在获取 * 列表 * 和访问相机方面更具体一点。

赞(0）回复(0）举报 2023-11-15

7lrncoxx5#

await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
let devices = await navigator.mediaDevices.enumerateDevices();
devices = devices.filter((device) => device.kind == "videoinput");

字符串
devices变量是网络摄像头/视频输入设备的数组。

赞(0）回复(0）举报 2023-11-15

我来回答

如何使用JavaScript获取连接到计算机的摄像机列表？

5条答案

相关问题

热门标签

最新问答