js实现手机拍照

<input type="file" accept="image/*;capture=camera" id="cameraInput">
<video id="preview" autoplay></video>
<canvas id="canvas" style="display:none;"></canvas>
<img id="photo" alt="Captured photo">

const cameraInput = document.getElementById('cameraInput');
const preview = document.getElementById('preview');
const canvas = document.getElementById('canvas');
const photo = document.getElementById('photo');

// 使用getUserMedia API获取视频流并预览
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({ video: true })
        .then(stream => {
            preview.srcObject = stream;
        })
        .catch(err => {
            console.error("Error accessing camera: ", err);
        });
}

// 处理拍照
cameraInput.addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = function(e) {
        const img = new Image();
        img.onload = function() {
            // 设置canvas尺寸与图片相同
            canvas.width = img.width;
            canvas.height = img.height;
            // 绘制图片到canvas
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0);
            // 将canvas内容转换为DataURL
            const dataURL = canvas.toDataURL('image/png');
            // 显示拍照结果
            photo.src = dataURL;
        };
        img.src = e.target.result;
    };
    reader.readAsDataURL(file);
});