[我正在尝试结合两个js脚本，以使本地jpeg在相机供稿顶部的浏览器中以80％的不透明性在本地查看，以制作AR跟踪网络应用。
使用以下代码，它可以正确显示网络摄像头，但不显示上传的图像。我试图使代码尽可能简单。仅使用一个脚本而不同时使用两个脚本时，脚本可以正常工作。
图像查看器覆盖JS：
$("input").change(function(e) {
for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {
var file = e.originalEvent.srcElement.files[i];
var img = document.createElement("img");
var reader = new FileReader();
reader.onloadend = function() {
img.src = reader.result;
}
reader.readAsDataURL(file);
$("input").after(img);
}
});
Cam feed JS：
var constraints = { audio: false, video: { width: 300, height: 300 } };
navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) {
var video = document.querySelector('video');
video.srcObject = mediaStream;
video.onloadedmetadata = function(e) {
video.play();
};
})
.catch(function(err) { console.log(err.name + ": " + err.message); }); // always check for errors at the end.
HTML：
<html>
<head>
<style>
img { opacity: 80%
}
</style>
<script src="camfeed.js"></script>
<script src="overlay.js"></script>
</head>
<body>
<video id="vid"></video>
<input type="file" accept="image"></input>
</body>
</html>
更新：我根据建议对代码进行了一些修改。无法修复，但在控制台中出现错误消息Uncaught TypeError：无法读取null的属性'addEventListener'在window.onload（overlay.js：7）。
这是当前的HTML：
<html>
<head>
<style>
.overlay {
position: absolute;
left: 0px;
top: 0px;
opacity: 25%;
z-index: -1;
}
img {
position: absolute;
left: 0px;
top: 0px;
opacity: 25%;
z-image: -1;
}
video {
position: absolute;
left: 0px;
top: 0px;
height: 720;
width: 1280;
z-index:-2;
}
input {
z-index: 1;
}
</style>
</head>
<body>
<video id="vid"></video>
<div id="overlay"></div>
<input type="file" id=fileInput" accept="image" value="pick a pic"></input>
<script src="camfeed.js"></script>
<script src="overlay.js"></script>
</body>
</html>
这是当前的overlay.js：
window.onload = function() {
var fileInput = document.getElementById('fileInput');
var fileDisplayArea = document.getElementById('overlay');
fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var imageType = /image.*/;
if (file.type.match(imageType)) {
var reader = new FileReader();
reader.onload = function(e) {
fileDisplayArea.innerHTML = "";
var img = new Image();
img.src = reader.result;
fileDisplayArea.appendChild(img);
}
reader.readAsDataURL(file);
} else {
fileDisplayArea.innerHTML = "File not supported!"
}
});
}
这是当前的camfeed.js（正在运行：）：
// Prefer camera resolution nearest to 1280x720.
var constraints = { audio: false, video: { width: 1280, height: 720, facingMode: "environment" }};
navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream) {
var video = document.querySelector('video');
video.srcObject = mediaStream;
video.onloadedmetadata = function(e) {
video.play();
};
})
.catch(function(err) { console.log(err.name + ": " + err.message); }); // always check for errors at the end.
我知道了。问题的原因似乎是我没有在index.html控制台错误日志中包括以下jquery脚本代码，该代码表明如果没有jquery，它无法解释JavaScript脚本中的美元符号（$）：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
这是功能齐全的代码：
index.html：
<html>
<head>
<style>
.overlay {
position: absolute;
left: 0px;
top: 0px;
opacity: 25%;
z-index: -1;
}
img {
position: absolute;
left: 0px;
top: 0px;
opacity: 25%;
z-index: -1;
}
video {
position: absolute;
left: 0px;
top: 0px;
height: auto;
width: 100%;
z-index:-2;
}
input {
z-index: 1;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<video id="vid"></video>
<input class="joint" type='file' id="imgInp" />
<img style="width:100%" id="blah" src="#" alt="image display error" />
<script src="camfeed.js"></script>
<script src="overlay.js"></script>
</body>
</html>
overlay.js：
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
readURL(this);
});
camfeed.js：
// Prefer camera resolution nearest to 1280x720.
var constraints = { audio: false, video: { width: 1280, height: 720, facingMode: "environment" }};
navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream) {
var video = document.querySelector('video');
video.srcObject = mediaStream;
video.onloadedmetadata = function(e) {
video.play();
};
})
.catch(function(err) { console.log(err.name + ": " + err.message); }); // always check for errors at the end.
最终结果是一个有用的AR网络应用程序，用于跟踪照片。感谢您的提示。