php webcam拍照,如何在Web应用中集成摄像头拍照功能

在支持HTML5的浏览器中要启用连接到电脑的USB摄像头非常方便,只需要使用getUserMedia()。不过这个接口提供的功能比较有限(比如,无法调节摄像头参数),且不兼容老的浏览器。要兼顾易用性和兼容性,可以创建一个桌面的摄像头应用(C/C++, Java,Python)来获取数据,然后通过server发送给浏览器的元素来显示。这样既可以做到对摄像头的完全控制,又可以把应用运行在所有的浏览器上。Dynamsoft Camera SDK就是这种方案(后台camera service + 前端JavaScript库)。在这篇文章中,我会分享一下如何使用JavaScript和PHP从视频流中采集图像并上传到Web服务器。

准备工作:

编程语言:HTML,JavaScript,PHP

浏览器: IE v6或更高版本,Chrome,Firefox,Edge,Safari等

快速搭建用于Web浏览器的摄像头应用

拷贝资源目录Dynamsoft\Dynamsoft Camera SDK 6.0 Trial\DCSResources到工程根目录。

创建HTML页面ImageUpload.html。按顺序添加两个JS文件:

创建两个容器,分别用于显示视频和图像:

初始化网络摄像头对象,然后播放视频:

dynamsoft.dwsEnv.init('video-container', 'image-container', onInitSuccess, onInitFailure);

function onInitSuccess(videoViewerId, imageViewerId) {

dwsObject = dynamsoft.dwsEnv.getObject(videoViewerId);

dwsObject.camera.playVideo();

}

创建按钮事件用于抓取图像:

//capture an image

function acquireImage() {

if (dwsObject) {

dwsObject.camera.captureImage('image-container');

}

}

保存文件,然后在浏览器中访问页面:

f89b56e993aeffea9f3d39f1c4b7e483.png

现在通过HTTP上传文件到Web服务器。使用setHTTPFormFields可以设置额外字段。在ImageUpload.html中,我们添加一个上传按钮。

Upload

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

}

创建一个ActionPage.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;

?>

就这么简单。

源码

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值