使用php脚本将网络摄像头照片保存到硬盘上不起作用

Question

This code is not working to save the photo on hard disk, so can anybody please tell me which code will used to save a photo to hard disk. 该代码无法将照片保存到硬盘上，因此任何人都可以告诉我使用哪个代码将照片保存到硬盘上。

<html>
<head>
    <div id="my_camera" style="width:520px; height:440px;margin-left:180px;"></div>
    <div id="my_result" style="position:absolute;margin-left:740px;margin-top:-440px;"></div>
    <script src="cam/webcam.js"></script>
    <script type="text/javascript">
        Webcam.attach('#my_camera');
        function take_snapshot() {
            Webcam.set({
                width: 320,
                height: 240,
                dest_width: 640,
                dest_height: 480,
                image_format: 'jpg',
                jpeg_quality: 90,
                force_flash: false,
                flip_horiz: true,
                fps: 45
            });

            Webcam.snap(function(data_uri) {
                document.getElementById('my_result').innerHTML = '<img src="' + data_uri + '"/>';
            });
        }
    </script>
    <a href="javascript:void(take_snapshot())" style="margin-left:400px">Take Snapshot</a>
</head>

</html>
<?php
    move_uploaded_file($_FILES['webcam']['tmp_name'], 'webcam.jpg');    
?>

Answer 1

You need to post the captured image to php , for that you can use jquery .ajax() , here's a complete example: 您需要将拍摄的图像上传到php ，对于您可以使用jquery .ajax()这里有一个完整的例子：

upload.php upload.php

<?php
$img = !empty($_REQUEST['imgBase64']) ? $_REQUEST['imgBase64'] : die("No image was posted");
$imgName = $_REQUEST['imgName'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$fileData = base64_decode($img);
//saving
file_put_contents($imgName, $fileData);

Now the js / jquery , css and html : 现在是js / jquery ， css和html ：

 (function() { // The width and height of the captured photo. We will set the // width to the value defined here, but the height will be // calculated based on the aspect ratio of the input stream. var width = 320; // We will scale the photo width to this var height = 0; // This will be computed based on the input stream // |streaming| indicates whether or not we're currently streaming // video from the camera. Obviously, we start at false. var streaming = false; // The various HTML elements we need to configure or control. These // will be set by the startup() function. var video = null; var canvas = null; var photo = null; var startbutton = null; function startup() { video = document.getElementById('video'); canvas = document.getElementById('canvas'); photo = document.getElementById('photo'); startbutton = document.getElementById('startbutton'); navigator.getMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); navigator.getMedia({ video: true, audio: false }, function(stream) { if (navigator.mozGetUserMedia) { video.mozSrcObject = stream; } else { var vendorURL = window.URL || window.webkitURL; video.src = vendorURL.createObjectURL(stream); } video.play(); }, function(err) { console.log("An error occured! " + err); } ); video.addEventListener('canplay', function(ev) { if (!streaming) { height = video.videoHeight / (video.videoWidth / width); // Firefox currently has a bug where the height can't be read from // the video, so we will make assumptions if this happens. if (isNaN(height)) { height = width / (4 / 3); } video.setAttribute('width', width); video.setAttribute('height', height); canvas.setAttribute('width', width); canvas.setAttribute('height', height); streaming = true; } }, false); startbutton.addEventListener('click', function(ev) { takepicture(); ev.preventDefault(); }, false); clearphoto(); } // Fill the photo with an indication that none has been // captured. function clearphoto() { var context = canvas.getContext('2d'); context.fillStyle = "#AAA"; context.fillRect(0, 0, canvas.width, canvas.height); var data = canvas.toDataURL('image/png'); photo.setAttribute('src', data); } // Capture a photo by fetching the current contents of the video // and drawing it into a canvas, then converting that to a PNG // format data URL. By drawing it on an offscreen canvas and then // drawing that to the screen, we can change its size and/or apply // other changes before drawing it. function takepicture() { var context = canvas.getContext('2d'); if (width && height) { canvas.width = width; canvas.height = height; context.drawImage(video, 0, 0, width, height); var data = canvas.toDataURL('image/png'); photo.setAttribute('src', data); $.ajax({ type: "POST", url: "upload.php", data: { imgBase64: data, imgName: "webcam.png" } }).done(function(o) { console.log('saved'); }); } else { clearphoto(); } } // Set up our event listener to run the startup process // once loading is complete. window.addEventListener('load', startup, false); })();

 #video { border: 1px solid black; box-shadow: 2px 2px 3px black; width:320px; height:240px; } #photo { border: 1px solid black; box-shadow: 2px 2px 3px black; width:320px; height:240px; } #canvas { display:none; } .camera { width: 340px; display:inline-block; } .output { width: 340px; display:inline-block; } #startbutton { display:block; position:relative; margin-left:auto; margin-right:auto; bottom:32px; background-color: rgba(0, 150, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.2); font-size: 14px; font-family: "Lucida Grande", "Arial", sans-serif; color: rgba(255, 255, 255, 1.0); } .contentarea { font-size: 16px; font-family: "Lucida Grande", "Arial", sans-serif; width: 760px; }

 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <meta charset='utf-8'> </head> <body> <div class="contentarea"> <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> </div> </body> </html>

Based on : 基于：
https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos https://developer.mozilla.org/zh-CN/docs/Web/API/WebRTC_API/Taking_still_photos
https://stackoverflow.com/a/13198699/797495 https://stackoverflow.com/a/13198699/797495
https://stackoverflow.com/a/31128229/797495 https://stackoverflow.com/a/31128229/797495

Note: 注意：
I've tested the code on my server and it works as intended. 我已经在服务器上测试了代码，它可以按预期工作。

使用php脚本将网络摄像头照片保存到硬盘上不起作用

问题描述

1 个解决方案

解决方案1
0 2016-05-22 11:50:19

使用php脚本将网络摄像头照片保存到硬盘上不起作用

问题描述

1 个解决方案

解决方案1 0 2016-05-22 11:50:19

解决方案1
0 2016-05-22 11:50:19