js开启摄像头

最新推荐文章于 2023-11-22 14:00:29 发布

安和同学

最新推荐文章于 2023-11-22 14:00:29 发布

阅读量5.4k

点赞数 6

分类专栏： javascript 文章标签：浏览器摄像 js开启摄像功能 mediaDevices navigator 浏览器拍照

本文链接：https://blog.csdn.net/amdd9582/article/details/95501402

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

开启前代码准备

html一共需要：

俩按钮（一个open摄像，一个拍照）
一个video（用于摄像显示）
一个canvas（用于绘制图片，就是拍照）

js一共需要：

一个constraints对象当参数，包括请求的媒体类型和相对应的参数，俩东西video和audio
一个navigator的接口：mediaDevices
调用mediaDevices的一个方法getUserMedia()，参数为constraints，用完返回一个promise对象
成功就是用户允许、并且有摄像头，失败就是不允许or没有摄像

准备结束，代码部分

下面全部代码，拉走直接可以用（我说的是chrome、Firefox）

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 样式部分可以忽略 -->
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        div {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .btn {
            width: 100px;
            height: 50px;
            border-radius: 10px;
            background: #ff9900;
            line-height: 50px;
            text-align: center;
            color: #fff;
            box-shadow: 0 0 10px #999;
        }
        video, canvas {
            width: 300px;
            height: 300px;
            border: 5px solid #000;
            border-radius: 10px;
            margin-left: 5px;
        }
    </style>
</head>
<body>
    <div>
        <div id="play" class="btn">开启摄像</div>
        <div id="take" class="btn">拍照</div>
        <video id="video"></video>
        <!-- 尽量在canvas标签上设置宽高 -->
        <canvas id="canvas" width="300px" height="300px"></canvas>
    </div>
    <script>
        // 开启摄像
        document.getElementById('play').onclick = () => {
            let constraints = {
                // video属性设置
                video: {
                    width: 300,
                    height: 300
                },
                // audio属性设置
                audio: true
            }
            navigator.mediaDevices.getUserMedia(constraints)
            .then(mediaStream => {
                // 成功返回promise对象，接收一个mediaStream参数与video标签进行对接
                document.getElementById('video').srcObject = mediaStream
                document.getElementById('video').play()
            })
            // 失败就失败了
        }
        // 拍照、canvas绘制
        document.getElementById('take').onclick = () => {
            let ctx = document.getElementById("canvas").getContext('2d')
            ctx.drawImage(document.getElementById("video"), 0, 0, 300, 300)
        }
    </script>
</body>
</html>

安和同学

关注

6
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
js开启摄像头

开启前代码准备html一共需要：俩按钮（一个open摄像，一个拍照）一个video（用于摄像显示）一个canvas（用于绘制图片，就是拍照）js一共需要：一个constraints对象当参数，包括请求的媒体类型和相对应的参数，俩东西video和audio 一个navigator的接口：mediaDevices 调用mediaDevices的一个方法getUserMedia...
复制链接

扫一扫