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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了手机网页(html5) 如何调用手机的摄像头和相册相关的知识,希望对你有一定的参考价值。

参考技术A <!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>

移动端调用手机的摄像头和相册

input type=file 怎么样调取用户手机照相机


input 有个属性accept="image/*" 这样就可以了,同时在网上看到了其他答案,试了下没啥效果。写记录下来

如下:

使用input:file标签, 去调用系统默认相机,摄像,录音功能,其实是有个capture属性,直接说明需要调用什么功能

<input type="file" accept="image/*" capture="camera">

<input type="file" accept="video/*" capture="camcorder">

<input type="file" accept="audio/*" capture="microphone">

capture表示,可以捕获到系统默认的设备,比如:camera--照相机;camcorder--摄像机;microphone--录音。

accept表示,直接打开系统文件目录。

2
input:file标签还支持一个multiple属性,表示可以支持多选,如:

<input type="file" accept="image/*" multiple>

加上这个multiple后,capture就没啥用了,因为multiple是专门用来支持多选的。

以上是关于手机网页(html5) 如何调用手机的摄像头和相册的主要内容,如果未能解决你的问题,请参考以下文章

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

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

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

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

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

html5 如何调用手机相册,进行上传照片