【前端】video标签实现本机摄像头拍照

最新推荐文章于 2024-05-10 13:26:26 发布

桃子Jerry

最新推荐文章于 2024-05-10 13:26:26 发布

阅读量1.9k

点赞数

分类专栏：前端 js 文章标签： video canvas 摄像头 js 拍照

本文链接：https://blog.csdn.net/jerryJJYY/article/details/103350807

版权

前端同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

10 篇文章 0 订阅

订阅专栏

<!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>摄像头拍照</title>
</head>
<body>
<video id="video" width="449" height="505" controls></video>
<button id="capture">拍照</button>
<canvas id="canvas" width="449" height="505"></canvas>
<script>
    var video = document.getElementById('video');
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');


    //访问用户媒体设备的兼容方法
    var getUserMedia = function(constraints, success, error) {
        if (navigator.mediaDevices.getUserMedia) {
            //最新的标准API
            navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
        } else if (navigator.webkitGetUserMedia) {
            //webkit核心浏览器
            navigator.webkitGetUserMedia(constraints,success, error)
        } else if (navigator.mozGetUserMedia) {
            //firfox浏览器
            navigator.mozGetUserMedia(constraints, success, error);
        } else if (navigator.getUserMedia) {
            //旧版API
            navigator.getUserMedia(constraints, success, error);
        }
    };


    var success = function(stream) {
        //将视频流设置为video元素的源
        video.srcObject = stream;
        video.play();
    };

    var error = function(error) {
        console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
    };

    // 判断是否支持硬件拍照功能
    if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
        //调用用户媒体设备, 访问摄像头
        getUserMedia({video : {width: 449, height: 505}}, success, error);
    } else {
        alert('不支持访问用户媒体');
    }

    // 点击确认拍照
    document.getElementById('capture').addEventListener('click', function () {
        context.drawImage(video, 0, 0, 449, 505);// 要跟video的宽高一致
    })

</script>
</body>
</html>

完。

各位看官有问题可以评论区或发邮件一起探讨，个人邮箱：dingjie0730mi@163.com

桃子Jerry

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
【前端】video标签实现本机摄像头拍照

<!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-...
复制链接

扫一扫

专栏目录