javascript - 为什么我的网络摄像头一直显示错误
问题描述
我正在做一个个人项目，我可以将图像放在画布上并将其保存在我的库中。这在我从浏览按钮上传 .png 时有效，但是当我尝试拍摄网络摄像头图像时却没有。
所发生的只是我的“错误分隔符”不断弹出来代替相机输出。有人可以发现错误吗？我已经为此工作了好几天。可能只是需要一个新的视角。
网络摄像头.js
var video = document.querySelector("#webcam");
var canvas = document.getElementById("canvas");
var button = document.getElementById("pickImage");
var miniatures = document.getElementById("miniatures");
var inputFile = document.getElementById("take-picture");
var pickFile = document.getElementById("pickFile");
var notAvailable = document.getElementById("camera-not-available");
var cadre = document.getElementById("cadre");
var cigarette = document.getElementById("cigarette");
var hat = document.getElementById("hat");
var cameraAvailable = false;
var promisifiedOldGUM = function(constraints) {
var getUserMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia ||
navigator.oGetUserMedia);
if(!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
}
return new Promise(function(resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
if(navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
if(navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = promisifiedOldGUM;
}
var constraints = {video: true};
navigator.mediaDevices.getUserMedia(constraints)
.then(handleVideo)
.catch(videoError);
function handleVideo(stream) {
video.src = window.URL.createObjectURL(stream);
cameraAvailable = true;
video.style.display = "block";
notAvailable.style.display = "none";
button.onclick = function() {
var image = new Image();
canvas.style.display = "none";
pickFile.style.display = "none";
image.addEventListener("load", function() {
if (file === "cadre.png") {
canvas.getContext("2d").drawImage(image, 0, 0, 1024, 768, 0, 0, 640, 480);
} else if (file === "cigarette.png") {
canvas.getContext("2d").drawImage(image, 0, 0, 1024, 768, 100, 200, 240, 180);
} else {
canvas.getContext("2d").drawImage(image, 0, 0, 1024, 768, 180, 0, 240, 180);
}
}, false);
image.src = document.querySelector('input[name="img"]:checked').value; // Set source path
var split = image.src.split("/");
var file = split[split.length - 1];
canvas.getContext("2d").drawImage(video, 0, 0, 640, 480, 0, 0, 640, 480);
var img = canvas.toDataURL("image/png");
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0) && xhr.responseText != null && xhr.responseText != "") {
var newImg = document.createElement("IMG");
newImg.className = "icon removable";
newImg.src = "montage/" + xhr.responseText;
newImg.onclick = function(event) {
var pathToImg = event.srcElement.src;
var srcTab = pathToImg.split('/');
var src = srcTab[srcTab.length - 1];
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0) && xhr.responseText == "OK") {
miniatures.removeChild(event.srcElement);
}
};
xhr.open("POST", "./forms/removemontage.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("src=" + src);
}
miniatures.appendChild(newImg);
}
};
xhr.open("POST", "./forms/montage.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("img=" + "../img/" + file + "&f=" + img);
};
}
function videoError(e) {
cameraAvailable = false;
video.style.display = "none";
notAvailable.style.display = "block";
}
function onCheckBoxChecked(checkbox) {
if (cameraAvailable) {
button.style.display = "block";
if (checkbox.id === "cadre.png") {
cadre.style.display = "block";
cigarette.style.display = "none";
hat.style.display = "none";
} else if (checkbox.id === "cigarette.png") {
cadre.style.display = "none";
cigarette.style.display = "block";
hat.style.display = "none";
} else {
cadre.style.display = "none";
cigarette.style.display = "none";
hat.style.display = "block";
}
}
inputFile.style.display = "block";
if (inputFile.files.length) {
var image = new Image();
var img = new Image();
image.addEventListener("load", function() {
canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
canvas.getContext("2d").drawImage(image, 0, 0, image.width, image.height, 0, 0, 640, 480);
var data64Img = canvas.toDataURL(image.type);
window.URL.revokeObjectURL(file);
img.src = document.querySelector('input[name="img"]:checked').value; // Set source path
var split = img.src.split("/");
var file = split[split.length - 1];
if (file === "cadre.png") {
canvas.getContext("2d").drawImage(img, 0, 0, 1024, 768, 0, 0, 640, 480);
} else if (file === "cigarette.png") {
canvas.getContext("2d").drawImage(img, 0, 0, 1024, 768, 100, 200, 240, 180);
} else {
canvas.getContext("2d").drawImage(img, 0, 0, 1024, 768, 180, 0, 240, 180);
}
pickFile.onclick = function () {
sendMontage(data64Img, file);
}
}, false);
image.src = window.URL.createObjectURL(inputFile.files[0]);
}
}
function sendMontage(imgData64, filterImg) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0) && xhr.responseText != null && xhr.responseText != "") {
var newImg = document.createElement("IMG");
newImg.className = "icon removable";
newImg.src = "montage/" + xhr.responseText;
newImg.onclick = function(event) {
var pathToImg = event.srcElement.src;
var srcTab = pathToImg.split('/');
var src = srcTab[srcTab.length - 1];
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0) && xhr.responseText == "OK") {
miniatures.removeChild(event.srcElement);
}
};
xhr.open("POST", "./forms/removemontage.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("src=" + src);
}
miniatures.appendChild(newImg);
}
};
xhr.open("POST", "./forms/montage.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("img=" + "../img/" + filterImg + "&f=" + imgData64);
}
这是我的 webcam.php
<?php
session_start();
include_once("functions/montage.php");
$montages = get_all_montage();
?>
<!DOCTYPE html>
<HTML>
<header>
<link rel="stylesheet" type="text/css" href="style/gallery.css">
<meta charset="UTF-8">
<title>CAMAGRU - gallery</title>
</header>
<body>
<?php include('fragments/header.php') ?>
<div class="body">
<?php if(isset($_SESSION['id'])) { ?>
<div class="main">
<div class="select">
<img class="thumbnail" src="img/cadre.png"></img>
<input id="cadre.png" type="radio" name="img" value="./img/cadre.png" onclick="onCheckBoxChecked(this)">
<img class="thumbnail" src="img/cigarette.png"></img>
<input id="cigarette.png" type="radio" name="img" value="./img/cigarette.png" onclick="onCheckBoxChecked(this)">
<img class="thumbnail" src="img/hat.png"></img>
<input id="hat.png" type="radio" name="img" value="./img/hat.png" onclick="onCheckBoxChecked(this)">
</div>
<video width="100%" autoplay="true" id="webcam"></video>
<div id="camera-not-available">CAMERA NOT AVAILABLE</div>
<img id="hat" style="display:none;" src="img/hat.png"></img>
<img id="cigarette" style="display:none;" src="img/cigarette.png"></img>
<img id="cadre" style="display:none;" src="img/cadre.png"></img>
<div class="capture" id="pickImage">
<img class="camera" src="img/camera.png"></img>
</div>
<canvas id="canvas" style="display:none;" width="640" height="480"></canvas>
<div class="captureFile" id="pickFile">
<img class="camera" src="img/camera.png"></img>
</div>
<input type="file" id="take-picture" style="display:none;" accept="image/*">
</div>
<div class="side">
<div class="title">Montages</div>
<div id="miniatures">
<?php
$gallery = "";
if ($montages != null) {
for ($i = 0; $montages[$i] ; $i++) {
$class = "icon";
if ($montages[$i]['userid'] === $_SESSION['id']) {
$class .= " removable";
}
$gallery .= "<img class=\"" . $class . "\" src=\"./montage/" . $montages[$i]['img'] . "\" data-userid=\"" . $montages[$i]['userid'] . "\"></img>";
}
echo $gallery;
}
?>
</div>
</div>
<?php } else { ?>
You need to connect to use the gallery
<?php } ?>
</div>
<?php include('fragments/footer.php') ?>
</body>
<?php if(isset($_SESSION['id'])) { ?>
<script type="text/javascript" src="js/webcam.js"></script>
<script type="text/javascript" src="js/drop.js"></script>
<script type="text/javascript" src="js/import.js"></script>
<?php } ?>
</HTML>
为了不使页面超载，我省略了最有可能不会出现错误的任何不必要的文件。
解决方案
推荐阅读
- powerbi-desktop - 如果然后在 Power BI DAX 语句中
- node.js - 首次连接时连接服务器失败
- html - 图像在某些移动设备中不合适，但在其他设备中合适
- node.js - 有没有办法使用 Dialogflow 的 Node.js 库来实现意图？
- assembly - 为什么使用 push/pop 而不是 sub 和 mov？
- parse-platform - 是否有用于 Objective-C 的预构建 Bolts.framework？
- r - ggplot2 - 使用 `geom_curve()` 和 `scale_alpha()` 时如何更改图例？
- wordpress - 如何使用简码解决 Learndash 聚焦模式
- r - 在同一图中绘制多个变量 lm()
- android - 显示相对布局的圆圈