使用H5调用笔记本外接USB摄像头
使用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();
}else
alert("请先开启摄像头!");
});
});
//实例化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>
