js调用摄像头摄像，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来保存图片，然后上传到服务端。

怎么用html5或js调用手机的摄像头拍照上传以及调用

h5不能直接调用摄像头，只能用input type="file" /上传图片来间接调用摄像头

急急 JS或HTML可以调用客户端的摄像头吗？需要其他什么技术吗？对WEB而言 财富值只有5个 多多见谅谢谢！

js没那个权限去调用任何硬件的，某些app打包程序可能有给js接口调用摄像头，但前提是你做的网页必须加壳成app，别人要安装你的app才行

html5或者JS怎样调用手机摄像头或者相册

你给的网页用的是 input accept="image/*" type="file"，在IOS端点击时会提示选择图片或相机，安卓端要看浏览器对这两个属性的优化，部分浏览器会直接跳转到资源管理器，优化做得好的可以直接提示选择相册或相机。

移动设备和桌面电脑上的客户端API起初并不是同步的。最初总是移动设备上先拥有某些功能和相应的API，但慢慢的，这些API会出现在桌面电脑上。其中一个应用接口技术就是getUserMedia API，它能让应用开发者访问用户的摄像头或内置相机。

为什么使用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

-——代码结束

关于js调用摄像头摄像和js调用摄像头扫描二维码的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。