Image 是否有从手机加载图像的特殊方式'；将摄像头插入Android Firefox的img

我正在尝试将手机摄像头中的图像加载到图像标签中。除了Android上的Firefox之外，它在任何地方都能很好地工作。Firefox版本是83.1.0，下面是产生问题的简单JavaScript和HTML。我所要做的就是使用相机拍摄一张照片，并将其加载到img标签中进行显示。在Chrome甚至三星的愚蠢的网络浏览器中都能发挥巨大的作用。只是不在Firefox中。图像不显示。 我做错了什么

window.onload = function() {
let imgInput = document.querySelector('#imageInput');
   
   imgInput.addEventListener('change',function(event) {
      var files = this.files;
      var fr = new FileReader();
   
      fr.onload = function () {
         document.getElementById('image').src = fr.result;
      }

      fr.readAsDataURL(files[0]);
   });
};

...

<input id="imageInput" type="file" accept="image/*" capture="camera">
<img id="image" style="height: 300px; width: auto;"/>

window.onload=function（）{
让imgInput=document.querySelector（“#imageInput”）；
imgInput.addEventListener（'change'，函数（事件）{
var files=this.files；
var fr=new FileReader（）；
fr.onload=函数（）{
document.getElementById（'image'）.src=fr.result；
}
fr.readAsDataURL（文件[0]）；
});
};
...

您好，欢迎来到SO:）我对您的代码有点困惑，因为您提到“从相机加载图像”，但您也加载了一个文件

更新答案：使用WebRTC

正如@evipie提到的，

ImageCapture

目前在Firefox中不受支持。然而，MDN还有另一篇很好的文章

下面是文章中描述的

takepicture

函数。它使用接收WebRTC流，然后在画布中呈现该元素的内容。然后将内容转换为数据URL，以显示在另一个组件中

函数takepicture（）{
var context=canvas.getContext（'2d'）；
if（宽度和高度）{
画布宽度=宽度；
canvas.height=高度；
drawImage（视频，0，0，宽度，高度）；
var data=canvas.toDataURL（'image/png'）；
photo.setAttribute（'src'，数据）；
}否则{
clearphoto（）；
}
}

旧答案（无效：

ImageCapture

在Firefox中不受支持）

MDN网站提供了一个从相机加载图像的精确方法。该示例适用于所有浏览器（演示为）：

var takePhotoButton=document.querySelector（'button#takePhoto'）；
var canvas=document.querySelector（'canvas'）；
takePhotoButton.onclick=takePhoto；
函数takePhoto（）{
imageCapture.takePhoto（）.then（函数（blob）{
log（'taked photo:'，blob）；
img.classList.remove（'hidden'）；
img.src=URL.createObjectURL（blob）；
}).catch（函数（错误）{
log（'takePhoto（）错误：'，错误）；
});
}

---

演示的完整JS代码是。

我认为可能存在两个潜在问题：

• 您的Android版Firefox已过时。有一个问题报告显示，在旧版本中，通过
  进行的图像捕获可能会中断：
• 使用data:URL代替blob:URL。Android版Firefox的数据限制似乎很低：URL长度。高分辨率图像可能太大。而是创建一个blob URL

我在Firefox for Android Nightly上成功测试了以下实现：

<input type=file accept="image/*" id="imageInput">
<img id="image">
<script>
var imgInput = document.querySelector("#imageInput");
imgInput.addEventListener('change',function(event) {
  var file = event.target.files[0];
  var url = URL.createObjectURL(file);
  document.getElementById('image').src = url;
});
</script>

ImageCapture在Firefox中不受支持：抱歉。我是说谢谢。你的答案很正确。