当前位置:首页 » 网页前端 » web获取手机端摄像头
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

web获取手机端摄像头

发布时间: 2023-03-21 10:39:03

Ⅰ 手机web页面怎么调用摄像头执行扫描,获取数据

可以用手机中的微信扫一扫或是下载一些其它的扫描二维码软件。

Ⅱ 用webview做的android客户端怎样调用摄像头拍照

在web操作的话,这个只能调用flash的方式来启用客户端摄像头了

Ⅲ 如何html5在浏览器里访问手机后置摄像头

html5需要使用接口chrome30+ for android 已经实现了利用webcam,调用手机后置摄像头,代码如下:

<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML5GetUserMediaDemo</title>
<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0"/>
</head>
<body>
<inputtype="button"title="开启摄像头"value="开启摄像头"onclick="getMedia();"/><br/>
<videoheight="120px"autoplay="autoplay"></video><hr/>
<inputtype="button"title="拍照"value="拍照"onclick="getPhoto();"/><br/>
<canvasid="canvas1"height="120px"></canvas><hr/>
<inputtype="button"title="视频"value="视频"onclick="getVedio();"/><br/>
<canvasid="canvas2"height="120px"></canvas>

<scripttype="text/javascript">
varvideo=document.querySelector('video');
varaudio,audioType;

varcanvas1=document.getElementById('canvas1');
varcontext1=canvas1.getContext('2d');

varcanvas2=document.getElementById('canvas2');
varcontext2=canvas2.getContext('2d');

navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;
window.URL=window.URL||window.webkitURL||window.mozURL||window.msURL;

varexArray=[];//存储设备源ID
MediaStreamTrack.getSources(function(sourceInfos){
for(vari=0;i!=sourceInfos.length;++i){
varsourceInfo=sourceInfos[i];
//这里会遍历audio,video,所以要加以区分
if(sourceInfo.kind==='video'){
exArray.push(sourceInfo.id);
}
}
});

functiongetMedia(){
if(navigator.getUserMedia){
navigator.getUserMedia({
'video':{
'optional':[{
'sourceId':exArray[1]//0为前置摄像头,1为后置
}]
},
'audio':true
},successFunc,errorFunc);//success是获取成功的回调函数
}
else{
alert('Nativedevicemediastreaming(getUserMedia)notsupportedinthisbrowser.');
}
}

functionsuccessFunc(stream){
//alert('Succeedtogetmedia!');
if(video.mozSrcObject!==undefined){
//Firefox中,video.mozSrcObject最初为null,而不是未定义的,我们可以靠这个来检测Firefox的支持
video.mozSrcObject=stream;
}
else{
video.src=window.URL&&window.URL.createObjectURL(stream)||stream;
}

//video.play();

//音频
audio=newAudio();
audioType=getAudioType(audio);
if(audioType){
audio.src='polaroid.'+audioType;
audio.play();
}
}
functionerrorFunc(e){
alert('Error!'+e);
}


//将视频帧绘制到Canvas对象上,Canvas每60ms切换帧,形成肉眼视频效果
functiondrawVideoAtCanvas(video,context){
window.setInterval(function(){
context.drawImage(video,0,0,90,120);
},60);
}

//获取音频格式
functiongetAudioType(element){
if(element.canPlayType){
if(element.canPlayType('audio/mp4;codecs="mp4a.40.5"')!==''){
return('aac');
}elseif(element.canPlayType('audio/ogg;codecs="vorbis"')!==''){
return("ogg");
}
}
returnfalse;
}

//vedio播放时触发,绘制vedio帧图像到canvas
//video.addEventListener('play',function(){
//drawVideoAtCanvas(video,context2);
//},false);

//拍照
functiongetPhoto(){
context1.drawImage(video,0,0,90,120);//将video对象内指定的区域捕捉绘制到画布上指定的区域,实现拍照。
}

//视频
functiongetVedio(){
drawVideoAtCanvas(video,context2);
}

</script>
</body>
</html>

HTML5 The Media Capture API提供了对摄像头的可编程访问,用户可以直接用getUserMedia获得摄像头提供的视频流。但实际上用html5调用手机摄像头存在很多问题:
1)谷歌的发布的Chrome到了21版本后,才新增了一个用于高质量视频音频通讯的getUserMedia API,该API允许Web应用程序访问摄像头和麦克风,其他手机浏览器只有opera支持html5调用本地拍照功能
2)两个浏览器均不支持访问多个摄像头:chrome不支持访问后置摄像头,pera支持访问后置摄像头的

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

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

Ⅳ 手机网页(html5) 如何调用手机的摄像头和相册

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>web RTC 测试</title>
<style>
.booth {
width:400px;

background:#ccc;
border: 10px solid #ddd;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<video id="video" width="400" height="300"></video>
<button id='tack'> snap shot</button>
<canvas id='canvas' width='400' height='300'></canvas>
<img id='img' src=''>
</div>

<script>
var video = document.getElementById('video'),
canvas = document.getElementById('canvas'),
snap = document.getElementById('tack'),
img = document.getElementById('img'),
vendorUrl = window.URL || window.webkitURL;

//媒体对象
navigator.getMedia = navigator.getUserMedia ||
navagator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
navigator.getMedia({
video: true, //使用摄像头对象
audio: false //不适用音频
}, function(strem){
console.log(strem);
video.src = vendorUrl.createObjectURL(strem);
video.play();
}, function(error) {
//error.code
console.log(error);
});
snap.addEventListener('click', function(){

//绘制canvas图形
canvas.getContext('2d').drawImage(video, 0, 0, 400, 300);

//把canvas图像转为img图片
img.src = canvas.toDataURL("image/png");

})
</script>
</body>
</html>

Ⅵ Hbuilder web页面在手机里能调用摄像头吗

如果是在手机端用浏览器运行的那种,那还是web只不过是在移动端运行,这种不能调用摄像头。
如果开发的的webApp打包成的APP,是可以调用的。

Hbuilder打包有两种,一种源生APP一种webApp