HTML5页面仅允许拍照

Html5原生的就能够支持拍照选择图片，不需要JS调用。

下面的是单一调用的方式：

<!-- 调用照相机，拍照 -->

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

<!-- 调用摄像机，视频 -->

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

<!-- 调用录音机，录音 -->

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

1. capture表示，可以捕获到系统默认的设备，比如：camera–照相机；camcorder–摄像机；microphone–录音。

    

如果想要选择图库或者拍照，直接使用下面这种：

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

 

 

iOS的测试通过，浏览器、App和微信都能使用。
Android因为各种深度定制，不一定都能够兼容capture="camera"，部分品牌仍然显示相册图库。

如果用于公众号，建议使用微信JS，通过微信接口打开相机：

 

wx.chooseImage({

  count: 1, // 默认9

  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有

  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有

  success: function (res) {

  var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片

}})