使用HTML5+调用手机摄像头和相册

HTML5+（实际上是基于HTML5的Web标准）允许开发者通过现代浏览器与用户的设备交互，包括访问手机摄像头和相册。为了在网页上实现这个功能，你需要利用HTML5的MediaStream API（用于获取音频和视频流）和File API（处理文件上传和选择）。以下是基本步骤：

1. **用户授权**: 首先，你需要请求用户的权限来访问摄像头和相册。这通常在`<script>`标签的`navigator.mediaDevices.getUserMedia()`方法中完成。例如：

   <button id="camera">打开摄像头</button>
   <script>
     document.getElementById('camera').addEventListener('click', function() {
       navigator.mediaDevices.getUserMedia({video: true})
         .then(function(stream) { /* 处理视频流 */ })
         .catch(function(err) { console.error('访问摄像头失败:', err); });
   </script>

2. **捕获相机/相册选择**: 对于相册访问，你可以使用`<input type="file" accept="image/*">`元素让用户选择图片。当用户点击“选择文件”按钮时，会弹出一个文件选择器。

3. **处理媒体流**: 获取到视频流后，可以使用WebRTC技术将其显示在页面上，或者将照片数据发送到服务器。记得处理可能出现的错误和兼容性问题。

4. **兼容性**: 不同浏览器对这些API的支持程度可能会有所不同，确保提供合适的备用方案，比如使用`getUserMedia`的polyfill库。