H5如何调用手机摄像头?

H5如何调用手机摄像头?


本文仅简单叙述一下,调用的方式。
请看代码: <input type="file" accept="image/*" capture="camera">

下面是开发时遇到的问题和疑问:

  1. 如何调用前置摄像头?
  2. 如何只能选择video视频?
  3. 如何只能选择图片?
  4. 如何允许进行选择一张图?
  5. 如何允许进行多图选择?

下面我们通过一个简单的例子说明一下:


简单案例,全部代码,示下:

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>H5调用手机摄像头</title>
    <style>  
    </style>  
</head>  
<body>  
<h3>HTML5调用手机摄像头,进行拍照,实时上传</h3>
<div>  
    <h3>image图片</h3>
    <input type="file" accept="image/*" capture="camera">  
    <h3>image图片 – 多选</h3>
    <input type="file" accept="image/*"  multiple> 
    <hr />
    <h3>image图片 - 前置摄像头调用</h3>
    <p>重点来了,iOS 10.3以后可以通过给 input[type='file'] 的标签里指定 capture="user" 来调用手机前置摄像头了。</p>
    <p><b>注意:</b>如果手机不支持这个特性还是使用的是后置摄像头。</p>
    <input type="file" accept="image/*"  capture="user"> 
    <p>经过实际测试,Android和IOS两种系统的手机调用的还是后置摄像头!!</p>
    <hr />

    <h3>video视频</h3>
    <input type="file" accept="video/*" capture="camcorder"> 
    <hr />

    <h3>audio音频</h3>
    <input type="file" accept="audio/*" capture="microphone">  
</div>  
</body>  
</html> 

调用手机摄像头之后,剩下的摄像头切换,就属于手机配置的摄像头模式切换问题了。目前,参考了一些别的js代码,暂时未发现能有效直接调用前置摄像头的方法。


以上就是关于“ H5如何调用手机摄像头? ” 的全部内容。

猜你喜欢

转载自blog.csdn.net/qq_35393869/article/details/80924337