明天的明天 永远的永远 未知的一切 我与你一起承担 ??

是非成败转头空 青山依旧在 几度夕阳红 。。。
随笔 - 1274, 文章 - 0, 评论 - 214, 阅读 - 319万
  博客园  :: 首页  :: 管理
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

H5如何调用手机摄像头?

Posted on   且行且思  阅读(3951)  评论(0编辑  收藏  举报

本文仅简单叙述一下,调用的方式。
请看代码:<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代码,暂时未发现能有效直接调用前置摄像头的方法。

相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
历史上的今天:
2021-12-11 如何查看JDK是多少位的
2018-12-11 ASP.NET: Cookie会话丢失,Session超时配置
2009-12-11 C# :DataGridView中使按下Enter键达到与按下Tab键一样的效果?
2008-12-11 C# 2.0 :仿MSN提示框or仿迅雷提示框(.Net2.0).rar
2007-12-11 ASP.NET(C#)实现一次性上传多张图片(多个文件)
点击右上角即可分享
微信分享提示