使用HTML5技术控制电脑或手机上的摄像头

最新推荐文章于 2025-08-08 14:03:48 发布

执着更专业

最新推荐文章于 2025-08-08 14:03:48 发布

阅读量387

点赞数

分类专栏： HTML5 文章标签： html5 html5技术摄像头

HTML5 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用HTML5技术实现对电脑或手机摄像头的控制。通过简单的HTML和JavaScript代码即可完成视频流获取及拍照功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用HTML5技术控制电脑或手机上的摄像头</title>
</head>
<body>
    <!--  
        理想情况下我们应该先判断你的设备上是否  
        有摄像头或相机，但简单起见，我们在这里直接  
        写出了HTML标记，而不是用JavaScript先判断  
        然后动态生成这些标记  
    -->  
    <video id="video" width="640" height="480" autoplay></video>  
    <button id="snap">拍照</button>  
    <canvas id="canvas" width="640" height="480"></canvas>  
</body>
</html>
<script>
    // Put event listeners into place  
window.addEventListener("DOMContentLoaded", function() {  
    // Grab elements, create settings, etc.  
    var canvas = document.getElementById("canvas"),  
        context = canvas.getContext("2d"),  
        video = document.getElementById("video"),  
        videoObj = { "video": true },  
        errBack = function(error) {  
            console.log("Video capture error: ", error.code);   
        };  

    // Put video listeners into place  
    if(navigator.getUserMedia) { // Standard  
        navigator.getUserMedia(videoObj, function(stream) {  
            video.src = stream;  
            video.play();  
        }, errBack);  
    } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed  
        navigator.webkitGetUserMedia(videoObj, function(stream){  
            video.src = window.webkitURL.createObjectURL(stream);  
            video.play();  
        }, errBack);  
    }  
    else if(navigator.mozGetUserMedia) { // Firefox-prefixed  
        navigator.mozGetUserMedia(videoObj, function(stream){  
            video.src = window.URL.createObjectURL(stream);  
            video.play();  
        }, errBack);  
    }  
}, false);  
// 触发拍照动作  
document.getElementById("snap").addEventListener("click", function() {  
    context.drawImage(video, 0, 0, 640, 480);  
}); 
</script>

转载至