是否可以从一个或多个摄像机在一个 Html 页面上嵌入两个网络摄像头流
Is it possible to embed two webcam streams on one Html page from one or more cameras.
我试图在一个HTML页面上嵌入两个网络摄像头流。
我习惯了从这个网站获得的获取用户媒体脚本 https://www.kirupa.com/html5/accessing_your_webcam_in_html5.htm
它适用于一个蒸汽,但是当我尝试在同一页面上制作两个不同的视频流时,它不起作用。
我尝试制作一个带有网格的div 标签,并在每个单元格中放置一个视频元素。这只会导致一个流。
这是我最近的尝试
<!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>
我感谢任何帮助。谢谢。
通过设置video
元素的src
属性来告诉stream
播放哪个元素。
基本上,您需要在此处复制所有支持videoElement
的代码,而不仅仅是其创建。
您将遇到的一个问题是,许多浏览器不愿意同时调用getUserMedia
两次(在上一个异步调用完成之前),因为这会使用户同时收到多个提示。要解决此问题,请将第二次调用放在 handleVideo
中getUserMedia
,一次只用一个提示打扰用户。
您会遇到的第三个问题是,只有Firefox在权限提示中具有内置的设备选择功能,因此在Chrome上,您将获得两次相同的相机。
要在其他浏览器上执行此操作,您需要 enumerateDevices
.我以前回答过这个问题。
最后,大多数智能手机都受到硬件限制,无法同时运行两个摄像头。
相关文章:
- javascript函数,它接受两个输入:一个对象和一个键,并返回对象中该键的相应值
- 在输入字段上有两个函数调用,一个在Blur上,一个不在Angular中
- 一个ajax循环有两个输出错误innerHTML
- 将两个Json提要合并为一个,并按时间排序
- 为什么jQuery文件的函数中有两个参数,但只接收一个参数
- 使用javascript将两个文本框值相加到表中的另一个文本框中
- 当两个单独的单词被放在目标上时,使用Jquery获取一个值
- 为两个ID设置一个变量的正确语法
- webgl在一个正方形上操纵两个纹理
- 一个jsp中有两个操作URL
- javascript测试是否存在两个标志中的任何一个
- Jquery:当两个或多个条件为true时,选择一个元素
- 使用一个表达式将两个变量分配给相同的值
- react-让一个元素返回两个相邻的<tr>标签
- 同一事物的两个函数,一个崩溃,另一个不崩溃,为什么
- 检查来自不同数组的两个元素的一个属性是否相等
- 保存两个模型(属于第三个模型)和一个提交
- 一个具有两个图像按钮的表单在只能按下一个按钮的情况下发送两个按钮值
- 将两个express应用程序封装在一个应用程序中
- 一个Web应用程序上有两个Java脚本