從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