javascript - HTML5 + 2 JS 脚本仅单独工作 - 相机和本地文件输入
问题描述
我正在尝试组合两个 js 脚本,以允许在相机源顶部的浏览器中本地查看本地 jpeg,不透明度为 80%,以制作 AR 跟踪 Web 应用程序。
使用以下代码,它可以正确显示网络摄像头提要,但不会显示上传的覆盖摄像头提要。我试图使代码尽可能简单。当只使用一个或另一个时,脚本可以正常工作,但不能同时使用两者。
图像查看器覆盖 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);
}
});
凸轮进给 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: Cannot read property 'addEventListener' of null at 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>
这是功能齐全的代码:
索引.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>
覆盖.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 Web 应用程序,用于跟踪照片。感谢您的提示。
推荐阅读
- windows - 如何在 Windows 上使用 gstreamer 播放 .wav 音频文件?
- firebase - 将存储在 Firebase 中的值相加并在 FutureBuilder 中显示总计
- python - 如何在数据框中的整个列中将 df['2'] 除以 df['1']?
- mysql - 何时在 Group BY 之前使用 WHERE 与在 Group By 之后使用 Have
- javascript - 如何在 React 的 plotly.js 旭日形图中访问和控制选定的段
- google-bigquery - 将更新与左连接和交叉连接 BigQuery 结合使用
- html - 我如何复制 xmp 内容 HTML CSS
- python - 如何每隔 N 项将列表的所有元素扩展到另一个列表
- python - 使用python ans pyodbc插入MS Access ..插入一些行后出错
- git - 如果我使用 sudo rm -r 从本地文件系统中删除 git 分支上的文件会发生什么