Question

我已经在HTML 5的网页上创建了一个实时视频供稿，它可以找到，但我想知道是否可以从许多不同来源获取视频。工作原理是它使用内置的网络摄像头，从中获取视频输入并将其添加到页面的HTML中。有什么方法可以复制这个，但从另一个网络摄像头抓取视频源？（即在一页上有多个实时视频输入）

的index.html

<!Doctype html>
<head>
<title>LiveStream</title>

<link rel="stylesheet" href="css/main.css">
</head>
<body>

<div class="booth">
<video id="video" width="400" height="300" autoplay controls></video>
<canvas id="canvas" width="400" width="300">

<script src="video.js"></script>

</div>


</body>

的Video.js

(function(){

var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
video = document.getElementById('video'),
vendorUrl = window.URL || window.webkitURL;

navigator.getMedia = navigator.getUserMedia ||
                 navigator.webkitGetUserMedia ||
                 navigator.mozGetUserMedia ||
                 navigator.msGetUserMedia; 



navigator.getMedia({
    video: true,
    audio: true
}, function(stream){

    video.src = vendorUrl.createObjectURL(stream);
    video.play();
}, function(error){
//Error occured!
});

})();

我已经使用MediaDevices.enumerateDevices尝试了以下操作，但它不起作用！

    (function(){

var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
video = document.getElementById('video'),
vendorUrl = window.URL || window.webkitURL;

navigator.getMedia = navigator.getUserMedia ||
                 navigator.webkitGetUserMedia ||
                 navigator.mozGetUserMedia ||
                 navigator.msGetUserMedia ||
                 navigator.mediaDevices.enumerateDevices()

.then(function(devices) {
  devices.forEach(function(device) {

var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
video = document.getElementById('video'),
vendorUrl = window.URL || window.webkitURL;

   });
}) 



navigator.getMedia({
    video: true,
    audio: true
}, function(stream){

    video.src = vendorUrl.createObjectURL(stream);
    video.play();
}, function(error){
//Error occured!
});

}
)();

Answer 1

重要提示
以下代码尚未在实际条件下进行测试我的计算机只连接了一个网络摄像头，在某些系统上可能会失败！

您只需要再次拨打getUserMedia，然后在提示中选择其他设备在某些实现中可能有某种方式使用视频约束来选择设备，但我认为它不再是_{仍处于草案}规范中。

这是一种使用按钮的方法，每次都会创建一个带有新流的新视频元素：

(function() {
  // We declare once what our video elements should look like
  var video = document.createElement('video');
  video.width = 400;
  video.height = 300;
  video.autoplay = true;
  video.controls = true;
  // Where will those be appended in doc
  var container = document.querySelector('.booth'),
    butt = document.querySelector('button'),
    vendorUrl = window.URL || window.webkitURL;

  navigator.getMedia = navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia ||
    navigator.msGetUserMedia;


  function requestCam() {
      navigator.getMedia({
        video: true,
        audio: true
      }, function(stream) {
        // clone our model video
        var videoEl = video.cloneNode(true);
        container.appendChild(videoEl);

        // wait for the stream has been loaded in the video (kind of useless with autoplay = true)
        videoEl.onloadedmetadata = function() {
          this.play();
        };
        videoEl.src = vendorUrl.createObjectURL(stream);
      }, function(error) {
        console.log(error);
      });
    }
    // attach the function to the button
  butt.addEventListener('click', requestCam, false);
})();

button {
  position: absolute;
}

<div class="booth">
  <button>Add a new stream</button>
</div>

Fiddle for chrome阻止了stack-snippet®getUserMedia()请求

为避免使用按钮，您可以将来电链接到requestCam，但在最后一个被批准或拒绝后，您必须拨打电话。

一种方法是将其插入getUserMedia()的回调中;但您可能需要添加一些计数器以避免无限的调用链。

(function() {
  var video = document.createElement('video');
  video.width = 400;
  video.height = 300;
  video.autoplay = true;
  video.controls = true;
  var container = document.querySelector('.booth'),
    vendorUrl = window.URL || window.webkitURL;

  navigator.getMedia = navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia ||
    navigator.msGetUserMedia;

  var maxVideos = 3;
  
  function requestCam(count) {
      // we made it ? stop right now.
      if(count >= maxVideos) return;
    
      navigator.getMedia({
        video: true,
        audio: true
      }, function(stream) {
        
        var videoEl = video.cloneNode(true);
        container.appendChild(videoEl);
        videoEl.onloadedmetadata = function() {this.play();};
        videoEl.src = vendorUrl.createObjectURL(stream);
        // increment our counter
        requestCam(++count);
      }, function(error) {
        console.log(error);
      });
    }
   // make our first call with count=0
   requestCam(0);
})();

<div class="booth">
</div>

Fiddle for chrome

来自多个来源的HTML 5直播视频

1 个答案: