用html5和javascript调用摄像头实现拍照功能

青旅半醒 2022-05-23 10:24 476阅读 0赞

在机缘巧合之下，了解到用HTML5和javascript调用摄像头来实现拍照功能，今天就把大致原理写下来。页面布局很简单，就是一个input标签，两个HTML5元素video、canvas和一个button按钮。video元素带有开启视频功能的函数，canvas元素带有捕捉图像功能的函数。

源代码如下：

<!doctype html>
    <html lang="en">
    <head>
        <title>GET VIDEO</title>
        <meta charset="utf-8">
    </head>
    <body>
    <input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia()" />
    <video id="video" width="500px" height="500px" autoplay="autoplay"></video>
    <canvas id="canvas" width="500px" height="500px"></canvas>
    <button id="snap" onclick="takePhoto()">拍照</button>
    <script>
        //获得video摄像头区域
        let video = document.getElementById("video");
        function getMedia() {
            let constraints = {
                video: {width: 500, height: 500},
                audio: true
            };
            /*
            这里介绍新的方法:H5新媒体接口 navigator.mediaDevices.getUserMedia()
            这个方法会提示用户是否允许媒体输入,(媒体输入主要包括相机,视频采集设备,屏幕共享服务,麦克风,A/D转换器等)
            返回的是一个Promise对象。
            如果用户同意使用权限,则会将 MediaStream对象作为resolve()的参数传给then()
            如果用户拒绝使用权限,或者请求的媒体资源不可用,则会将 PermissionDeniedError作为reject()的参数传给catch()
            */
            let promise = navigator.mediaDevices.getUserMedia(constraints);
            promise.then(function (MediaStream) {
                video.srcObject = MediaStream;
                video.play();
            }).catch(function (PermissionDeniedError) {
                console.log(PermissionDeniedError);
            })
        }
        function takePhoto() {
            //获得Canvas对象
            let canvas = document.getElementById("canvas");
            let ctx = canvas.getContext('2d');
            ctx.drawImage(video, 0, 0, 500, 500);
        }
    </script>
    </body>
    </html>

介绍一下代码中涉及到的两个函数：

**getMedia()函数：**

constraints 参数是一个包含了video和audio两个成员的MediaStreamConstraints对象，用于说明请求的媒体类型。必须至少一个类型或者两个同时可以被指定。如果浏览器无法找到指定的媒体类型或者无法满足相对应的参数要求，那么返回的Promise对象就会处于rejected［失败］状态，NotFoundError作为rejected［失败］回调的参数。

有关于constraints对象的具体细节请点击下方链接：

[有关于constraints对象的具体细节介绍][constraints]

getMedia()函数中的其他代码解释都在源代码中，不再赘述。

**takePhoto()函数：**

let video =document.getElementById("video");

let  canvas =document.getElementById("canvas");

解释：Javascript使用id来获取video和canvas元素。

let  ctx =ty.getContext('2d');

解释：创建context对象，getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、

字符以及添加图像的方法。

下面对HTML5中的canvas drawImage（）方法做一介绍：

context.drawImage(img,x,y,width,height);

img：规定要使用的图像、画布或视频。

x: 在画布上放置图像的 x 坐标位置。

y:  在画布上放置图像的 y 坐标位置。

width: 要使用的图像的宽度。

height: 要使用的图像的高度。

以上就是基本的drawImage()方法的介绍，要想了解更多，请点击下方链接。

[更多内容介绍drawImage（）方法][drawImage]

[constraints]: https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia
[drawImage]: http://www.w3school.com.cn/html5/canvas_drawimage.asp