当前位置：首页 > HTML

h5实现摄像头实时播放

2026-01-15 21:04:23HTML

使用HTML5的getUserMedia API实现摄像头实时播放

HTML5的getUserMedia API允许网页访问用户的摄像头和麦克风，实现实时视频流播放。以下是具体实现方法：

基本实现步骤

在HTML中创建一个<video>元素用于显示摄像头视频流

<video id="video" width="640" height="480" autoplay></video>

JavaScript代码获取摄像头权限并播放视频

const video = document.getElementById('video');

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({ video: true })
        .then(stream => {
            video.srcObject = stream;
        })
        .catch(error => {
            console.error('无法访问摄像头:', error);
        });
} else {
    console.error('浏览器不支持getUserMedia API');
}

添加权限请求提示

现代浏览器要求用户明确授权后才能访问摄像头

// 在getUserMedia调用前可以添加权限状态检查
navigator.permissions.query({name: 'camera'})
    .then(permissionStatus => {
        console.log('摄像头权限状态:', permissionStatus.state);
    });

处理不同浏览器兼容性

为兼容旧版浏览器需要添加前缀处理

// 兼容性处理
navigator.getUserMedia = navigator.getUserMedia || 
                         navigator.webkitGetUserMedia || 
                         navigator.mozGetUserMedia || 
                         navigator.msGetUserMedia;

添加视频约束参数

可以指定视频分辨率、前后摄像头等参数

const constraints = {
    video: {
        width: { ideal: 1280 },
        height: { ideal: 720 },
        facingMode: 'environment' // 使用后置摄像头
    }
};

navigator.mediaDevices.getUserMedia(constraints)
    .then(stream => {
        video.srcObject = stream;
    });

错误处理与反馈

添加更完善的错误处理机制

navigator.mediaDevices.getUserMedia({ video: true })
    .then(stream => {
        video.srcObject = stream;
    })
    .catch(err => {
        if (err.name === 'PermissionDeniedError') {
            alert('请允许摄像头访问权限');
        } else if (err.name === 'NotFoundError') {
            alert('未找到可用的摄像头设备');
        } else {
            alert(`发生错误: ${err.message}`);
        }
    });

完整示例代码

结合HTML和JavaScript的完整实现

<!DOCTYPE html>
<html>
<head>
    <title>摄像头实时播放</title>
</head>
<body>
    <video id="video" width="640" height="480" autoplay></video>
    <script>
        const video = document.getElementById('video');
        const constraints = {
            video: {
                width: { ideal: 640 },
                height: { ideal: 480 }
            }
        };

        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia(constraints)
                .then(stream => {
                    video.srcObject = stream;
                })
                .catch(err => {
                    console.error('摄像头访问错误:', err);
                });
        } else {
            alert('您的浏览器不支持摄像头访问功能');
        }
    </script>
</body>
</html>

注意事项

网站必须通过HTTPS协议访问，本地开发时localhost例外
某些浏览器可能需要用户手势(如点击)后才能触发摄像头访问
不同设备和浏览器对视频约束参数的支持可能不同
使用完毕后应该关闭视频流以释放资源

停止摄像头访问

当不再需要摄像头时应该停止视频流

h5实现摄像头实时播放

function stopCamera() {
    const stream = video.srcObject;
    const tracks = stream.getTracks();

    tracks.forEach(track => {
        track.stop();
    });

    video.srcObject = null;
}

以上方法实现了H5摄像头实时播放的基本功能，可以根据具体需求添加更多功能如拍照、录像、滤镜处理等。