當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

如何在浏览器中控制使用USB摄像头

發(fā)布時(shí)間：2024/1/18 HTML 26 豆豆

生活随笔收集整理的這篇文章主要介紹了如何在浏览器中控制使用USB摄像头小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

在支持HTML5的瀏覽器中要啟用連接到電腦的USB攝像頭非常方便，只需要使用getUserMedia()。不過(guò)這個(gè)接口提供的功能比較有限（比如，無(wú)法調(diào)節(jié)攝像頭參數(shù)），且不兼容老的瀏覽器。要兼顧易用性和兼容性，可以創(chuàng)建一個(gè)桌面的攝像頭應(yīng)用（C/C++, Java，Python）來(lái)獲取數(shù)據(jù)，然后通過(guò)server發(fā)送給瀏覽器的img元素來(lái)顯示。這樣既可以做到對(duì)攝像頭的完全控制，又可以把應(yīng)用運(yùn)行在所有的瀏覽器上。Dynamsoft Camera SDK就是這種方案（后臺(tái)camera service + 前端JavaScript庫(kù)）。在這篇文章中，我會(huì)分享一下如何使用JavaScript和PHP從視頻流中采集圖像并上傳到Web服務(wù)器。

準(zhǔn)備工作：

編程語(yǔ)言：HTML，JavaScript，PHP
瀏覽器： IE v6或更高版本，Chrome，Firefox，Edge，Safari等
Dynamsoft Camera SDK 6.0。

快速搭建用于Web瀏覽器的攝像頭應(yīng)用

拷貝資源目錄Dynamsoft\Dynamsoft Camera SDK 6.0 Trial\DCSResources到工程根目錄。

創(chuàng)建HTML頁(yè)面ImageUpload.html。按順序添加兩個(gè)JS文件：

創(chuàng)建兩個(gè)容器，分別用于顯示視頻和圖像：

初始化網(wǎng)絡(luò)攝像頭對(duì)象，然后播放視頻：

創(chuàng)建按鈕事件用于抓取圖像：

<input type="button" value="Grab" onclick="acquireImage();" /><script type="text/javascript"> //capture an image function acquireImage() {if (dwsObject) {dwsObject.camera.captureImage('image-container');}} </script>

保存文件，然后在瀏覽器中訪問(wèn)頁(yè)面：

現(xiàn)在通過(guò)HTTP上傳文件到Web服務(wù)器。使用setHTTPFormFields可以設(shè)置額外字段。在ImageUpload.html中，我們添加一個(gè)上傳按鈕。

<a id="btn-upload" class="btn-upload" onclick="onBtnUploadClick(this);">Upload</a><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>

創(chuàng)建一個(gè)ActionPage.php來(lái)接收?qǐng)D像數(shù)據(jù)：

<?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;?>

就這么簡(jiǎn)單。

源碼

https://www.dynamsoft.com/downloads/dynamsoft-webcam-sdk-sample-download.aspx?SampleID=167

總結(jié)

以上是生活随笔為你收集整理的如何在浏览器中控制使用USB摄像头的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。