个人中心
gpt4 book ai didi

webcam - 我如何检测连接到系统的多个网络摄像头并一次选择一个特定的摄像头？

转载 作者：行者123 更新时间：2023-12-04 18:06:05 30 4
gpt4 key购买 nike

我正在尝试在 Web 应用程序上使用两个摄像头。我的要求是从浏览器中检测这些摄像头，并一次选择一个摄像头来捕获图像并将其显示在网页中。这可能就像我们正在显示两个按钮，通过点击一个按钮 camera1 将被检测并捕获图像，当用户按下另一个按钮时，第二个相机将用于捕获图像。

我需要使用 HTML5 和 JavaScript 来实现这一点。我已经有了一些引用并尝试了 navigator.webkitGetUserMedia() 和 MediaStreamTrack.getSources() 但我在使用 MediaStreamTrack.getSources() 时遇到脚本错误。 错误:“无法在‘MediaStreamTrack’上执行‘getSources’:功能尚未实现”。

目前浏览器能够显示摄像头，用户需要在页面加载时选择摄像头，我们可以通过编程方式实现吗？

这是代码的链接:http://jsfiddle.net/xL8wzzx2/ 

<!DOCTYPE html>
<body>
<video id="video" autoplay></video>
<button id="snap">Capture</button>
<button id="new">New</button>
<canvas id="canvas" width="640" height="480"></canvas>
<button id="upload">Upload</button>
</body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1 /jquery.min.js"></script>
<script>

// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.

var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
   console.log("Video capture error: ", error.code); 
};


/* < Error: TypeError: MediaStreamTrack.getSources is not a function >*/

MediaStreamTrack.getSources(function(sources){
  var cams = _.filter(sources, function(e){ //only return video elements 
  return e.kind === 'video';
  });
  var camIds = _.map(cams, function (e) { // return only ids
    return e.id;
 });
});

// </Error  >If the above block is removed, then it is working properly.




// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
} else if(navigator.mozGetUserMedia) { // WebKit-prefixed
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
// Littel effects
$('#video').fadeOut('slow');
$('#canvas').fadeIn('slow');
$('#snap').hide();
$('#new').show();
// Allso show upload button
//$('#upload').show();
});
// Capture New Photo
document.getElementById("new").addEventListener("click", function() {
$('#video').fadeIn('slow');
$('#canvas').fadeOut('slow');
$('#snap').show();
$('#new').hide();
});
// Upload image to sever 
document.getElementById("upload").addEventListener("click", function(){
var dataUrl = canvas.toDataURL();
$.ajax({
type: "POST",
url: "camsave.php",
data: { 
imgBase64: dataUrl
}
}).done(function(msg) {
console.log('saved');
// Do Any thing you want
});
});
}, false);


// Upload image to sever 
document.getElementById("upload").addEventListener("click", function(){
var dataUrl = canvas.toDataURL();
$.ajax({
type: "POST",
url: "camsave.php",
data: { 
imgBase64: dataUrl
}
}).done(function(msg) {
console.log('saved');
// Do Any thing you want
});
});


</script>

谢谢。

最佳答案

您可以在 chrome 中检测多个摄像头(就像现在一样)。这是在名为 getSources() 的 js 函数的帮助下完成的。您可以为此使用以下代码:

function gotSources(sourceInfos) {
  var cam_count = 1;
  for (var i = 0; i != sourceInfos.length; ++i) {
    var sourceInfo = sourceInfos[i];
    if (sourceInfo.kind == 'video') {
      opt_text = "camera" + cam_count;
      cam_count++;
      $("#sel_src").append(new Option(opt_text, sourceInfo.id));
    }
  }
}

function set_cam() {
    var camera_id = document.getElementById("sel_src").value;
    $.post("assign_cam.php", {
        cam_id: camera_id,
        cam_number: cam_no
      },
      function(data, status) {
        alert(data);
      }
    );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="sel_src_list" style="color:white">
  <br>Capture Image :
  <select id="sel_src" name="sel_src1"></select>&nbsp;&nbsp;&nbsp;
  <input type="button" id="cam1" name="cam1" onclick="set_cam()" value="Assign">
</div>
<div style="color:white" id="src_list"></div>
<script>
  navigator.getUserMedia = navigator.getUserMedia ||
    navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

  if (typeof MediaStreamTrack === 'undefined') {
    alert('This browser does not support MediaStreamTrack.\n\nTry Chrome Canary.');
  } else {
    MediaStreamTrack.getSources(gotSources);
  }
</script>

要查看它是否正常工作，您应该将多个摄像头连接到您的 PC，并且应该安装 chrome 浏览器(最新版本)。您必须将这些相机 ID 存储在一个页面中，并在另一个页面中将其用于应该用于捕获图像的按钮。为此，您可以使用以下查询:

  function show_cam2(cam_src_id) {
    $('#video').fadeOut('slow');
    $('#canvas').fadeOut('slow');
    $('#video2').fadeIn('slow');
    $('#canvas').fadeIn('slow');
    // Grab elements, create settings, etc.
    var canvas = document.getElementById("canvas2"),
      context = canvas.getContext("2d"),
      video = document.getElementById("video2"),
      videoObj = {
        "video": true
      },
      errBack = function(error) {
        console.log("Video capture error: ", error.code);
      };



    var constraints = {
      video: {
        optional: [{
          sourceId: cam_src_id
        }]
      }
    };




    // Put video listeners into place
    if (navigator.getUserMedia) { // Standard
      navigator.getUserMedia(constraints, function(stream) {
        video.src = stream;
        video.play();
      }, errBack);
    } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
      navigator.webkitGetUserMedia(constraints, function(stream) {
        video.src = window.webkitURL.createObjectURL(stream);
        video.play();
      }, errBack);
    } else if (navigator.mozGetUserMedia) { // WebKit-prefixed
      navigator.mozGetUserMedia(constraints, function(stream) {
        video.src = window.URL.createObjectURL(stream);
        video.play();
      }, errBack);
    }
    // Trigger photo take
    document.getElementById("snap2").addEventListener("click", function() {
      context.drawImage(video, 0, 0, 640, 480);
      // Littel effects
      $('#video2').fadeOut('slow');
      $('#canvas2').fadeIn('slow');
      $('#snap2').hide();
      $('#new2').show();
    });
    // Capture New Photo
    document.getElementById("new2").addEventListener("click", function() {
      $('#video2').fadeIn('slow');
      $('#canvas2').fadeOut('slow');
      $('#snap2').show();
      $('#new2').hide();
    });
    // Upload image to sever 
    document.getElementById("upload2").addEventListener("click", function() {
      var dataUrl = canvas.toDataURL();
      $.ajax({
        type: "POST",
        url: "camsave.php",
        data: {
          imgBase64: dataUrl
        }
      }).done(function(msg) {
        console.log('saved');
        // Do Any thing you want
      });
    });
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table border=1>
  <tr>
    <td>
      <video id="video" width="320" height="240" autoplay></video>
    </td>
    <td>
      <button id="snap">Capture</button>
    </td>
    <td>
      <button id="new">New</button>
    </td>
    <td>
      <canvas id="canvas" width="320" height="240"></canvas>
    </td>
    <td>
      <button id="upload">Upload</button>
    </td>
    <td>
      <input type="button" onclick=show_cam( '< device #1>') value="capture_image">
    </td>
  </tr>
  <tr>
    <td>
      <video id="video2" width="320" height="240" autoplay></video>
    </td>
    <td>
      <button id="snap2">Capture2</button>
    </td>
    <td>
      <button id="new2">New2</button>
    </td>
    <td>
      <canvas id="canvas2" width="320" height="240"></canvas>
    </td>
    <td>
      <button id="upload2">Upload2</button>
    </td>
    <td>
      <input type="button" onclick=show_cam2( '< device #1>') value="capture_image_2">
    </td>

  </tr>
</table>
<script>
  // Put event listeners into place
  //window.addEventListener("DOMContentLoaded", function() {
  function show_cam(cam_src_id) {
      $('#video2').fadeOut('slow');
      $('#canvas2').fadeOut('slow');
      $('#video').fadeIn('slow');
      $('#canvas').fadeIn('slow');
      // Grab elements, create settings, etc.
      var canvas = document.getElementById("canvas"),
        context = canvas.getContext("2d"),
        video = document.getElementById("video"),
        videoObj = {
          "video": true
        },
        errBack = function(error) {
          console.log("Video capture error: ", error.code);
        };


      var constraints = {
        video: {
          optional: [{
            sourceId: cam_src_id
          }]
        }
      };
      // navigator.getUserMedia(constraints, successCallback, errorCallback);



      // Put video listeners into place
      if (navigator.getUserMedia) { // Standard
        navigator.getUserMedia(constraints, function(stream) {
          video.src = stream;
          video.play();
        }, errBack);
      } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
        navigator.webkitGetUserMedia(constraints, function(stream) {
          video.src = window.webkitURL.createObjectURL(stream);
          video.play();
        }, errBack);
      } else if (navigator.mozGetUserMedia) { // WebKit-prefixed
        navigator.mozGetUserMedia(constraints, function(stream) {
          video.src = window.URL.createObjectURL(stream);
          video.play();
        }, errBack);
      }
      // Trigger photo take
      document.getElementById("snap").addEventListener("click", function() {
        context.drawImage(video, 0, 0, 640, 480);
        // Littel effects
        $('#video').fadeOut('slow');
        $('#canvas').fadeIn('slow');
        $('#snap').hide();
        $('#new').show();
        // Allso show upload button
        //$('#upload').show();
      });
      // Capture New Photo
      document.getElementById("new").addEventListener("click", function() {
        $('#video').fadeIn('slow');
        $('#canvas').fadeOut('slow');
        $('#snap').show();
        $('#new').hide();
      });
      // Upload image to sever 
      document.getElementById("upload").addEventListener("click", function() {
        var dataUrl = canvas.toDataURL();
        $.ajax({
          type: "POST",
          url: "camsave.php",
          data: {
            imgBase64: dataUrl
          }
        }).done(function(msg) {
          console.log('saved');
          // Do Any thing you want
        });
      });
    }
    //}, false);
</script>

关于webcam - 我如何检测连接到系统的多个网络摄像头并一次选择一个特定的摄像头？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26489743/

30 4 0
文章推荐： nginx - 替换来自代理的压缩响应中的文本
文章推荐： maven - 如何从 Maven 依赖项生成 JBoss jboss-deployment-structure
文章推荐： 不需要 PHP FILTER_VALIDATE_URL TLD
文章推荐： string - Clojure:每隔 x 个字符将空格插入字符串
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com