javascript - Toggle B/W multiple camera on button 点击网页:HTML、JS
问题描述
所以我所拥有的是一个脚本,通过它我可以在选择特定选项时显示连接到设备的两个摄像机源。
我使用的脚本如下所示:
var videoElement = document.querySelector('video');
var videoSelect = document.querySelector('select#videoSource');
videoSelect.onchange = getStream;
getStream().then(getDevices).then(gotDevices);
function getDevices()
{
return navigator.mediaDevices.enumerateDevices();
}
function gotDevices(deviceInfos)
{
window.deviceInfos = deviceInfos; // make available to console
console.log("Available Input and Output Devices: ", deviceInfos);
for(const deviceInfo of deviceInfos)
{
const option = document.createElement('option');
option.value = deviceInfo.deviceId;
if(deviceInfo.kind === 'videoinput'){
option.text = deviceInfo.label || `Camera ${videoSelect.length + 1}` ;
videoSelect.appendChild(option);
}
}
}
function getStream()
{
if(window.stream)
{
window.stream.getTracks().forEach(track =>{
track.stop();
});
}
const videoSource = videoSelect.value
const constraints = {
video:{deviceId: videoSource ? { exact: videoSource}: undefined }
};
return navigator.mediaDevices.getUserMedia(constraints).
then(gotStream).catch(handleError);
}
function gotStream(stream)
{
window.stream = stream ;
videoSelect.selectedIndex = [...videoSelect.options].
findIndex(option => option.text === stream.getVideoTracks()[0].label);
console.log("videoSelecte.selectedIndex : ", videoSelect.selectedIndex)
videoElement.srcObject = stream;
}
function handleError(error)
{
console.log("Error: ", error);
}
但我需要的是“更改相机”按钮而不是选择选项。单击该按钮后,相机应切换。有什么办法可以做到这一点。
你可以检查我所做的事情的小提琴。
解决方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WebCam</title>
</head>
<body>
<div>
<div id="container">
<div className="select">
<label>Select Video Input</label>
<button id="toggleCam">Toggle Camera</button>
</div>
</div>
<video autoplay muted playsinline></video>
</div>
<script>
function main() {
const videoElement = document.querySelector("video");
const toggleButton = document.querySelector("#toggleCam");
/**
* @type {Array<MediaDeviceInfo>}
*/
let videoDevices;
let currIndex = -1;
init();
function init() {
if (navigator.mediaDevices && navigator.mediaDevices.enumerateDevices) {
navigator.mediaDevices
.getUserMedia({ video: {} })
.then(() => navigator.mediaDevices.enumerateDevices())
.then(deviceInfos => {
videoDevices = Array.from(deviceInfos).filter(item => item.kind == "videoinput");
if (videoDevices.length == 0) {
noCameraFound();
} else if (videoDevices.length == 1) {
const label = videoDevices[0].label || "Default Camera";
toggleButton.textContent = `Using ${label}`;
toggleButton.setAttribute("disabled", "1");
useCamera(videoDevices[0]);
} else {
toggleCamera();
toggleButton.addEventListener("click", toggleCamera);
}
});
} else {
noCameraFound();
}
}
function noCameraFound() {
toggleButton.textContent = "No Camera";
toggleButton.setAttribute("disabled", "1");
}
/**
* @param {MediaDeviceInfo} device
*/
function useCamera(device) {
if (videoElement && videoElement.srcObject && videoElement.srcObject.getTracks) {
videoElement.srcObject.getTracks().forEach(track => track.stop());
}
const deviceId = device.deviceId;
const constraints = {
video: { deviceId: deviceId ? { exact: deviceId } : undefined }
};
navigator.mediaDevices
.getUserMedia(constraints)
.then(stream => {
videoElement.srcObject = stream;
})
.catch(handleError);
}
function toggleCamera() {
currIndex = (currIndex + 1) % videoDevices.length;
useCamera(videoDevices[currIndex]);
const nextIndex = (currIndex + 1) % videoDevices.length;
const label = videoDevices[nextIndex].label || `Camera ${nextIndex}`;
toggleButton.textContent = `Use ${label}`;
}
function handleError(error) {
console.log("Error: ", error);
}
}
main();
</script>
</body>
</html>
推荐阅读
- botframework - 在 QnA Maker 中使用多个 StrictFilter
- zebra-printers - 如何在此脚本中硬编码 Zebra 标签替换?
- firebase - 无法订阅 combineLatest 的结果
- excel - 使用 VBA 对不同选项卡中的不同数据进行排序和删除
- mobile-safari - 意外缩放 PWA 中的方向更改,但不是移动 safari iOS
- mysql - 使用 MYSQL 在同一查询 NODE JS 中选择和插入
- android - 约束布局中的渲染错误
- regex - 如何编写正则表达式以匹配 IP 地址的第三个八位字节
- mysql - 尽管存在主键,但表是只读的
- azure-virtual-machine - 如何使用 Azure PowerShell 一次部署或删除多个虚拟机?