如何在浏览器中控制使用USB摄像头 - yushulx的专栏 - CSDN博客
如何在浏览器中控制使用USB摄像头
在支持HTML5的浏览器中要启用连接到电脑的USB摄像头非常方便，只需要使用。不过这个接口提供的功能比较有限（比如，无法调节摄像头参数），且不兼容老的浏览器。要兼顾易用性和兼容性，可以创建一个桌面的摄像头应用（C/C++, Java，Python）来获取数据，然后通过server发送给浏览器的img元素来显示。这样既可以做到对摄像头的完全控制，又可以把应用运行在所有的浏览器上。就是这种方案（后台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文件：
type="text/javascript" src="DWSResources/dynamsoft.webcam.config.js"& &
type="text/javascript" src="DWSResources/dynamsoft.webcam.initiate.js"& &
创建两个容器，分别用于显示视频和图像：
id="video-container" style="width: 500 height: 400 display: inline- border: solid 1px gray"& &
id="image-container" style="width: 500 height: 400 display: inline- border: solid 1px gray"& &
初始化网络摄像头对象，然后播放视频：
type="text/javascript"&
dynamsoft.dwsEnv.init('video-container', 'image-container', onInitSuccess, onInitFailure);
function onInitSuccess(videoViewerId, imageViewerId) {
dwsObject = dynamsoft.dwsEnv.getObject(videoViewerId);
dwsObject.camera.playVideo();
创建按钮事件用于抓取图像：
type="button" value="Grab" onclick="acquireImage();" /&
type="text/javascript"&
function acquireImage() {
if (dwsObject) {
dwsObject.camera.captureImage('image-container');
保存文件，然后在浏览器中访问页面：
现在通过HTTP上传文件到Web服务器。使用setHTTPFormFields可以设置额外字段。在ImageUpload.html中，我们添加一个上传按钮。
id="btn-upload" class="btn-upload" onclick="onBtnUploadClick(this);"&Upload&
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);
创建一个ActionPage.php来接收图像数据：
$strJson = "{\"success\":false}";
$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);
$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("\\", "\\\\") . "\"}";
header("Content-Type: application/ charset=utf-8");
echo $strJson;
就这么简单。
我的热门文章海康摄像头+web调用（官方开发包）+手把手全方位扫盲
最近公司的音视频项目需要做一个网络摄像头模块，甲方正在使用的是海康摄像头，通过NVR管理。要求我们在web端实现一些功能：
等等。。。
附上下载地址：
下载后，直接点开就可以用浏览器打开demo
海康网络摄像头 和 NVR 以及与 互联网/局域网 的关系：
由于页面稍长，截图只能分两半了。。
编号对应图中红色编号，后面是文字介绍
输入网络摄像头的IP地址，端口一般是80
输入你的用户名
输入你的密码
可以选择展现几个分屏，每一个分频都对应此页面的所有功能。哪个分屏被选中，当前所有的操作的就是对选中分屏的操作
根据时间可查当前分屏已录的视频文件。还可下载。（注：下载的是mp4格式，目前我只试过暴风影音，可以打开播放）
你的操作信息
如果你连的是某个摄像头，这里就显示当前摄像头。如果你连的是NVR，这里就是连接当前NVR的所有摄像头列表。
点击，可以看到当前NVR上所有接通的摄像头（包括正在使用和关闭的）
这里是回放。（注：NVR支持STAT硬盘接口，如果存了视频则可以回放。如果是单个摄像头，下载后才能回放）
这个区域设置一些文件存储在本地的路径，一看就懂，不多赘述
哈哈，写到这才发现数学没学好，忘掉了7，没有画在图上。。。
希望能帮助到读者，如果有错误，欢迎指正；有问题，也欢迎私信。
本文已收录于以下专栏：
相关文章推荐
上篇博客是用ffmpeg+nginx实现web播放rtsp视频，原理是将rtsp转码成rtmp格式，再用flash插件播放
由于项目硬件条件有限，转码基本就不考虑了，因此只能直接播放获取到的rtsp...
前言随着互联网的发展，尤其是移动互联网，基于H5、微信的应用越来越多，企业也更多地想基于H5、微信公众号来快速开发和运营自己的产品，那么传统的安防IPC所输出的各种RTSP、GB28181、SDK视频...
期待已久的大华NVR终于到了，来，一起看看有啥功能。
登录界面，默认admin admin， 第一次登录会提示安装插件， 而且不像IPC摄像头，可以选择不修改密码以后不要再提醒老子。 NVR开的那些端...
URL规定：rtsp://username:password@:/Streaming/Channels/(?parm1=value1&parm2-=value2…)注：VLC可以支持解析URL里的用户...
接到一个项目，需要做海康摄像头监控，找了很多资料，cs端开发实例很多，但是BS开发实例还是很少，而且网上很多实例已经不兼容现在新出的摄像头了。最终找到web端实例。给大家提供出来。先贴下我实例截图。
海康摄像头视频 vlc插件预览视频 自带的Active控件预览视频。
pdf转换器下载、介绍和应用
pdf转word格式
楼主曾经为了免费转换PDF花费不少时间，各种软件下载，各种网站搜索，但是下载下来都是徒劳。有的下载完需要注册，有的下载时各种附带软件，有的...
他的最新文章
讲师：王哲涵
讲师：王渊命
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)鍗氬?鍒嗙被锛}