上传从摄像头拍摄的照片(Uploading a picture taken from a webca

如何上传图片，我从一个摄像头了， 我发现，工作代码（仅适用于Chrome浏览器）

我使用的代码，并且在拍摄照片时CLIC，我得到的图片，但我没有看到它的来源？

<video autoplay id="vid" style="display:none;"></video>
<canvas id="canvas" width="640" height="480" style="border:1px solid #d3d3d3;"></canvas><br>
<button onclick="snapshot()">Take Picture</button>

<script type="text/javascript">

var video = document.querySelector("#vid");
var canvas = document.querySelector('#canvas');
var ctx = canvas.getContext('2d');
var localMediaStream = null;

var onCameraFail = function (e) {
    console.log('Camera did not work.', e);
};

function snapshot() {
    if (localMediaStream) {
        ctx.drawImage(video, 0, 0);
    }
}

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia({video:true}, function (stream) {
    video.src = window.URL.createObjectURL(stream);
    localMediaStream = stream;
}, onCameraFail);

</script>

我如何将它添加到具有图片元素的形式

<input name="avatar" class="avatar" type="file" required>

你可以看到，现场是必需的，因此，如果它被添加到该字段的形式将它看作一个非空的？

为什么在Opera不工作？ 我使用Opera 12.15

更新： 我发现如何转化为画布图像 ，但不知道如何来填补它的图像：

a = canvas.toDataURL("image/jpeg")
document.getElementById("avatar").src = a

如果我使用JavaScript控制台，我得到的来源，但如果我验证表单，表单认为图像仍下落不明，它是空白。

有任何想法吗？

Answer 1:

建立与快照（）在300毫秒乳宁的的setInterval。

按钮只停止间隔，）

---

<button onclick="clearInterval(ivl)">Take Picture</button>

var ivl = setInterval(function(){  snapshot(); },300);

文章来源: Uploading a picture taken from a webcam