128 lines
4.2 KiB
PHP
128 lines
4.2 KiB
PHP
<style>
|
|
#video {
|
|
display: none;
|
|
}
|
|
</style>
|
|
|
|
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-body">
|
|
<h1>Camera</h1>
|
|
|
|
|
|
<div>
|
|
<video id="video" width="100%" height="80%" autoplay></video>
|
|
|
|
<canvas id="canvas" style="display:none;"></canvas>
|
|
|
|
|
|
<center>
|
|
<button id="snap" onclick="snapPhoto()" class="btn btn-primary">Snap Photo</button>
|
|
<button id="openCameraBtn" onclick="openCamera()" class="btn btn-primary">Open Camera</button>
|
|
</center>
|
|
|
|
<img src="" alt="Captured Image" id="UploadedPhoto" style="width: 100%; height: 100%;">
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const snapBtn = document.getElementById('snap');
|
|
snapBtn.style.display = "none";
|
|
|
|
function openCamera() {
|
|
const video = document.getElementById('video');
|
|
const openCameraBtn = document.getElementById('openCameraBtn');
|
|
const snapBtn = document.getElementById('snap');
|
|
const uploadForm = document.getElementById('uploadForm');
|
|
const UploadedPhoto = document.getElementById('UploadedPhoto');
|
|
|
|
navigator.mediaDevices.getUserMedia({
|
|
video: true
|
|
})
|
|
.then(stream => {
|
|
video.srcObject = stream;
|
|
video.style.display = "block";
|
|
snapBtn.style.display = "block";
|
|
uploadForm.style.display = "block";
|
|
openCameraBtn.style.display = "none";
|
|
})
|
|
.catch(err => {
|
|
console.error("Error accessing camera: ", err);
|
|
});
|
|
}
|
|
|
|
function snapPhoto() {
|
|
const video = document.getElementById('video');
|
|
const canvas = document.getElementById('canvas');
|
|
const context = canvas.getContext('2d');
|
|
|
|
// Set the canvas width and height to match the video
|
|
canvas.width = video.videoWidth;
|
|
canvas.height = video.videoHeight;
|
|
|
|
context.drawImage(video, 0, 0, canvas.width, canvas.height);
|
|
|
|
const imageData = canvas.toDataURL('image/png');
|
|
const inputElement = document.getElementById("imageData");
|
|
if (inputElement) {
|
|
inputElement.value = imageData;
|
|
}
|
|
const imgElement = document.getElementById("UploadedPhoto");
|
|
if (imgElement) {
|
|
imgElement.src = imageData;
|
|
imgElement.style.display = "block";
|
|
}
|
|
|
|
const imgElementProfile = document.getElementById("avatar");
|
|
if (imgElementProfile) {
|
|
imgElementProfile.src = imageData;
|
|
// imgElementProfile.style.display = "block";
|
|
}
|
|
|
|
const imgElementProfileSave = document.getElementById("photoDM");
|
|
if (imgElementProfileSave) {
|
|
imgElementProfileSave.scr = imageData;
|
|
var imgElementProfileSaveFile = document.getElementById('UploadedPhoto');
|
|
var imageDataProfile = imgElementProfileSaveFile.src;
|
|
var blob = dataURLtoBlob(imageDataProfile);
|
|
console.log("blob", blob);
|
|
var file = new File([blob], "camera_photo.png", {
|
|
type: blob.type
|
|
});
|
|
var dataTransfer = new DataTransfer();
|
|
dataTransfer.items.add(file);
|
|
imgElementProfileSave.files = dataTransfer.files;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function dataURLtoBlob(dataurl) {
|
|
var arr = dataurl.split(','),
|
|
mime = arr[0].match(/:(.*?);/)[1],
|
|
bstr = atob(arr[1]),
|
|
n = bstr.length,
|
|
u8arr = new Uint8Array(n);
|
|
while (n--) {
|
|
u8arr[n] = bstr.charCodeAt(n);
|
|
}
|
|
return new Blob([u8arr], {
|
|
type: mime
|
|
});
|
|
}
|
|
</script> |