Хотите, чтобы пользователи могли захватывать изображения из вашего PHP-приложения? Вы можете легко добиться этого с помощью библиотеки JavaScript для веб-камер, такой как Dynamsoft Camera SDK.
В этой статье мы покажем вам, как показывать потоковое видео в реальном времени, делать снимки и загружать изображения на веб-сервер в PHP-приложении с помощью Dynamsoft Camera SDK.
Системные Требования:
- Клиентская сторона: Windows; IE v6 или выше, Chrome, Firefox; Веб-камера, совместимая с UVC
- На стороне сервера: PHP, ваш желаемый веб-сервер
Сначала установите Dynamsoft Camera SDK, чтобы вы могли вызывать его API-интерфейсы веб-камеры в своем приложении.
Скачать 30-дневную бесплатную пробную версию
Основные этапы интеграции захвата с веб-камеры в приложение PHP:
- Добавьте код JavaScript и HTML, чтобы воспроизвести видеопоток и сделать снимок.
- Используйте метод загрузки HTTP для отправки данных изображения на сервер.
- Получите данные изображения со стороны клиента и сохраните файл изображения на диске сервера в PHP.
1. Создайте HTML-страницу для отображения видео и экрана веб-камеры. Мы назовем его ImageUpload.html здесь.
Скопируйте файлы ресурсов Dynamsoft Camera SDK. Вы можете найти папку DWSResources в папке установки Dynamsoft Webcam SDK.
Добавьте ссылки на два JS-файла SDK для веб-камеры.
[html]<head> <script type="text/javascript" src="DWSResources/dynamsoft.webcam.config.js"> </script> <script type="text/javascript" src="DWSResources/dynamsoft.webcam.initiate.js"> </script> </head> [/html]
Добавьте два контейнера для отображения видеопотока и захваченного изображения.
[html] <div id="video-container" style="width: 500px; height: 400px; display: inline-block; border: solid 1px gray"> </div> <div id="image-container" style="width: 500px; height: 400px; display: inline-block; border: solid 1px gray"> </div> [/html]
Инициализируйте объект веб-камеры, а затем воспроизведите видео.
[javascript]<script type="text/javascript"> dynamsoft.dwsEnv.init('video-container', 'image-container', onInitSuccess, onInitFailure); function onInitSuccess(videoViewerId, imageViewerId) { dwsObject = dynamsoft.dwsEnv.getObject(videoViewerId); dwsObject.camera.playVideo(); } </script> [/javascript]
Добавьте кнопку Grab и сценарии JS для захвата изображений.
[html]<input type="button" value="Grab" onclick="acquireImage();" />[/html] [javascript]<script type="text/javascript"> //capture an image function acquireImage() { if (dwsObject) { dwsObject.camera.captureImage('image-container'); } } </script> [/javascript]
Откройте HTML-страницу в браузере, и ниже показано, как она выглядит.
2. После захвата изображения мы хотим сохранить его на веб-сервере.
Dynamsoft Camera SDK предоставляет как синхронные, так и асинхронные методы HTTP для загрузки изображений. Вы можете передать дополнительные поля, которые хотите сохранить вместе с изображениями, используя метод setHTTPFormFields.
В ImageUpload.html добавим кнопку Загрузить.
[html]<a id="btn-upload" class="btn-upload" onclick="onBtnUploadClick(this);">Upload</a>[/html] [javascript]<script type="text/javascript"> function onBtnUploadClick() { var imageViewer = dwsObject.getImageViewer('image-container'); var counter, url = getCurPagePath() + 'ActionPage.php', fileName = “test.jpg”, imageType = imageViewer.io.EnumImageType.JPEG; imageIndexArray = [0]; imageViewer.io.setHTTPFormFields({ "fileName": fileName }); imageViewer.io.httpUploadAsync(url, imageIndexArray, imageType, onUploadSuccess, onUploadFailure); } </script> [/javascript]
3. Нам нужно создать страницу действий ActionPage.php для получения данных изображения и выполнения всех операций на стороне сервера, таких как сохранение данных на жестком диске или в базе данных и т. д.
ActionPage.php — получает данные изображения со стороны клиента и сохраняет захваченное изображение на диск сервера.
<?php $strJson = "{\"success\":false}";
try{ $file = $_FILES["RemoteFile"]; $fileName = $_POST["fileName"]; if ($fileName == "" || $fileName == null) $fileName = $file["name"]; $filePath = dirname(__FILE__) . "\\UploadedImages\\" . $fileName; if(trim($file["type"]) == "application/octet-stream"){ move_uploaded_file($file["tmp_name"] , $filePath); } else{ $file_contents = base64_decode(str_replace(' ', '+', file_get_contents($file['tmp_name']))); file_put_contents($filePath, $file_contents); } $strJson = "{\"success\":true, \"fileName\":\"" . $fileName . "\"}"; } catch(Exception $ex){ $strJson = "{\"success\":false, \"error\": \"" . ex.Message.Replace("\\", "\\\\") . "\"}"; } // Response.Clear();
header("Content-Type: application/json; charset=utf-8");
echo $strJson;
?>
Полный пример кода доступен для скачивания в галерее кода Dynamsoft.