HTML5 + 2 个 JS 脚本只能单独工作 - 相机和本地文件输入

Question

我正在尝试组合两个 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);
    }
});

凸轮进给 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 属性 '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.

Answer 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 网络应用程序，用于跟踪照片。感谢您的提示。

HTML5 + 2 个 JS 脚本只能单独工作 - 相机和本地文件输入

HTML5 + 2 JS Scripts only working separately - camera and local file input

javascript

html

augmented-reality

getusermedia