本文目录一览：
- 1、如何用js实现调用手机摄像头扫描条形码然后带出条形码的值到文本框
- 2、jquery webcam 怎么用
- 3、如何用js调用本地摄像头然后录制成视频文件保存
- 4、如何使用jquery webcam 调用摄像头
- 5、JS 能不能调用摄像头并拍照
- 6、能不能通过js代码打开摄像头
如何用js实现调用手机摄像头扫描条形码然后带出条形码的值到文本框
1、开启沟子的方法代码。
2、指定输入间隔为300毫秒以内时为连续输入方法代码。
3、记录按键信息方法代码。
4、事件的状态代码方法。
5、因为条形码中只有数字和部分符号，所以基本可以不用考虑键盘状态或组合键的情况，但二维码就不能不考虑了。
6、可以使用_keydown.Contains(160)判断是否按下了Shift键，然后使用ShiftChar方法来获取最终的按键对应字符至于结果保存，我使用了一个数组ListListEventMsg，对每次输入都单独进行记录。
jquery webcam 怎么用
jQueryWebcam这个插件为直接在JavaScript中与摄像头通信提供了一个透明的访问层。它通一个SW文件与摄像头交互，可以显示Webcam输出和捕捉图象。如果有多个摄像头，它可以显示可用的摄像头列表，然后供用户选择其中任意一个。
一、jQuery Webcam介绍
jQuery的摄像头插件是一个透明层，用相机直接在JavaScript中的沟通。
这个插件提供了三种不同的模式，通过一个小的接入网络摄像头应用程序接口直接与JavaScript
-或者更准确地说是jQuery。因此，它是可能带来的图像在画布上（回调模式），存储图像在服务器（保存模式）和流的Flash元素的实况图像画布上（流模式）。
二、jQuery Webcam使用方法
简单调用
$("#camera").webcam({
width: 320,
height: 240,
mode: "callback",
swffile: "/download/jscam_canvas_only.swf",
onTick: function() {},
onSave: function() {},
onCapture: function() {},
debug: function() {},
onLoad: function() {}
});
参数说明
windth：flash文件的宽度
height：flash文件的高度
mode：储存模式：callback, save, stream
swffile：flash文件的地址
拍照
调用webcam.capture();方法实现拍照。
保存照片
webcam.save();方法实现保存照片，简单调用里面的onSave参数是保存照片的方法，接收一个函数为照片
var canvas = document.createElement("canvas");
canvas.setAttribute('width', 320);
canvas.setAttribute('height', 240);
if (canvas.toDataURL) {
ctx = canvas.getContext("2d");
image = ctx.getImageData(0, 0, 320, 240);
saveCB = function(data) {
var col = data.split(";");
var img = image;
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);
$.post("/author/uedsc?page=avatar", {type: "data", image: canvas.toDataURL("image/jpeg")}, function(){
location.reload();
});
pos = 0;
}
};
} else {
saveCB = function(data) {
image.push(data);
pos+= 4 * 320;
if (pos = 4 * 320 * 240) {
$.post("/author/uedsc?page=avatar", {type: "data", image: image.join('|')}, function(){
location.reload();
});
pos = 0;
}
};
}
以上是官方的例子，创建一个canvas来保存图片，然后上传到服务端。
如何用js调用本地摄像头然后录制成视频文件保存
可以用html5的video标签，结合js调用本地摄像头(具体实现自己百度)，可以实现拍照功能但是好像不能录制成文件保存，可以播放本地视频。
如何使用jquery webcam 调用摄像头
jQueryWebcam这个插件为直接在JavaScript中与摄像头通信提供了一个透明的访问层。它通一个SW文件与摄像头交互，可以显示Webcam输出和捕捉图象。如果有多个摄像头，它可以显示可用的摄像头列表，然后供用户选择其中任意一个。
一、jQuery Webcam介绍
jQuery的摄像头插件是一个透明层，用相机直接在JavaScript中的沟通。
这个插件提供了三种不同的模式，通过一个小的接入网络摄像头应用程序接口直接与JavaScript
-或者更准确地说是jQuery。因此，它是可能带来的图像在画布上（回调模式），存储图像在服务器（保存模式）和流的Flash元素的实况图像画布上（流模式）。
二、jQuery Webcam使用方法
简单调用
$("#camera").webcam({
width: 320,
height: 240,
mode: "callback",
swffile: "/download/jscam_canvas_only.swf",
onTick: function() {},
onSave: function() {},
onCapture: function() {},
debug: function() {},
onLoad: function() {}
});
参数说明
windth：flash文件的宽度
height：flash文件的高度
mode：储存模式：callback, save, stream
swffile：flash文件的地址
拍照
调用webcam.capture();方法实现拍照。
保存照片
webcam.save();方法实现保存照片，简单调用里面的onSave参数是保存照片的方法，接收一个函数为照片
var canvas = document.createElement("canvas");
canvas.setAttribute('width', 320);
canvas.setAttribute('height', 240);
if (canvas.toDataURL) {
ctx = canvas.getContext("2d");
image = ctx.getImageData(0, 0, 320, 240);
saveCB = function(data) {
var col = data.split(";");
var img = image;
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);
$.post("/author/uedsc?page=avatar", {type: "data", image: canvas.toDataURL("image/jpeg")}, function(){
location.reload();
});
pos = 0;
}
};
} else {
saveCB = function(data) {
image.push(data);
pos+= 4 * 320;
if (pos = 4 * 320 * 240) {
$.post("/author/uedsc?page=avatar", {type: "data", image: image.join('|')}, function(){
location.reload();
});
pos = 0;
}
};
}
以上是官方的例子，创建一个canvas来保存图片，然后上传到服务端。
JS 能不能调用摄像头并拍照
可以调用，不过适合HTML5，浏览器版本也要高点，有些低版本的估计不支持
!DOCTYPE html
html
head
meta charset="utf-8" /
title/title
meta name="viewport" content="width=device-width, initial-scale=1"
/head
body
video id="video" width="640" height="480" autoplay/video
/body
script type="text/javascript"
var promisifiedOldGUM = function(constraints) {
// 第一个拿到getUserMedia，如果存在
var getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia);
// 有些浏览器只是不实现它-返回一个不被拒绝的承诺与一个错误保持一致的接口
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser-getUserMedia是不是在这个浏览器实现'));
}
// 否则，调用包在一个旧navigator.getusermedia承诺
return new Promise(function(resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
// 旧的浏览器可能无法实现mediadevices可言，所以我们设置一个空的对象第一
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
// 一些浏览器部分实现mediadevices。我们不能只指定一个对象
// 随着它将覆盖现有的性能getUserMedia。.
// 在这里，我们就要错过添加getUserMedia财产。.
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = promisifiedOldGUM;
}
// Prefer camera resolution nearest to 1280x720.
var constraints = {
audio: true,
video: {
width: 1280,
height: 720
}
};
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(stream);
video.onloadedmetadata = function(e) {
video.play();
};
}).catch(function(err) {
console.log(err.name + ": " + err.message);
});
/script
/html
能不能通过js代码打开摄像头
html5中的video这个标签是引入视频的，通过navigator.getUserMedia去获取摄像头的视频流，所以要在事件里用关闭的代码都不能执行关闭摄像头，只有关闭网页，摄像头才关闭。
以下为html5打开摄像头代码：
!DOCTYPE html
html
head
meta content="text/html; charset=UTF-8" http-equiv="content-type"
titleSmart Home - Camera/title
link href="css/main.css" rel="stylesheet" type="text/css"
script src="js/jq.js"/script
script type="text/javascript"
/*
*/
function init(t){
accessLocalWebCam("camera_box");
}
// Normalizes window.URL
window.URL = window.URL || window.webkitURL || window.msURL || window.oURL;
// Normalizes navigator.getUserMedia
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia|| navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
function isChromiumVersionLower() {
var ua = navigator.userAgent;
var testChromium = ua.match(/AppleWebKit\/.* Chrome\/([\d.]+).* Safari\//);
return (testChromium (parseInt(testChromium[1].split('.')[0]) 19));
}
function successsCallback(stream) {
document.getElementById('camera_errbox').style.display = 'none';
document.getElementById('camera_box').src = (window.URL
window.URL.createObjectURL) ?
window.URL.createObjectURL(stream) : stream;
}
function errorCallback(err) {
}
function accessLocalWebCam(id) {
try {
// Tries it with spec syntax
navigator.getUserMedia({ video: true }, successsCallback, errorCallback);
} catch (err) {
// Tries it with old spec of string syntax
navigator.getUserMedia('video', successsCallback, errorCallback);
}
}
/script
style type="text/css"
#camera_errbox{
width:320px; height:auto; border:1px solid #333333; padding:10px;
color:#fff; text-align:left;margin:20px auto;
font-size:14px;
}
#camera_errbox b{
padding-bottom:15px;
}
/style
/head
body onLoad="init(this)" oncontextmenu="return false" onselectstart="return false"
div
div id="mainbox"
div id="bt_goback"/div
div/divdiv id="t_iconbox"
class="icon_12"/divdiv id="t_text"
div id="el_title"Camera/div
div id="el_descr"/div
/div
div/div
divspan
class="sp_title_text"Camera/spandiv class="sp_oc
sp_oc_1"/div/div
dl id="el_actionbox" style="text-align:center;"
video id="camera_box" autoplay="" src=""/video
div id="camera_errbox"
b请点击“允许”按钮，授权网页访问您的摄像头！/b
div若您并未看到任何授权提示，则表示您的浏览器不支持Media Capture或您的机器没有连接摄像头设备。/div
/div
/dl
/div
/div
/body
/html
-——代码结束
