从网络摄像头捕获图像答案

【问题标题】：Capturing an image from a webcam从网络摄像头捕获图像
【发布时间】：2013-02-09 23:41:48
【问题描述】：

我正在尝试从网络摄像头随机捕获图像，然后将其保存到我的服务器，现在我正在使用 getUserMedia 将网络摄像头流式传输到视频元素，然后我可以使用按钮将图像捕获到画布但是我不确定如何将该图像从画布保存到我的服务器。

还有一个问题是getUserMedia 只能在Chrome、Opera 和Firefox 中使用，IE 有什么替代品吗？

这是我目前正在使用的：

    <video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
<button id="getBase" onclick="getBase()">Get Base64</button>
<textarea id="textArea"></textarea>

<script>

    // Put event listeners into place
    window.addEventListener("DOMContentLoaded", function() {
        // Grab elements, create settings, etc.
        var canvas = document.getElementById("canvas"),         
        context = canvas.getContext("2d"),
        video = document.getElementById("video"),
        videoObj = { "video": true },
        errBack = function(error) {
        console.log("Video capture error: ", error.code); 
        };

        // Put video listeners into place
        if(navigator.getUserMedia) { // Standard
            navigator.getUserMedia(videoObj, function(stream) {
                video.src = stream;
                video.play();
            }, errBack);
        } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
            navigator.webkitGetUserMedia(videoObj, function(stream){
                video.src = window.webkitURL.createObjectURL(stream);
                video.play();
            }, errBack);
        }

        // Trigger photo take
        document.getElementById("snap").addEventListener("click", function() {
            context.drawImage(video, 0, 0, 640, 480);
        });

        document.getElementByID("getBase").addEventListener("click", getBase());

    }, false);                  

    function getBase(){
        var imgBase = canvas.toDataURL("image/png");

        document.getElementByID("textArea").value=imgBase;
    }
</script>`

谢谢大家

【问题讨论】：

标签： html cross-browser html5-canvas getusermedia

【解决方案1】：

您可以使用 canvas.toDataUrl 获取 base64 编码字符串，您可以将其作为参数发布到服务器上的脚本中，该脚本将读取它并存储为图像文件。

这是该方法实际实现的简化版本：

<script>
function saveImage(){
    var xmlhttp;
    xmlhttp=((window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP"));
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4){
            if(xmlhttp.status==200){
                //handle success                
            }
        }
    }
    xmlhttp.open("POST",baseURL,true);
    var oldCanvas = under.toDataURL("image/png");
    var params=oldCanvas;
    xmlhttp.setRequestHeader("Content-type", "application/upload");
    xmlhttp.setRequestHeader("Content-length", params.length);
    xmlhttp.setRequestHeader("Connection", "close");
    xmlhttp.send(params);
}
</script>

这是一个示例 PHP 脚本，它接受 base64 字符串，转换为 .png，给它一个随机文件名，然后保存：

<?php
if((isset($GLOBALS["HTTP_RAW_POST_DATA"]))){
    //some validation is necessary, this is just a proof of concept
    if(isset($GLOBALS["HTTP_RAW_POST_DATA"])){
        $params=explode('&',$GLOBALS["HTTP_RAW_POST_DATA"]);
        $imgsrc=str_replace(' ','+',$params[0]);
        $im = imagecreatefrompng($imgsrc);
    }
    if($im){
        $background = imagecolorallocatealpha($im, 255,255,255,127);
        imagecolortransparent($im, $background);
        //random file name
        $m = rand(10e16, 10e24);
        $filename=base_convert($m, 10, 36);
        //save image
        imagepng($im, 'images/'.$filename.'.png');
        imagedestroy($im);
        $size = getimagesize('images/'.$filename.'.png');
        $iH=$size[1];
        $iW=$size[0];
        echo "{\"filename\":\"".$filename."\",\"width\":\"".$iW."\",\"height\":\"".$iH."\"}";
    }
}
?>

【讨论】：

我尝试使用 toDataUrl，我在按钮上添加了一个 onClick 来调用以下函数 function getBase(){ var imgBase = canvas.toDataUrl(); document.getElementByID("textArea").value=imgBase; } 这应该将 Base64 字符串输出到我创建的文本区域。任何线索为什么它没有？
尝试指定如下格式：.toDataURL("image/png"); 也许？
哦，也许是 Url 与 URL？
不幸的是，这些都不起作用。我已经绞尽脑汁好几个小时了，该睡觉了，希望一个全新的视角能解决这个问题。
你见过这个吗：developer.mozilla.org/en-US/docs/WebRTC/taking_webcam_photos我没有仔细检查你的比较，但它看起来很相关

【解决方案2】：

您可以使用 getUserMedia.js 或其他包含 Flash 回退的类似库来覆盖 IE。尽管 Flash 最近变得非常不受欢迎。

CanIUse.com's stream page 提供有关支持此功能的信息。

正如 Robot Woods 的回答中所说，canvas.toDataUrl 将为您抓取图像。

【讨论】：