Хотите, чтобы пользователи могли захватывать изображения из вашего PHP-приложения? Вы можете легко добиться этого с помощью библиотеки JavaScript для веб-камер, такой как Dynamsoft Camera SDK.

В этой статье мы покажем вам, как показывать потоковое видео в реальном времени, делать снимки и загружать изображения на веб-сервер в PHP-приложении с помощью Dynamsoft Camera SDK.

Системные Требования:

  • Клиентская сторона: Windows; IE v6 или выше, Chrome, Firefox; Веб-камера, совместимая с UVC
  • На стороне сервера: PHP, ваш желаемый веб-сервер

Сначала установите Dynamsoft Camera SDK, чтобы вы могли вызывать его API-интерфейсы веб-камеры в своем приложении.

Скачать 30-дневную бесплатную пробную версию

Основные этапы интеграции захвата с веб-камеры в приложение 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.