Home > Article > Backend Development > PHP camera call case: secrets for making dynamic photo collections
PHP camera call case: secrets for making dynamic photo collections
- PHPzOriginal
- 2023-07-30 23:33:211332browse
PHP Camera Call Case: The Secret to Making a Dynamic Photo Collection
Camera call is one of the common functions in modern web applications. By calling the camera, we can realize real-time interactive functions such as taking photos and recording videos. In this article, we will introduce how to use PHP to call the camera and apply it to the case of making a dynamic photo collection.
- Get camera permission
Before using the camera, we first need to obtain the user's camera permission. This can be achieved using the getUserMedia method of HTML5. The following is a simple sample code:
<!DOCTYPE html>
<html>
<head>
<title>摄像头权限获取示例</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<button id="startCamera">开始摄像头</button>
<video id="videoElement" autoplay></video>
<script>
$(document).ready(function() {
$('#startCamera').on('click', function() {
navigator.mediaDevices.getUserMedia({ video: true })
.then(function(stream) {
var video = document.getElementById('videoElement');
video.srcObject = stream;
video.play();
})
.catch(function(error) {
console.log('无法获取摄像头权限:', error);
});
});
});
</script>
</body>
</html>By clicking the Start Camera button, we can obtain the user's camera permissions and display the camera footage on the page.
- Photography function
After obtaining the camera permission, we can add the photography function. The following is a sample code for using Canvas to take photos:
<!DOCTYPE html>
<html>
<head>
<title>摄像头拍照示例</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<button id="startCamera">开始摄像头</button>
<video id="videoElement" autoplay></video>
<button id="takePhoto">拍照</button>
<canvas id="canvasElement"></canvas>
<script>
$(document).ready(function() {
const video = document.getElementById('videoElement');
const canvas = document.getElementById('canvasElement');
const context = canvas.getContext('2d');
$('#startCamera').on('click', function() {
navigator.mediaDevices.getUserMedia({ video: true })
.then(function(stream) {
video.srcObject = stream;
video.play();
})
.catch(function(error) {
console.log('无法获取摄像头权限:', error);
});
});
$('#takePhoto').on('click', function() {
context.drawImage(video, 0, 0, canvas.width, canvas.height);
var imgData = canvas.toDataURL('image/png');
var link = document.createElement('a');
link.href = imgData;
link.download = 'photo.png';
link.click();
});
});
</script>
</body>
</html>By clicking the Photography button, the page will draw the current camera image onto the Canvas and generate a download link, which the user can click Link to download photos.
- Dynamic photo album
Based on the above, we can dynamically display the photos taken on the page to create a dynamic photo album. The following is a simple implementation example:
<!DOCTYPE html>
<html>
<head>
<title>动态照片集示例</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<button id="startCamera">开始摄像头</button>
<video id="videoElement" autoplay></video>
<button id="takePhoto">拍照</button>
<div id="photoGallery"></div>
<script>
$(document).ready(function() {
const video = document.getElementById('videoElement');
const photoGallery = document.getElementById('photoGallery');
$('#startCamera').on('click', function() {
navigator.mediaDevices.getUserMedia({ video: true })
.then(function(stream) {
video.srcObject = stream;
video.play();
})
.catch(function(error) {
console.log('无法获取摄像头权限:', error);
});
});
$('#takePhoto').on('click', function() {
const photoContainer = document.createElement('div');
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
context.drawImage(video, 0, 0, canvas.width, canvas.height);
var imgData = canvas.toDataURL('image/png');
const photoElement = document.createElement('img');
photoElement.src = imgData;
const deleteButton = document.createElement('button');
deleteButton.textContent = '删除';
deleteButton.addEventListener('click', function() {
photoContainer.remove();
});
photoContainer.appendChild(photoElement);
photoContainer.appendChild(deleteButton);
photoGallery.appendChild(photoContainer);
});
});
</script>
</body>
</html>By clicking the Photography button, the page will dynamically add the photos taken in the photo collection and provide a deletion function.
Through the above example, we can see how to use PHP to call the camera to realize the functions of taking pictures and dynamic photo collections. I hope this article will help you understand and use camera calls.
The above is the detailed content of PHP camera call case: secrets for making dynamic photo collections. For more information, please follow other related articles on the PHP Chinese website!