javascript 如何在 HTML 页面中使用网络摄像头拍摄快照？

How to take snapshot with a webcam in a HTML page?

提问by user1371622

If I save a <canvas>that contains drawing. Everything is working fine. But, if I want to save a canvasthat contains an image (a frame from webcam stream), it is not working and it doesn't send anything to server. Does someone have some ideas about it?

如果我保存一个<canvas>包含绘图。一切正常。但是，如果我想保存一个canvas包含图像（来自网络摄像头流的帧）的图像，它就不起作用，并且不会向服务器发送任何内容。有人对此有一些想法吗？

HTML:

HTML：

<video id="VideoCamera" autoplay></video>
<canvas id="testCanvas" width="300" height="300"></canvas>
<textarea id="debugConsole" rows="10" cols="60">Data</textarea>
<button onclick="saveViaAJAX();">Save Via AJAX</button>
<input id="button" type="button" value="photo" onclick="snapshot()" />
<input id="button1" type="button" value="bubble" onclick="bubble()" />

<script type="text/javascript">
    // This portion webcam setup
    var video = document.getElementsByTagName('video')[0];
    var localMediaStream = null;
    if (navigator.getUserMedia) {
        navigator.getUserMedia('video', successCallback, errorCallback);
        function successCallback(stream) {
            video.src = stream;
            localMediaStream = stream;
        }
        function errorCallback(error) { heading.textContent = "An error occurred: [CODE " + error.code + "]"; }
    }
    else {
        heading.textContent = "Native web camera streaming is not supported in this browser!";
    }

    //draw something in canvass
    var canvas = document.getElementById("testCanvas");
    if (canvas.getContext) {
        var canvasContext = canvas.getContext("2d");    
        canvasContext.fillStyle = "rgb(" + (parseInt(Math.random() * 255)) + "," + (parseInt(Math.random() * 255)) + "," + (parseInt(Math.random() * 255)) + ")";
        canvasContext.beginPath();
        canvasContext.arc(Math.random() * 350, Math.random() * 350, Math.random() * 20, 0, Math.PI * 2, true);
        canvasContext.fill();
    }

    // This portion of the code simply draws random circles into the canvas (it has nothing todo with saving the canvas).
    function bubble() {
        var canvas = document.getElementById("testCanvas");
        var canvasContext = canvas.getContext("2d");
        for (i = 0; i < 150; i++) {
            canvasContext.fillStyle = "rgb(" + (parseInt(Math.random() * 255)) + "," + (parseInt(Math.random() * 255)) + "," + (parseInt(Math.random() * 255)) + ")";
            canvasContext.beginPath();
            canvasContext.arc(Math.random() * 350, Math.random() * 350, Math.random() * 20, 0, Math.PI * 2, true);
            canvasContext.fill();
        }
    }

    // This portion of the code take snaphot from wecam
    function snapshot() {
        var canvas = document.getElementById("testCanvas");
        var canvasContext = canvas.getContext("2d");
        canvasContext.drawImage(video, 0, 0, 240, 320);
    }


    // This portion of the code save canvass to server
    function saveViaAJAX() {
        var canvas = document.getElementById("testCanvas");
        var canvasContext = canvas.toDataURL("image/png");
        var postData = "canvasData=" + canvasContext;
        var debugConsole = document.getElementById("debugConsole");
        debugConsole.value = canvasContext;

        var ajax = new XMLHttpRequest();
        ajax.open("POST", 'Save.php', true);
        ajax.setRequestHeader('Content-Type', 'canvas/upload');
        ajax.setRequestHeader('Content-TypeLength', postData.length);

        ajax.onreadystatechange = function () {
            if (ajax.readyState == 4) {
                debugConsole.value = canvasContext + " " + debugConsole.value;
            }
        }
        ajax.send(postData);
    }

PHP save.phpcode:

PHPsave.php代码：

$png =$_POST['data'];
$filteredData=substr($png, strpos($png, ",")+1);
$unencodedData=base64_decode($filteredData);
$fp = fopen( 'image.png', 'wb' );
fwrite( $fp, $unencodedData);
fclose( $fp );

Thanks!

谢谢！

回答by Radim Burget

Please check picEdit project, which implements taking snapshot from camera. Tested on PC and Android (with Chrome, it seems that native browser does not support access to camera):

请检查picEdit 项目，它实现了从相机拍摄快照。在PC和Android上测试（使用Chrome，似乎原生浏览器不支持访问相机）：

• Demo: http://andyvr.github.io/picEdit/
• Download: https://github.com/andyvr/picEdit

• 演示：http: //andyvr.github.io/picEdit/
• 下载：https: //github.com/andyvr/picEdit