在 Web 应用程序中从网络摄像头或移动摄像头拍照

Posted 2023-03-31

【中文标题】在 Web 应用程序中从网络摄像头或移动摄像头拍照

【英文标题】：Take picture from webcam or mobile camera in web applications

【发布时间】：2016-02-07 12:57:59

【问题描述】：

我正在开发一个网络应用程序，它可以从本地浏览和拍照，而且我想通过相机捕捉图像。我使用以下代码，我可以捕获设备相机。

<input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput">

现在，我想获取图像和 onchangeevent，转换为 base64 并希望在该页面中显示。

请帮帮我！

【问题讨论】：

How to access a mobile's camera from a web app?的可能重复

这是一个有趣的库。 https://github.com/jhuckaby/webcamjs

How to get base64 encoded data from html image的可能重复

这不是重复的，因为他想在页面上显示图像，大概不需要先上传。

accessing webcam in web pages的可能重复

【参考方案1】：

Miles Erickson 和 Henock Bongi，你需要使用 reader.readAsDataUrl($data);退出 onload 函数，以便 onload 触发。

如果您不想使用 jQuery，请参见下文：

function readFile(file)                                                        
    var reader = new FileReader();
    reader.onload = readSuccess;                                            
    function readSuccess(evt)      
        document.getElementById("your_img_id").src = evt.target.result                   
    ;
    reader.readAsDataURL(file);                                              
 

document.getElementById('cameraInput').onchange = function(e) 
    readFile(e.srcElement.files[0]);
;

【讨论】：

回答 2 年前的帖子有什么意义？无论哪种方式，最好使用 URL.createObjectURL 而不是使用 FileReader

这一点仅供像我这样花 20 分钟搞清楚为什么 reader.onload 没有启动的人参考 :)

是的，你是对的，我忘了把它从 onload 函数中取出。谢谢！

【参考方案2】：

你可以这样做：

$('#cameraInput').on('change', function(e)
 $data = e.originalEvent.target.files[0];
  $reader = new FileReader();
  reader.onload = function(evt)
  $('#your_img_id').attr('src',evt.target.result);
  reader.readAsDataUrl($data);
);

【讨论】：

您使用折旧的bind 与on 的任何原因？

谢谢！我以前用过这个，现在我用on而不是bind。