html5摄像头调用

公司项目需要调用摄像头,看了一下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://www.dnote.cn/users/ianzhi/posts/html5shexiangtoutiaoyong

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 搜索引擎的高级搜索指令

    搜索词使用双引号,代表匹配搜索,搜索结果的页面中应该包含所搜索的所有词,并且词语的排列顺序也应该完全匹配。

    ianzhi
  • vue组件 - 框架 - 集成 - 构建文档 - ckeditor5中文文档

    为Vue.js安装CKEditor 5 WYSIWYG编辑器组件以及您选择的构建。

    ianzhi
  • 单链表

    我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite...

    ianzhi
  • 学习Go语言-GOPATH有多工作区的问题

    首先在查找依赖包的时候,总是会先查找 GOROOT目录,也就是go语言的安装目录,如果没有找到依赖的包,才到工作区去找相应的包。

    jerryteng
  • 读取Excel数据进行决策树算法分析

    版权声明:本文为博主原创文章,欢迎转载。 ...

    程裕强
  • Linux中find命令用法全汇总,看完就没有不会用的!

    糖豆贴心提醒,本文阅读时间7分钟 Linux 查找命令是Linux系统中最重要和最常用的命令之一。查找用于根据与参数匹配的文件指定的条件来搜索和查找文件和目录...

    小小科
  • 文件查找

    文件查找:locate, find 实时查找:遍历所有文件进行条件匹配 非实时查找:根据索引查找 locate...

    零月
  • 数据结构:图文详解 - 动态查找、静态查找、散列查找

    对于二分查找存在一定的优 & 缺点,所以衍生出2种二分查找的变式方法:插值查找 & 斐波那契查找。具体如下:

    Carson.Ho
  • 9.2 静态查找表

    1、顺序查找(Sequential Search)的查找过程为:从表中最后一个记录开始,逐个进行记录的关键字和给定值的比较,若某个记录的关键字和给定值比较相等,...

    C语言入门到精通
  • 算法与数据结构(九) 查找表的顺序查找、折半查找、插值查找以及Fibonacci查找(Swift版)

    今天这篇博客就聊聊几种常见的查找算法,当然本篇博客只是涉及了部分查找算法,接下来的几篇博客中都将会介绍关于查找的相关内容。本篇博客主要介绍查找表的顺序查找、折半...

    lizelu

扫码关注云+社区

领取腾讯云代金券