javascript摄像,js 摄像头捕捉 人脸

怎么用html5或js调用手机的摄像头拍照上传以及调用手机相册选取照片

1、实现头的方法代码。

创新互联专业为企业提供山阳网站建设、山阳做网站、山阳网站设计、山阳网站制作等企业网站建设、网页设计与制作、山阳企业网站模板建站服务，十余年山阳做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

2、编写CSS样式的方法代码。

3、html上传代码。

4、JS处理方法代码。

5、测试结果如下。

注意事项：

JavaScript是一种网络脚本语言，在web应用开发中得到了广泛的应用，它经常被用来为网页添加各种动态功能，为用户提供更加流畅美观的浏览效果，通常JavaScript脚本被嵌入到HTML中来实现自己的功能。

javascript可以调用手机的摄像头吗

主要是pc和手机的浏览器可以调用，亲测可用，但是微信扫二维码则不可以，微信的话应该还是要调微信接口

!DOCTYPE html  

html lang="zh-CN"  

head  

meta charset="UTF-8"  

titleGetUserMedia实例/title  

/head  

body  

video id="video" autoplayideo  

/body  

script type="text/javascript"  

var getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);   

getUserMedia.call(navigator, {

video: true,   

audio: true   

}, function(localMediaStream) {   

var video = document.getElementById('video');   

video.src = window.URL.createObjectURL(localMediaStream);   

video.onloadedmetadata = function(e) {   

console.log("Label: " + localMediaStream.label);   

console.log("AudioTracks" , localMediaStream.getAudioTracks());   

console.log("VideoTracks" , localMediaStream.getVideoTracks());   

};   

}, function(e) {   

console.log('Reeeejected!', e);   

});   

/script  

html

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

-——代码结束