新聞中心News
聯(lián)系方式Contact Us
- 深圳市聚泓瀚科技有限公司
- 地址：深圳市寶安區(qū)松崗街道廣深路松崗段2號(hào)廠房宇恒工業(yè)園1棟4樓
- 手機(jī)：13923733903
- 郵箱：kevin@juhonghan.com
- 網(wǎng)址：yqmpw.cn
- 如何在瀏覽器中控制使用USB攝像頭
發(fā)布時(shí)間：2019-03-08 閱覽次數(shù)：989 次
在支持HTML5的瀏覽器中要啟用連接到電腦的USB攝像頭非常方便，只需要使用getUserMedia()。不過這個(gè)接口提供的功能比較有限（比如，無法調(diào)節(jié)攝像頭參數(shù)），且不兼容老的瀏覽器。要兼顧易用性和兼容性，可以創(chuàng)建一個(gè)桌面的攝像頭應(yīng)用（C/C++, Java，Python）來獲取數(shù)據(jù)，然后通過server發(fā)送給瀏覽器的img元素來顯示。這樣既可以做到對(duì)攝像頭的完全控制，又可以把應(yīng)用運(yùn)行在所有的瀏覽器上。Dynamsoft Camera SDK就是這種方案（后臺(tái)camera service + 前端JavaScript庫）。在這篇文章中，我會(huì)分享一下如何使用JavaScript和PHP從視頻流中采集圖像并上傳到Web服務(wù)器。
準(zhǔn)備工作：
編程語言：HTML，JavaScript，PHP
瀏覽器： IE v6或更高版本，Chrome，F(xiàn)irefox，Edge，Safari等
Dynamsoft Camera SDK 6.0。
快速搭建用于Web瀏覽器的攝像頭應(yīng)用
拷貝資源目錄Dynamsoft\Dynamsoft Camera SDK 6.0 Trial\DCSResources到工程根目錄。
創(chuàng)建HTML頁面ImageUpload.html。按順序添加兩個(gè)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>
1
2
3
4
創(chuàng)建兩個(gè)容器，分別用于顯示視頻和圖像：
<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>
1
2
初始化網(wǎng)絡(luò)攝像頭對(duì)象，然后播放視頻：
<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>
1
2
3
4
5
6
7
創(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>
1
2
3
4
5
6
7
8
9
10
保存文件，然后在瀏覽器中訪問頁面：
現(xiàn)在通過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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
創(chuàng)建一個(gè)ActionPage.php來接收圖像數(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;
?>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
就這么簡單。
---------------------
作者：yushulx
來源：CSDN
原文：https://blog.csdn.net/yushulx/article/details/78134787
版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請附上博文鏈接！
準(zhǔn)備工作：
編程語言：HTML，JavaScript，PHP
瀏覽器： IE v6或更高版本，Chrome，F(xiàn)irefox，Edge，Safari等
Dynamsoft Camera SDK 6.0。
快速搭建用于Web瀏覽器的攝像頭應(yīng)用
拷貝資源目錄Dynamsoft\Dynamsoft Camera SDK 6.0 Trial\DCSResources到工程根目錄。
創(chuàng)建HTML頁面ImageUpload.html。按順序添加兩個(gè)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>
1
2
3
4
創(chuàng)建兩個(gè)容器，分別用于顯示視頻和圖像：
<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>
1
2
初始化網(wǎng)絡(luò)攝像頭對(duì)象，然后播放視頻：
<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>
1
2
3
4
5
6
7
創(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>
1
2
3
4
5
6
7
8
9
10
保存文件，然后在瀏覽器中訪問頁面：
現(xiàn)在通過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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
創(chuàng)建一個(gè)ActionPage.php來接收圖像數(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;
?>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
就這么簡單。
---------------------
作者：yushulx
來源：CSDN
原文：https://blog.csdn.net/yushulx/article/details/78134787
版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請附上博文鏈接！
