js如何操作摄像头

navigator.mediaDevices.getUserMedia()

<video id="webcamVideo" autoplay playsinline></video>
<button id="startWebcam">启动摄像头</button>
<button id="stopWebcam">停止摄像头</button>
<p id="errorMessage" style="color: red;"></p>

const videoElement = document.getElementById('webcamVideo');
const startButton = document.getElementById('startWebcam');
const stopButton = document.getElementById('stopWebcam');
const errorMessageElement = document.getElementById('errorMessage');
let currentStream; // 用于保存当前的媒体流，方便后续停止

startButton.addEventListener('click', async () => {
    errorMessageElement.textContent = ''; // 清除之前的错误信息
    if (currentStream) { // 如果已经有流在运行，先停止它
        currentStream.getTracks().forEach(track => track.stop());
    }

    try {
        // 请求访问视频设备。可以添加更多约束，比如 { video: { width: 1280, height: 720 }, audio: false }
        const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
        videoElement.srcObject = stream; // 将媒体流绑定到video元素
        currentStream = stream; // 保存流，以便停止
        videoElement.play(); // 确保视频播放
        console.log('摄像头已启动。');
    } catch (error) {
        console.error('访问摄像头失败:', error);
        let message = '无法访问摄像头。';
        if (error.name === 'NotAllowedError') {
            message += ' 请检查浏览器权限设置，确保允许网页访问摄像头。';
        } else if (error.name === 'NotFoundError') {
            message += ' 未找到可用的摄像头设备。';
        } else if (error.name === 'NotReadableError') {
            message += ' 摄像头可能正在被其他应用占用。';
        } else if (error.name === 'OverconstrainedError') {
            message += ' 请求的摄像头参数无法满足，尝试放宽约束。';
        }
        errorMessageElement.textContent = message;
    }
});

stopButton.addEventListener('click', () => {
    if (currentStream) {
        currentStream.getTracks().forEach(track => track.stop()); // 停止所有轨道
        videoElement.srcObject = null; // 解除video元素与流的绑定
        currentStream = null;
        console.log('摄像头已停止。');
    } else {
        console.log('没有正在运行的摄像头流。');
    }
});

navigator.mediaDevices.getUserMedia({ video: true, audio: false })

{ video: true, audio: false }

catch

getTracks()

stop()

NotAllowedError

localhost

NotFoundError

NotReadableError

navigator.mediaDevices.enumerateDevices()

kind === 'videoinput'

deviceId

// 获取所有可用的视频输入设备
async function getAvailableCameras() {
    try {
        const devices = await navigator.mediaDevices.enumerateDevices();
        const videoInputs = devices.filter(device => device.kind === 'videoinput');
        console.log('可用摄像头:', videoInputs);
        return videoInputs;
    } catch (error) {
        console.error('枚举设备失败:', error);
        return [];
    }
}

// 示例：选择一个特定的摄像头（假设你想用第一个）
async function startSpecificCamera(deviceId) {
    errorMessageElement.textContent = '';
    if (currentStream) {
        currentStream.getTracks().forEach(track => track.stop());
    }

    try {
        const stream = await navigator.mediaDevices.getUserMedia({
            video: { deviceId: { exact: deviceId } }, // 使用 exact 确保是指定的设备
            audio: false
        });
        videoElement.srcObject = stream;
        currentStream = stream;
        videoElement.play();
        console.log(`摄像头 ${deviceId} 已启动。`);
    } catch (error) {
        console.error('启动指定摄像头失败:', error);
        errorMessageElement.textContent = `无法启动指定摄像头：${error.name}`;
    }
}

// 可以在页面加载后调用
// getAvailableCameras().then(cameras => {
//     if (cameras.length > 0) {
//         // 假设我们想启动第一个摄像头
//         // startSpecificCamera(cameras[0].deviceId);
//     }
// });

// 假设你有一个 <canvas id="photoCanvas"></canvas> 和一个 <button id="takePhoto">拍照</button>
const photoCanvas = document.getElementById('photoCanvas');
const takePhotoButton = document.getElementById('takePhoto');
const photoPreview = document.getElementById('photoPreview'); // 假设有一个 @@##@@ 元素来显示照片

takePhotoButton.addEventListener('click', () => {
    if (videoElement.srcObject) {
        const context = photoCanvas.getContext('2d');
        // 设置canvas尺寸与视频流尺寸一致
        photoCanvas.width = videoElement.videoWidth;
        photoCanvas.height = videoElement.videoHeight;

        // 将视频帧绘制到canvas上
        context.drawImage(videoElement, 0, 0, photoCanvas.width, photoCanvas.height);

        // 将canvas内容转换为图片URL
        const imageDataURL = photoCanvas.toDataURL('image/png'); // 可以是 'image/jpeg'
        console.log('照片数据:', imageDataURL.substring(0, 50) + '...'); // 打印一部分，避免过长

        // 显示在图片预览中
        photoPreview.src = imageDataURL;

        // 如果需要上传，可以将 imageDataURL 发送到后端
        // 或者使用 toBlob() 获取 Blob 对象
        photoCanvas.toBlob(blob => {
            // const file = new File([blob], 'photo.png', { type: 'image/png' });
            // console.log('Blob对象:', blob);
            // 这里可以将blob上传到服务器
        }, 'image/png');

    } else {
        errorMessageElement.textContent = '请先启动摄像头。';
    }
});

ImageData

requestAnimationFrame

function processFrame() {
    if (videoElement.srcObject && !videoElement.paused && !videoElement.ended) {
        const context = photoCanvas.getContext('2d');
        photoCanvas.width = videoElement.videoWidth;
        photoCanvas.height = videoElement.videoHeight;

        context.drawImage(videoElement, 0, 0, photoCanvas.width, photoCanvas.height);

        // 获取像素数据
        const imageData = context.getImageData(0, 0, photoCanvas.width, photoCanvas.height);
        const pixels = imageData.data; // 这是一个Uint8ClampedArray，包含RGBA数据

        // 示例：将画面变为灰度
        for (let i = 0; i < pixels.length; i += 4) {
            const r = pixels[i];
            const g = pixels[i + 1];
            const b = pixels[i + 2];
            // 简单的加权平均法
            const gray = (r * 0.299 + g * 0.587 + b * 0.114);
            pixels[i] = gray;     // Red
            pixels[i + 1] = gray; // Green
            pixels[i + 2] = gray; // Blue
            // pixels[i + 3] 是 alpha 通道，保持不变
        }

        // 将处理后的像素数据放回canvas
        context.putImageData(imageData, 0, 0);

        requestAnimationFrame(processFrame); // 继续下一帧
    }
}

// 在启动摄像头后调用 processFrame() 即可开始实时处理
// 例如：在 startButton 的 click 事件中，成功获取流后添加
// requestAnimationFrame(processFrame);

stream.getTracks().forEach(track => track.stop())