如何使用Dynamic Web TWAIN附加組件構(gòu)建PHP Webcam App

---

Dynamic Web TWAIN是一個(gè)專為Web應(yīng)用程序設(shè)計(jì)的TWAIN掃描識別控件。你只需在TWAIN接口寫幾行代碼，就可以用兼容TWAIN的掃描儀掃描文檔或從數(shù)碼相機(jī)/采集卡中獲取圖像。然后用戶可以編輯圖像并將圖像保存為多種格式，用戶可保存圖像到遠(yuǎn)程數(shù)據(jù)庫或者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)前，該插件無法在線下載。

PHP代碼

創(chuàng)建一個(gè)操作頁面upload.php以從Web客戶端接收圖像：

<?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)頁index.html。

創(chuàng)建一個(gè)HTML元素作為Web Twain容器：

<div id="dwtcontrolContainer"></div>

初始化Dynamic Web TWAIN對象并獲取網(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();
		}

要播放和停止視頻，請按以下方式調(diào)用API：

DWObject.Addon.Webcam.StopVideo();
DWObject.Addon.Webcam.PlayVideo(DWObject, 80, function () { });

圖片準(zhǔn)備好后，您可以通過調(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ǎng)絡(luò)瀏覽器中使用該應(yīng)用程序（注：僅Windows）。

如果您對將網(wǎng)絡(luò)攝像頭捕獲集成到PHP應(yīng)用程序中有任何疑問，請告訴我們。

---

想要購買Dynamic Web TWAIN正版授權(quán)，或了解更多產(chǎn)品信息請點(diǎn)擊