如何使用Dynamic Web TWAIN附加組件構(gòu)建PHP Webcam App
Dynamic Web TWAIN是一個(gè)專為Web應(yīng)用程序設(shè)計(jì)的TWAIN掃描識(shí)別控件。你只需在TWAIN接口寫(xiě)幾行代碼,就可以用兼容TWAIN的掃描儀掃描文檔或從數(shù)碼相機(jī)/采集卡中獲取圖像。然后用戶可以編輯圖像并將圖像保存為多種格式,用戶可保存圖像到遠(yuǎn)程數(shù)據(jù)庫(kù)或者SharePoint。這個(gè)TWAIN控件還支持上傳和處理本地圖像。
點(diǎn)擊下載Dynamic Web TWAIN試用版
是否想讓用戶從您的PHP應(yīng)用程序中捕獲圖片?您可以使用網(wǎng)絡(luò)攝像頭插件輕松實(shí)現(xiàn)它。
在本文中,我們將向您展示如何構(gòu)建一個(gè)PHP網(wǎng)絡(luò)攝像頭應(yīng)用程序以顯示實(shí)時(shí)視頻流,進(jìn)行在線網(wǎng)絡(luò)攝像頭捕獲,以及如何使用Dynamic Web TWAIN網(wǎng)絡(luò)攝像頭插件將圖像上傳到網(wǎng)絡(luò)服務(wù)器。
安裝
下載最新版本的Dynamic Web TWAIN。在運(yùn)行安裝程序時(shí),勾選網(wǎng)絡(luò)攝像頭捕獲選項(xiàng)。
系統(tǒng)要求
- 客戶端:Windows;IE v6或更高版本,Chrome,F(xiàn)irefox;兼容UVC的網(wǎng)絡(luò)攝像頭
- 服務(wù)器端:PHP 7.3
為Web瀏覽器構(gòu)建PHP Webcam App的基本步驟
資源資源
將資源文件夾從Dynamic Web TWAIN目錄復(fù)制到您的項(xiàng)目。
檢查文件Resources \ addon \ dynamsoft.webtwain.addon.webcam.js是否存在。如果忘記安裝網(wǎng)絡(luò)攝像頭插件,則必須重新安裝Dynamic Web TWAIN。
當(dāng)前,該插件無(wú)法在線下載。
PHP代碼
創(chuàng)建一個(gè)操作頁(yè)面upload.php以從Web客戶端接收?qǐng)D像:
<?php $strJson = "{\"success\":false}"; try{ $file = $_FILES["RemoteFile"]; $fileName = $_POST["fileName"]; if ($fileName == "" || $fileName == null) $fileName = $file["name"]; $filePath = dirname(__FILE__) . "/upload/"; if (!file_exists($filePath)) { mkdir($filePath); } if (file_exists($filePath . $fileName)) { $iniNum = 0; if (strpos($fileName, "(") !== FALSE && strpos($fileName, ")") !== FALSE) { $leftPhPos = strrpos($fileName, "("); $rightPhPos = strrpos($fileName, ")"); if ($leftPhPos < $rightPhPos) { $numStr = substr($fileName, $leftPhPos + 1, $rightPhPos - $leftPhPos - 1); if (is_numeric($numStr)) { $iniNum = intval($numStr); $fileName = substr($fileName, 0, $leftPhPos) . substr($fileName, $rightPhPos + 1); } else { $iniNum = 0; } } } $indexPoint = strrpos($fileName, "."); $str1 = substr($fileName, 0, $indexPoint) . "("; $str2 = ")" . substr($fileName, $indexPoint); for ($i = $iniNum; ; ++$i) { if (!file_exists($filePath . ($str1 . $i . $str2))) { $fileName = $str1 . $i . $str2; break; } } } $fileFullPath = $filePath . $fileName; if(strpos($file["type"], 'text/plain') === false){ move_uploaded_file($file["tmp_name"] , $fileFullPath); }else{ $file_contents = base64_decode(str_replace(' ', '+', file_get_contents($file['tmp_name']))); file_put_contents($fileFullPath, $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; ?>
HTML代碼
創(chuàng)建一個(gè)HTML網(wǎng)頁(yè)index.html。
創(chuàng)建一個(gè)HTML元素作為Web Twain容器:
<div id="dwtcontrolContainer"></div>
初始化Dynamic Web TWAIN對(duì)象并獲取網(wǎng)絡(luò)攝像頭列表:
Dynamsoft.WebTwainEnv.AutoLoad = false; Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady', Dynamsoft_OnReady); // Register OnWebTwainReady event. This event fires as soon as Dynamic Web TWAIN is initialized and ready to be used var DWObject; var isVideoOn = true; function Dynamsoft_OnReady() { DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer'); // Get the Dynamic Web TWAIN object that is embeded in the div with id 'dwtcontrolContainer' if (DWObject) { DWObject.Width = 504; DWObject.Height = 600; var arySource = DWObject.Addon.Webcam.GetSourceList(); for (var i = 0; i < arySource.length; i++) document.getElementById("source").options.add(new Option(arySource[i], arySource[i]), i); // Get Webcam Source names and put them in a drop-down box } document.getElementById('source').onchange = function () { DWObject.Addon.Webcam.SelectSource(document.getElementById("source").options[document.getElementById("source").selectedIndex].value); SetIfWebcamPlayVideo(true); disableButton(document.getElementById("btn-upload")); } document.getElementById('source').onchange(); }
要播放和停止視頻,請(qǐng)按以下方式調(diào)用API:
DWObject.Addon.Webcam.StopVideo(); DWObject.Addon.Webcam.PlayVideo(DWObject, 80, function () { });
圖片準(zhǔn)備好后,您可以通過(guò)調(diào)用HTTPUploadThroughPost()將其上傳到Web服務(wù)器:
function upload() { if (DWObject) { // If no image in buffer, return the function if (DWObject.HowManyImagesInBuffer == 0) return; var strHTTPServer = location.hostname; //The name of the HTTP server. For example: "www.dynamsoft.com"; var CurrentPathName = unescape(location.pathname); var CurrentPath = CurrentPathName.substring(0, CurrentPathName.lastIndexOf("/") + 1); var strActionPage = CurrentPath + "upload.php"; // Action page DWObject.IfSSL = false; // Set whether SSL is used DWObject.HTTPPort = location.port == "" ? 80 : location.port; var Digital = new Date(); var uploadfilename = Digital.getMilliseconds(); // Uses milliseconds according to local time as the file name //Upload image in JPEG DWObject.HTTPUploadThroughPost(strHTTPServer, DWObject.CurrentImageIndexInBuffer, strActionPage, uploadfilename + ".jpg", OnHttpUploadSuccess, OnHttpUploadFailure); } }
網(wǎng)絡(luò)服務(wù)器
要快速部署PHP網(wǎng)絡(luò)攝像頭項(xiàng)目,可以使用PHP內(nèi)置的Web服務(wù)器:
php -S localhost:8000
由于網(wǎng)絡(luò)攝像頭插件與WebRTC不相關(guān),因此不存在兼容性問(wèn)題。您可以在任何網(wǎng)絡(luò)瀏覽器中使用該應(yīng)用程序(注:僅Windows)。
如果您對(duì)將網(wǎng)絡(luò)攝像頭捕獲集成到PHP應(yīng)用程序中有任何疑問(wèn),請(qǐng)告訴我們。