。
1 - ファイル
2を格納するimagesという名前のフォルダを作成します - 次の内容のhtml5-webcam-save.phpという名前のファイルを作成します。
<?php
$rawData = $_POST['imgBase64'];
print $rawData;
$filteredData = explode(',', $rawData);
$unencoded = base64_decode($filteredData[1]);
$datime = date("Y-m-d-H.i.s", time()) ; # - 3600*7
$userid = $_POST['userid'] ;
// name & save the image file
$fp = fopen('images/'.$datime.'-'.$userid.'.jpg', 'w');
fwrite($fp, $unencoded);
fclose($fp);
3 - メインページを作成します。
selfie_html5を。 html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
navigator.getUserMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia);
if (navigator.getUserMedia)
{
navigator.getUserMedia(
{
video:true,
audio:false
},
function(stream) { /* do-say something */ },
function(error) { alert('Something went wrong. (error code ' + error.code + ')');
return; }
);
}
else {
alert("Sorry, the browser you are using doesn't support the HTML5 webcam API");
}
</script>
<style>
.camcontent{
display: block;
position: relative;
overflow: hidden;
height: 480px;
margin: auto;
}
.cambuttons button {
border-radius: 15px;
font-size: 18px;
}
.cambuttons button:hover {
cursor: pointer;
border-radius: 15px;
background: #00dd00 ; /* green */
}
</style>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<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 },
image_format= "jpeg",
jpeg_quality= 85,
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.srcObject = stream;
video.play();
$("#snap").show();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
$("#snap").show();
}, errBack);
} else if(navigator.mozGetUserMedia) { // moz-prefixed
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
$("#snap").show();
}, errBack);
}
// video.play(); these 2 lines must be repeated above 3 times
// $("#snap").show(); rather than here once, to keep "capture" hidden
// until after the webcam has been activated.
// Get-Save Snapshot - image
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
// the fade only works on firefox?
$("#video").fadeOut("slow");
$("#canvas").fadeIn("slow");
$("#snap").hide();
$("#reset").show();
$("#upload").show();
});
// reset - clear - to Capture New Photo
document.getElementById("reset").addEventListener("click", function() {
$("#video").fadeIn("slow");
$("#canvas").fadeOut("slow");
$("#snap").show();
$("#reset").hide();
$("#upload").hide();
});
// Upload image to sever
document.getElementById("upload").addEventListener("click", function(){
var dataUrl = canvas.toDataURL("image/jpeg", 0.85);
$("#uploading").show();
$.ajax({
type: "POST",
url: "html5-webcam-save.php",
data: {
imgBase64: dataUrl,
user: "Joe",
userid: 25
}
}).done(function(msg) {
console.log("saved");
$("#uploading").hide();
$("#uploaded").show();
});
});
}, false);
</script>
<div class="camcontent">
<video id="video" autoplay></video>
<canvas id="canvas" width="640" height="480"> </canvas>
</div>
<div class="cambuttons">
<button id="snap" style="display:none;"> Capture </button>
<button id="reset" style="display:none;"> Reset </button>
<button id="upload" style="display:none;"> Upload </button>
<br> <span id=uploading style="display:none;"> Uploading has begun . . . </span>
<span id=uploaded style="display:none;"> Success, your photo has been uploaded!</span>
</div>
</body>
</html>
メモ：
私はコードをテストして、期待どおりに動作します。問題が発生した場合は、imagesフォルダに書き込み権限があることを確認してください。
フォルダstructur E：
/
html5-webcam-save.php
selfie_html5.html
/images (folder)
https://www.kirupa.com/html5/accessing_your_webcam_in_html5.htm、ウェブカメラはかなりうまく機能し、この – Qwerty