从 HTML5 网络摄像头获取图像的 src

Question

我有一个应用程序，用户可以在其中单击来自网络摄像头的图片并将其保存到数据库中。我已经从 WebRTC 添加了插件。

我的代码如下：

<form action="process.php" method="post">
  <div class="camera">
    <video id="video">Video stream not available.</video>
    <button id="startbutton">Take photo</button>
  </div>
  <canvas id="canvas">
  </canvas>
  <div class="output">
    <img id="photo" alt="The screen capture will appear in this box.">
  </div>
  <script>
  var myImg = document.getElementById("photo").src;
  </script>
  <input type="submit" onclick="alert(myImg)">
  </form>

但是当我点击提交时，检查它通过了什么，它提示空！为什么不显示 src?

注意：我正在寻求 this

的帮助

Answer 1

先定义一个默认src。然后用你拍的照片替换那个 src:

<script>
    var myImg = document.getElementById("photo").src;
</script>

<div class="output">
    <img id="photo" src="" alt="The screen capture will appear in this box.">
  </div>

Answer 2

问题

中的 html 和 javascript 有两个问题

img src 在点击 input type="submit" 时仍然设置为占位符图片，在 form 提交时刷新 window
form 在 img 元素 src 设置为 data URI at photo.setAttribute('src', data); within takepicture 之前提交

尝试设置input type="submit" disabled 属性以防止在调用takepicture 之前提交form；将 click 事件附加到 #startbutton ；在 #startbutton click 处理程序中将 onload 事件附加到 #photo ，应该 alert data URI of <img> src 之后在 onload 处理程序中设置为来自 video 的 canvas 图像集的 data URI 表示；将 input type="submit" disabled 属性设置为 false 以允许 form 提交。

另请注意，如果未使用 https: 协议，可能会发生错误。

 getUserMedia() no longer works on insecure origins. 
 To use this feature, you should consider switching your 
 application to a secure origin, such as HTTPS. 
 See [url] for more details.

<form>
  <div class="camera">
    <video id="video">Video stream not available.</video>
    <button id="startbutton">Take photo</button> 
  </div>
  <canvas id="canvas">
  </canvas>
  <div class="output">
    <img id="photo" alt="The screen capture will appear in this box."> 
  </div>
    <script>
     document.getElementById("startbutton").addEventListener("click", function() {
       document.getElementById("photo").onload = function() {
           console.log(this.src);
           alert(this.src);
           document.querySelector("input[type=submit]").disabled = false;
       };          
     })
  </script>
  <input type="submit" disabled>
</form>

plnkrhttps://plnkr.co/edit/qzvEdtCnQnzXceIpDumA

从 HTML5 网络摄像头获取图像的 src

Get the src of an image from HTML5 webcam

html

javascript

php

webcam