如何在HTML页面中使用摄像头拍摄快照?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (227)

如果我保存包含绘图的<canvas>。一切都很好。但是,如果我想保存包含图像(来自网络摄像头流的帧)的canvas图像,它不起作用,它不会向服务器发送任何内容。

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.php代码:

$png =$_POST['data'];
$filteredData=substr($png, strpos($png, ",")+1);
$unencodedData=base64_decode($filteredData);
$fp = fopen( 'image.png', 'wb' );
fwrite( $fp, $unencodedData);
fclose( $fp );
提问于
用户回答回答于

在浏览器中录制音频或视频没有本机支持。你需要一个插件。

用户回答回答于

请检查picEdit项目,该项目实现从相机拍摄快照。在PC和Android上测试过(使用Chrome时,本机浏览器似乎不支持访问摄像头)。

扫码关注云+社区

领取腾讯云代金券