是否可以在一个或多个摄像头的Html页面上嵌入两个摄像头流。 [英] Is it possible to embed two webcam streams on one Html page from one or more cameras.
问题描述
我用来获取用户从本网站获得的媒体脚本 https://www.kirupa.com/html5/accessing_your_webcam_in_html5.htm
它可以正常工作，但是当我尝试在同一页面上制作两个不同的视频流时，它无法正常工作。
我尝试过制作一个带有网格的div标签，并在每个单元中放入一个视频元素。这只会导致一个流。
这是我最近的尝试
< pre-class =snippet-code-html lang-html prettyprint-override< ;！DOCTYPE html>< html>< head> < meta charset =utf-8> < meta content =stuff，to，help，search，engines，notname =keywords> < meta content =这个网页是关于什么的。 NAME = 描述 > < meta content =Display Webcam Streamname =title> < title> Display Webcam Stream< / title> <风格> #container {margin：0px auto;宽度：500px;身高：375px;边框：10px＃333固体; } #videoElement {width：500px;身高：375px;背景颜色：＃666; }＃container2 {margin：0px auto;宽度：500px;身高：375px;边框：10px＃333固体; }＃videoElement2 {width：500px;身高：375px;背景颜色：＃666; }< / style>< / head>< body style => < div id =container> < video autoplay id =videoElement> < /视频> < / DIV> < div id =container2> < video2 autoplay =trueid =videoElement2> < / VIDEO2> < / DIV> <脚本> var video = document.querySelector（＃videoElement）; navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;如果（navigator.getUserMedia）{navigator.getUserMedia（{video：true}，handleVideo，videoError）; } function handleVideo（stream）{video.src = window.URL.createObjectURL（stream）; } function videoError（e）{// do something}< / script>< / body>< / html>
感谢任何帮助。
谢谢。
您告诉视频元素通过设置它的 src 属性
基本上你需要复制所有支持 videoElement 的代码，而不仅仅是它的创建。
会碰到许多浏览器在同时调用 getUserMedia 两次（在前一次异步调用完成之前）时都皱眉，因为这会一次覆盖用户多个提示。为了解决这个问题，把第二个调用放在 handleVideo 中的 getUserMedia 中，这样只会在一个提示符下打扰用户时间。
第三个问题是，只有Firefox在权限提示中有内置的设备选择，所以在Chrome上你会得到相同的相机两次。
为了在其他浏览器上工作，您需要 enumerateDevices 。我在在之前回答了这个问题。
最后，最聪明的手机受硬件限制，无法一次运行两台相机。
Im trying to Embed two webcam streams on one HTML page.
I am use to a get user media script that I got from this site https://www.kirupa.com/html5/accessing_your_webcam_in_html5.htm
It works fine for one steam but when I try to make two different video streams on the same page it doesn't work.
I have tried making a div tag with a grid in it and putting one video element in each cell. This results in only one stream.
Here is my most recent try
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="stuff, to, help, search, engines, not" name="keywords">
<meta content="What this page is about." name="description">
<meta content="Display Webcam Stream" name="title">
<title>Display Webcam Stream</title>
<style>
#container {
margin: 0px auto;
width: 500px;
height: 375px;
border: 10px #333 solid;
}
#videoElement {
width: 500px;
height: 375px;
background-color: #666;
}
#container2 {
margin: 0px auto;
width: 500px;
height: 375px;
border: 10px #333 solid;
}
#videoElement2 {
width: 500px;
height: 375px;
background-color: #666;
}
</style>
</head>
<body style="">
<div id="container">
<video autoplay id="videoElement">
</video>
</div>
<div id="container2">
<video2 autoplay="true" id="videoElement2">
</video2>
</div>
<script>
var video = document.querySelector("#videoElement");
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({
video: true
}, handleVideo, videoError);
}
function handleVideo(stream) {
video.src = window.URL.createObjectURL(stream);
}
function videoError(e) { // do something
}
</script>
</body>
</html>
I appreciate any help. Thank you.
You tell a video element which stream to play by setting its src property.
Basically you need to duplicate all the code supporting videoElement here, not just its creation.
One problem you'll run into is that many browsers frown on calling getUserMedia twice at the same time (before the previous asynchronous call has completed), because this overwhelms users with multiple prompts at once. To work around this, put the second call to getUserMedia inside handleVideo, to only bother the user with one prompt at a time.
The third problem you'll run into, is that only Firefox has built-in device selection in the permission prompt, so on Chrome you'll get the same camera twice.
To make this work on other browsers you'll need enumerateDevices. I've answered that before.
Lastly, most smart phones are hardware limited and can't run both cameras at once.
这篇关于是否可以在一个或多个摄像头的Html页面上嵌入两个摄像头流。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
