在HTML5中，可以使用`<input>`标签的`type`属性设置为"file"来创建一个文件选择器。然而，这种方法仅支持选择现有的照片和视频文件，无法直接调用摄像头进行拍照。要在手机上调用相机进行拍照，可以使用WebRTC(MediaStream API)。 下面是一个简单的示例代码：
```html
<!DOCTYPE html>
<html>
<head>
<title>Camera Example</title>
<script>
// 获取视频流
function getCameraStream() {
// 检查浏览器是否支持getUserMedia
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
// constraints对象指定约束条件
// video为true表示请求摄像头的视频流
// audio为false表示不请求音频流
var constraints = {
video: true,
audio: false
};
// 使用getUserMedia通过约束条件获取视频流
navigator.mediaDevices.getUserMedia(constraints)
// 获取成功时的回调函数，stream为获取到的视频流
.then(function(stream) {
var video = document.querySelector('video');
// 将视频流绑定到video元素上，显示摄像头的图像
video.srcObject = stream;
video.play();
})
// 获取失败时的回调函数
.catch(function(error) {
console.log('Error: ', error);
});
} else {
console.log('getUserMedia is not supported');
}
}
// 拍照
function takePhoto() {
// 获取video元素
var video = document.querySelector('video');
// 获取canvas元素
var canvas = document.querySelector('canvas');
// 将视频的当前帧绘制到canvas上
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
// 将canvas图像转为base64编码的图片数据
var imageData = canvas.toDataURL('image/png');
// 创建一个新的image元素，显示拍摄到的照片
var image = new Image();
image.src = imageData;
// 将照片添加到页面中
document.body.appendChild(image);
}
</script>
<style>
video {
width: 100%;
}
</style>
</head>
<body>
<h1>Camera Example</h1>
<button onclick="getCameraStream()">Start Camera</button>
<br>
<video autoplay></video>
<br>
<button onclick="takePhoto()">Take Photo</button>
<canvas width="640" height="480" style="display: none;"></canvas>
</body>
</html>
```这个例子中，点击"Start Camera"按钮会调用`getCameraStream()`函数，通过`getUserMedia`方法获取摄像头的视频流并展示在`<video>`元素中。然后，点击"Take Photo"按钮会调用`takePhoto()`函数，将当前帧绘制在`<canvas>`元素上，并将canvas图像转为base64编码的图片数据，最后以`<img>`元素的形式显示在页面上。 请注意，相机调用需要在安全的上下文环境中使用，通常是通过HTTPS协议访问的页面。此外，不同的浏览器和设备可能会有一些兼容性问题，所以最好在实际应用中进行兼容性测试。