html5摄像头调用

ianzhi

发布于 2019-07-31 13:02:51

6.6K1

发布于 2019-07-31 13:02:51

公司项目需要调用摄像头，看了一下html5文档，主要是使用html5的getUserMedia()API，写一个例子来记录具体的使用方法。

<html>
<body>
<!-- 用于展示摄像头视频流 -->
<video  id="video" autoplay style="width: 480px;height: 320px"></video>
<div>
    <button id="capture" onclick="handleClickCapture()">拍照</button>
</div>

<!-- 展示拍摄的照片 -->
<canvas id="canvas" width="480" height="320"></canvas>

<script>
    var video = document.getElementById('video');
    var capture = document.getElementById('capture');
    var ctx = document.getElementById('canvas').getContext('2d');

    /**
     * 调用用户媒体设备
     * @param constraints 配置信息
     * @param success 成功回调函数
     * @param error 失败回调函数
     */
    function getUserMediaToPhoto(constraints,success,error) {
        if(navigator.mediaDevices.getUserMedia){
            navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
        }else if (navigator.webkitGetUserMedia) {
            navigator.webkitGetUserMedia(constraints,success,error);
        }else if(navigator.mozGetUserMedia){
            navigator.mozGetUserMedia(constraints,success,error);
        }else if(navigator.getUserMedia){
            navigator.getUserMedia(constraints,success,error);
        }
    }

    /**
     * 成功回调函数
     * @param stream 视频流
     */
    function success(stream){
        var CompatibleURL = window.URL || window.webkitURL;
        try {
            video.src = CompatibleURL.createObjectURL(stream);
        } catch (e) {
            video.srcObject = stream;
        }
        video.play();
    }

    /**
     * 失败回调
     * @param error 错误对象
     */
    function error(error) {
        console.log('无法访问媒体设备', error);
    }

    if(navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia){
        getUserMediaToPhoto({video:{width:480,height:320}},success,error);
    }else{
        alert('不支持访问用户媒体设备');
    }

    /**
     * 拍照按钮点击事件
     */
    function handleClickCapture() {
        ctx.drawImage(video,0,0,480,320);
    }
</script>
</body>
</html>

实现了基本的摄像头调用和拍照，实现思路非常简单，基本上只是在调用api，唯一恶心的地方在于api版本比较多，不得不多做一些判断。具体的api介绍、使用和参数可以查看MediaDevices.getUserMedia()。

文章作者ianzhi,原文地址：https://cloud.tencent.com/developer/article/1476896

文章版权归作者所有，转载请保留此声明。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019-05-19，如有侵权请联系 cloudcommunity@tencent.com 删除

html