使用js实现 同一个页面多次获取本地摄像头

可以使用WebRTC技术来实现同一个页面多次获取本地摄像头。以下是实现步骤：

1. 获取所有video元素

首先，我们需要获取所有的video元素，例如：

var videos = document.querySelectorAll('video');

2. 遍历video元素并获取摄像头流

然后，我们需要遍历所有的video元素，并为每个元素获取摄像头流。可以使用getUserMedia方法来获取摄像头流，例如：

navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
  video.srcObject = stream;
});

这里的video是一个HTMLVideoElement元素，srcObject是用于设置视频流的属性。

3. 处理错误

在获取摄像头流时可能会出现错误，例如用户拒绝了访问摄像头的请求。我们需要在错误处理程序中处理这些错误，例如：

navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
  video.srcObject = stream;
}).catch(function(error) {
  console.error(error);
});

4. 完整代码

下面是完整的实现代码：

var videos = document.querySelectorAll('video');

for (var i = 0; i < videos.length; i++) {
  navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
    videos[i].srcObject = stream;
  }).catch(function(error) {
    console.error(error);
  });
}

注意，这里使用了一个闭包来保存视频元素的索引。这是因为在for循环中使用的i变量会在异步回调函数中失效。