PHP camera call case: secrets for making dynamic photo collections-PHP Tutorial-php.cn

PHP camera call case: secrets for making dynamic photo collections

PHPz

Release： 2023-07-31 11:58:02

Original

1334 people have browsed it

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>

Copy after login

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>

Copy after login

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>

Copy after login

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!