HTML5 调用本地摄像头拍照功能实现。

最新推荐文章于 2025-06-28 11:30:38 发布

原创

最新推荐文章于 2025-06-28 11:30:38 发布 · 2.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#HTML5

本文介绍了如何使用HTML5的navigator.mediaDevices.getUserMedia API来调用本地摄像头进行拍照。通过设置媒体选项、成功和失败回调函数，可以实现这一功能。

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

废话不多说。

实现调用本地摄像头需要设计到HTML5的API，其最新形式为：

navigator.mediaDevices.getUserMedia(); //其余形式下面会提到

它有3个参数，需要调用的媒体选项（对象），成功回调函数，失败/错误回调函数。

OK。直接上码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>video</title>
    <script type="text/javascript">
        window.onload = function(){
            const video = document.getElementById("video"),
                  oBtn = document.getElementById("btn"),
                  canvas = document.getElementById("canvas"),
                  context = canvas.getContext("2d");
            
            var flag = getUserMedia({video:{height:330,width:400}}, success, error);
            
            oBtn.addEventListener("click", function(){
                if(flag === true){