如何在浏览器中控制使用USB摄像头
在支持HTML5的瀏覽器中要啟用連接到電腦的USB攝像頭非常方便，只需要使用getUserMedia()。不過這個接口提供的功能比較有限（比如，無法調節攝像頭參數），且不兼容老的瀏覽器。要兼顧易用性和兼容性，可以創建一個桌面的攝像頭應用（C/C++, Java，Python）來獲取數據，然后通過server發送給瀏覽器的img元素來顯示。這樣既可以做到對攝像頭的完全控制，又可以把應用運行在所有的瀏覽器上。Dynamsoft Camera SDK就是這種方案（后臺camera service + 前端JavaScript庫）。在這篇文章中，我會分享一下如何使用JavaScript和PHP從視頻流中采集圖像并上傳到Web服務器。
準備工作：
- 編程語言：HTML，JavaScript，PHP
- 瀏覽器： IE v6或更高版本，Chrome，Firefox，Edge，Safari等
- Dynamsoft Camera SDK 6.0。
快速搭建用于Web瀏覽器的攝像頭應用
拷貝資源目錄Dynamsoft\Dynamsoft Camera SDK 6.0 Trial\DCSResources到工程根目錄。
創建HTML頁面ImageUpload.html。按順序添加兩個JS文件：
<head><script type="text/javascript" src="DWSResources/dynamsoft.webcam.config.js"> </script> <script type="text/javascript" src="DWSResources/dynamsoft.webcam.initiate.js"> </script> </head>創建兩個容器，分別用于顯示視頻和圖像：
<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>初始化網絡攝像頭對象，然后播放視頻：
<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>創建按鈕事件用于抓取圖像：
<input type="button" value="Grab" onclick="acquireImage();" /><script type="text/javascript"> //capture an image function acquireImage() {if (dwsObject) {dwsObject.camera.captureImage('image-container');}} </script>保存文件，然后在瀏覽器中訪問頁面：
現在通過HTTP上傳文件到Web服務器。使用setHTTPFormFields可以設置額外字段。在ImageUpload.html中，我們添加一個上傳按鈕。
<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>創建一個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;?>就這么簡單。
源碼
https://www.dynamsoft.com/downloads/dynamsoft-webcam-sdk-sample-download.aspx?SampleID=167
總結
以上是生活随笔為你收集整理的如何在浏览器中控制使用USB摄像头的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 残念——开端
- 下一篇： 浏览器中刷新、强制刷新和重新载入的区别是