Question

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

我需要使用HTML5和JavaScript来实现这一目标。我已经有一些参考并尝试了navigator.webkitGetUserMedia（）和MediaStreamTrack.getSources（）但我使用MediaStreamTrack.getSources（）获取脚本错误。错误：＆＃34; 无法执行＆＃39; getSources＆＃39; on＆＃39; MediaStreamTrack＆＃39;：功能尚未实现＆＃34; 。

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

以下是代码的链接：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>

谢谢。

Answer 1

您可以在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>

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

1 个答案: