一、使用标准api调用摄像头
兼容谷歌、火狐、360等主流浏览器
注：页面协议必须是https，需要在https协议下才能生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<video id="video" autoplay="" style='width:640px;height:480px'></video>
<button id="start">开启摄像头</button>
<button id='picture'>拍照</button>
<canvas id="canvas" width="640" height="480"></canvas>
</body>
<script type="text/javascript">
var video = document.getElementById("video");
var context = canvas.getContext("2d");
var start = document.getElementById("start");
var errocb = function () {
console.log('ok!');
};
start.onclick = function () {
if (navigator.mediaDevices.getUserMedia) { // 标准的API
var p = navigator.mediaDevices.getUserMedia({
video: true
});
p.then(function (mediaStream) {
var video = document.querySelector('video');
try{
video.srcObject = mediaStream;
}catch(error){
video.src = window.URL.createObjectURL(mediaStream);
}
video.onloadedmetadata = function (e) {
// Do something with the video here.
video.play();
};
});
p.catch(function(err) { console.log(err.name); });
} else if (navigator.mediaDevices.webkitGetUserMedia) { // WebKit
var p = navigator.mediaDevices.webkitGetUserMedia({
video: true
});
p.then(function (mediaStream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(mediaStream);
video.onloadedmetadata = function (e) {
// Do something with the video here.
video.play();
};
});
p.catch(function(err) { console.log(err.name); });
}
document.getElementById("picture").addEventListener("click", function () {
context.drawImage(video, 0, 0, 640, 480);
});
}
</script>
</html>
复制代码二、使用flash插件调用摄像头（webcam插件）
兼容ie浏览器
相关js下载地址：
百度网盘：pan.baidu.com/s/1WspOaJ7V…
提取码：ae27
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="camera" class="borderstyle"></div>
<canvas id="canvas" class="borderstyle" width="320px" height="240px"></canvas>
<div id="showImg"></div>
<ul id="cams"></ul>
<button class="play">拍照</button>
</body>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.webcam.js"></script>
<script type="text/javascript">
// 该控件默认只支持320*240尺寸。
// 如果需要修改，可以参考 https://blog.csdn.net/qq_34310906/article/details/105573012
// 打开demo时，如果不能播放，请用http:// 方式打开，而不是file:///C:/ 方式
$(function() {
var w = 320,
h = 240;
var pos = 0,
ctx = null,
saveCB;
var canvas = document.getElementById("canvas")
if (canvas.toDataURL) {
ctx = canvas.getContext("2d");
var image = ctx.getImageData(0, 0, w, h);
// console.log(image)
// let data = image.data
saveCB = function(data) {
var col = data.split(";");
var img = image;
// console.log(4123456)
for (var i = 0; i < 320; i++) {
var tmp = parseInt(col[i]);
img.data[pos + 0] = (tmp >> 16) & 0xff;
img.data[pos + 1] = (tmp >> 8) & 0xff;
img.data[pos + 2] = tmp & 0xff;
img.data[pos + 3] = 0xff;
pos += 4;
}
if (pos >= 4 * 320 * 240) {
ctx.putImageData(img, 0, 0);
var Imagedata = canvas.toDataURL().substring(22); //上传给后台的图片数据
pos = 0;
console.log(Imagedata)
}
};
} else {
// 低版本的ie不支持canvas.toDataURL，需要把数据传给后台转换
var image = [];
saveCB = function(data) {
image.push(data);
pos += 4 * 320;
if (pos >= 4 * 320 * 240) {
$.post(URL, {
briStr: image.join(';')
}, function(data) {
//在页面显示base64图片处理
pos = 0;
image = [];
});
}
};
}
$("#camera").webcam({
width: w,
height: h,
mode: "callback",
swffile: "./swf/jscam.swf",
// swffile: "./swf/jscam_canvas_only.swf",
onSave: saveCB,
onCapture: function() { //捕获图像
webcam.save();
},
debug: function(type, string) { //控制台信息
console.log(type + ": " + string);
},
onLoad: function() { //flash 加载完毕执行
var cams = webcam.getCameraList();
for (var i in cams) {
jQuery("#cams").append("<li>" + cams[i] + "</li>");
}
}
});
$(".play").click(function() {
webcam.capture();
});
});
</script>
</html>
复制代码