从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 ？

注 ：我正在帮助来自这个

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有两个问题

1. 单击input type="submit"时， img src仍设置为占位符图像，刷新form提交window

2. 在将img元素src设置为photo.setAttribute('src', data); data URI之前，提交form photo.setAttribute('src', data); 在takepicture内

尝试设置input type="submit" disabled属性，以防止在takepicture之前提交form ； 将click事件附加到#startbutton ； 内#startbutton click处理程序安装onload事件#photo ，应该alert data URI的<img> src设定为后data URI的表示canvas从设置图像video内onload处理程序; 将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>

plnkr https://plnkr.co/edit/qzvEdtCnQnzXceIpDumA