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 条评论
登录 后参与评论

相关文章

来自专栏测试游记

Django接口新增页面编写_3(十六)

在完成了页面的布局之后,我们需要让页面动起来,一般来说头部信息需要添加好几个才能完成要求的接口请求。 所以我们在之前的基础要进行键值对输入的新增功能。 由于技术...

7740
来自专栏WebJ2EE

CSS:vertical-align 那些事

The vertical-align CSS property specifies sets vertical alignment of an inline o...

10060
来自专栏WebJ2EE

React:Table 那些事(3-3)—— 列宽自适应、列宽拖动

《React:Table 那些事》系列文章,会逐渐给大家呈现一个基于 React 的 Table 组件的定义、设计、开发过程。每篇文章都会针对 Table 的某...

40530
来自专栏WebJ2EE

React:Table 那些事(2)—— 解读 W3C 规范

—— https://www.w3.org/TR/CSS22/sample.html

20230
来自专栏ionic3+

【技巧】ionic3修改自定义图标

我们需要把它裁切并转成svg格式再生成字体图标,比较繁琐,而我新系统目前也没有装相应软件,所以这里不采用这些图标,选用网上已有类似的字体图标来代替。

13830
来自专栏函数式编程语言及工具

Akka-CQRS(16)- gRPC用JWT进行权限管理

前面谈过gRPC的SSL/TLS安全机制,发现设置过程比较复杂:比如证书签名:需要服务端、客户端两头都设置等。想想实际上用JWT会更加便捷,而且更安全和功能...

12720
来自专栏码匠的流水账

聊聊feign的RequestInterceptor

feign-core-10.2.3-sources.jar!/feign/RequestInterceptor.java

25230
来自专栏java思维导图

编写自己的SpringBoot-starter

我们都知道可以使用 SpringBoot 快速的开发基于 Spring 框架的项目。由于围绕 SpringBoot 存在很多开箱即用的 Starter 依赖,使...

10430
来自专栏测试驿栈

利用Docker安装Web前端性能测试工具Sitespeed.io

Sitespeed.io满足了一个完整的Web性能测试工具所需的3个关键功能: 1)使用真实的浏览器测试Web站点,模拟真实的用户进行请求连接,收集以用户为中心...

17540
来自专栏WebJ2EE

React 性能调优——PureComponent 篇

7720

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励