使用H5调用笔记本外接USB摄像头

因为项目需要调用摄像头但是笔记本的前置摄像头并不是那么方便，所以就打算使用外接的USB摄像头，考虑到没有类似的案例在网上也搜索不到使用H5调用外接的摄像头都只是调用本地的前置摄像头就打算先买一个便宜的摄像头试试水。这是在某宝29.9购买来的USB摄像头

摄像头到了就抱着忐忑的心情测试了，买来插上测试项目果然还是调用了本地的前置摄像头琢磨一番后就找到了方法。首先到设置里搜索相机并且摄像器时打开的
第二步打开设备管理器找到相机右键选择本地相机点击禁用，USB2.0是接入的摄像头(千万不要手贱点了卸载)
禁用后就是这个样子

然后就是激动人心的测试环节了，成功调用!

现在献上H5前台调用摄像头源码

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css"></style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/vue.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-2.1.1.js"></script>
</head>
<body><p align="center"><button id="open">开启摄像头</button> <button id="close">关闭摄像头</button> <button id="CatchCode">拍照</button> </p><video id="video" width="800px" height="800px" autoplay></video><canvas hidden="hidden" id="canvas" width="626" height="800"></canvas>
</body>
<script type="text/javascript">
var video;//视频流对象
var context;//绘制对象
var canvas;//画布对象
$(function(){//摄像头状态var flag = false;//开启摄像头$("#open").click(function(){if (!flag) {open();flag = true;}});//关闭摄像头$("#close").click(function(){if (flag) {video.srcObject.getTracks()[0].stop(); flag = false;}});//拍照$("#CatchCode").click(function(){if (flag) {context.drawImage(video, 0, 0, 330, 250);CatchCode();}elsealert("请先开启摄像头!");});
});
//实例化Vue对象输出车辆信息
var vues = new Vue({el: '#table',data: {City: [],Plate:[],Logo:[],Model:[]}
});
function open(){//获取摄像头对象canvas = document.getElementById("canvas");context = canvas.getContext("2d");//获取视频流video = document.getElementById("video");var videoObj = {"video": true},errBack = function(error) {console.log("Video capture error: ", error.code);};context.drawImage(video, 0, 0, 330, 250);//初始化摄像头参数if(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;navigator.getUserMedia(videoObj, function(stream) {video.srcObject = stream;video.play();}, errBack);}
}
//将摄像头拍取的图片转换为Base64格式字符串
function getBase64() {var imgSrc = canvas.toDataURL("image/png");return imgSrc.substring(22);
};
//使用Ajax将图像传输到后台分析
function CatchCode() {//获取图像var img = getBase64();$.ajax({type: "POST",/* async:false,  */url: "${pageContext.request.contextPath}/VistServlet",data: {opr: "bodyAnalysis",img: img},dataType: "JSON",success: function(data) {//Logo识别JSON对象var logo = JSON.parse(data.Logo).result[0];//车辆识别JSON对象var model = JSON.parse(data.Model);//车牌识别JSON对象var Plate = JSON.parse(data.Plate).words_result;vues.Logo = logo;vues.Model = model;vues.Plate = Plate;//判断是否识别到车牌号if (Plate.number != null && Plate.number.length > 0) {//根据车牌号输出和车辆所在省份城市参数$.post("${pageContext.request.contextPath}/VistServlet","opr=getAreaByCar&number="+Plate.number,getCity,"JSON");function getCity(data){//初始化参数vues.City = data;//显示参数$("#table").show();}}},error:function(q,w,e){alert(q+w+e);}});
};
</script>
</html>

使用H5调用笔记本外接USB摄像头相关推荐

Python-OpenCV学习 -- 台式机外接USB摄像头的视频读取
一.网上很多笔记本带有内置摄像头的代码读取案例.例如:读取内置摄像头的Python- OpenCV代码 import cv2 #引入库 cap = cv2.VideoCapture(0) while ...
opencv同时开启两个外接USB摄像头采集图像信息，并设置摄像头输出图像的分辨率
#include <iostream> #include <opencv2/opencv.hpp>using namespace std; using namespace cv ...
Vuforia用在安卓设备中外接USB摄像头（一）
一.介绍众所周知,vuforia可以用在安卓设备上使用AR,但是开启的都是设备的前置或后置的摄像头,在需要外接USB摄像头这块,vuforia没有给出直接的调用模块,但是官网给出了一个制作调用USB ...
H5调用移动端手机摄像头
H5调用移动端手机摄像头 capture表示,可以捕获到系统默认的设备,比如:camera照相机:camcorder摄像机:microphone录音.accept表示,直接打开系统文件目录. < ...
jetson nano opencv 打开 CSI摄像头_怎样使用OpenCV打开电脑摄像头或者外接USB摄像头...
我们如何使用OpenCV打开摄像头并获取从摄像头得到的视频流数据呢?下面,我们会使用VS2019和OpenCV实现该功能. 先上代码: #include#include using namespace ...
ROS学习（三）调用笔记本和usb外接摄像头
目录前言一.usb_cam安装 1.在工作空间中安装: 2 . 运行usb_cam_node开启摄像头 3.打开rviz,添加image显示项,订阅对应话题,即可显示: 二. 安装uvc_cam ...
手机外接usb摄像头软件下载_佳能推出Mac测试版LUMIX Tether软件可将相机变身USB外接摄像头...
尽管相机厂商很担心被智能手机蚕食入门级产品市场,但 COVID-19 疫病大流行期间,它们还是迅速适应了时代的变化.鉴于近期外出需求的减少.以及在家工作生活时间的大幅增长,许多厂商都已经推出了可将数码 ...
win10 外接usb摄像头_Win10专业版外接摄像头不能用咋办？
win10专业版系统笔记本内置的摄像头可以用,这个摄像头一般像素比较低,成像效果不好.这个时候可以外接一个摄像头,有些用户遇到了外接摄像头不能用的情况,这个时候该怎么办呢? 解决方案: 1.如果USB ...
android8camera,[Android8.0/9.0/10]Camera:外接 USB 摄像头
概述 Android 平台支持使用即插即用的 USB 摄像头(即网络摄像头),但前提是这些摄像头采用标准的 Android Camera2 API 和摄像头 HIDL 接口.网络摄像头通常支持 USB ...

使用H5调用笔记本外接USB摄像头

使用H5调用笔记本外接USB摄像头

使用H5调用笔记本外接USB摄像头相关推荐

最新文章

热门文章