HTML5 + 2 JS 脚本仅单独工作 - 相机和本地文件输入答案

【问题标题】：HTML5 + 2 JS Scripts only working separately - camera and local file inputHTML5 + 2 JS 脚本仅单独工作 - 相机和本地文件输入
【发布时间】：2019-11-22 00:30:16
【问题描述】：

我正在尝试结合两个 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: Cannot read property 'addEventListener' of null 在 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.

【问题讨论】：

overlaying the camera feed - 您需要使用 CSS 将 img 定位到您想要的位置 - position:absolute; 或 position:relative 图像是一个好的开始
是的好主意，但覆盖的图像根本没有显示出来。
为什么不呢？其他代码中没有任何内容可以阻止它 - 浏览器开发人员工具控制台中是否有任何错误？
我根据您的建议检查了开发人员工具控制台。请参阅更新后的帖子。我收到错误消息“Uncaught TypeError: Cannot read property 'addEventListener' of null at window.onload (overlay.js:7)。”

标签： javascript html augmented-reality getusermedia

【解决方案1】：

我让它工作了。问题的原因似乎是我没有在 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 网络应用。感谢您的提示。

【讨论】：