Question

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

我的代码如下：

635949212012288836_iinput.xml.xsd

但是当我点击提交时，要检查它通过了什么，它会提醒空！为什么没有显示<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>？

NB ：我正在接受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"仍设置为占位符图片，在window提交
form在form元素img设置为src data URI photo.setAttribute('src', data);
之前提交

尝试设置takepicture input type="submit"属性，以防止在调用disabled之前提交form;将takepicture个事件附加到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.

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

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

2 个答案: