最近公司要求做一个在线拍照的功能，具体代码如下：

<html>

    <head>

        <title>html5调用摄像头拍照</title>

        <style type="text/css">

        #camera {

            width: 640px;

            height: 525px;

            position: fixed;

            border: 1px solid #f0f0f0;

            -moz-border-radius: 4px 4px 0 0;

            -webkit-border-radius: 4px 4px 0 0;

            border-radius: 4px 4px 0 0;

            -moz-box-shadow: 0 0 4px rgba(0,0,0,0.6);

            -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.6);

            box-shadow: 0 0 4px rgba(0,0,0,0.6);

        }

        #buttons {

            text-align: center;

        }

        .btn {

            width: 99px;

            height: 38px;

            line-height: 32px;

            margin: 0px 4px 0px 0px;

            border: 1px solid #fff;

            -moz-border-radius: 5px; /* Gecko browsers */

            -webkit-border-radius: 5px; /* Webkit browsers */

            border-radius: 5px; /* W3C syntax */

            cursor: default;

            text-align: center;

            font-size: 14px;

            color: #fff;

        }

        .btn_blue {

            background-color: #5CACEE;

        }

        .btn_green {

            background-color: #00EE00;

        }

        .hidden{ display:none }

    </style>

    </head>

    <body>

        <div id="camera">

            <div id="contentHolder">

                <video id="video" width="640" height="480" autoplay></video>

                <canvas style="display:none;" id="canvas" width="640" height="480"></canvas>

            </div>

            <div id="buttons">

                <button id="btn_snap" class="btn btn_blue">拍照</button>

                <button id="btn_cancel" class="btn btn_blue" style="display:none;">取消</button>

                <button id="btn_upload" class="btn btn_green" style="display:none;">上传</button>

            </div>

        </div>

    </body>

</html>

<script type="text/javascript">

        // 添加事件监听器

        window.addEventListener("DOMContentLoaded", function () {

            // 获取元素，创建设置等等

            var canvas = document.getElementById("canvas"),

                    context = canvas.getContext("2d"),

                    video = document.getElementById("video"),

                    videoObj = { "video": true },

                    errBack = function (error) {

                        console.log("Video capture error: ", error.code);

                    };

            // 添加video 监听器

            if (navigator.getUserMedia) { // 标准

                navigator.getUserMedia(videoObj, function (stream) {

                    video.src = stream;

                    video.play();

                }, errBack);

            } else if (navigator.webkitGetUserMedia) { // WebKit 前缀

                navigator.webkitGetUserMedia(videoObj, function (stream) {

                    video.src = window.webkitURL.createObjectURL(stream);

                    video.play();

                }, errBack);

            }

            else if (navigator.mozGetUserMedia) { // Firefox 前缀

                navigator.mozGetUserMedia(videoObj, function (stream) {

                    video.src = window.URL.createObjectURL(stream);

                    video.play();

                }, errBack);

            }

            else {

                alert("浏览器不支持HTML5！");

                //console.log('your browser not support getUserMedia');

            }

            document.getElementById("btn_snap").addEventListener("click", function () {

                context.drawImage(video, 0, 0, 640, 480);

            });

        }, false);

</script>

但是有一些缺点就是，无法调整摄像头的分辨率，导致拍摄的照片不清晰。

web HTML5 调用摄像头的代码的更多相关文章

  1. html5调用摄像头实现拍照

    技术时刻都在前进着.我们的需求也是时刻在改变着.最近在开发中遇到了用户进行账号注册时需要个人图像,网站提供自动拍照功能.还有在登录了PC之后,手机端进行登录时只需要扫描一下PC上的二维码就可以登录.这 ...

  2. [转]html5调用摄像头实例

    原文:https://blog.csdn.net/binquan_liang/article/details/79489989 最近在学习在做HTML5的项目,看了博客上html5调用摄像头拍照的文章 ...

  3. html5调用摄像头截图

    关于html5调用音视频等多媒体硬件的API已经很成熟,不过一直找不到机会把这些硬件转化为实际的应用场景,不过近年来随着iot和AI的浪潮,我觉得软硬结合的时机已经成熟.那我们就提前熟悉下怎么操作这些 ...

  4. html5调用摄像头并拍照

    随着flash被禁用,flash上传附件的方式已成为过去,现在开始用html5上传了.本片文章就是介绍如何使用html5拍照,其实挺简单的原理: 调用摄像头采集视频流,利用canvas的特性生成bas ...

  5. getUserMedia API及HTML5 调用摄像头和麦克风

    getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头.视频.音频.地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件 ...

  6. OpenCv调用摄像头拍照代码

    近期在研究OpenCv对摄像头的调用.现将代码贴出,供大家批评指正. 1.申明 #include"./opencv2/opencv.hpp" #ifdef _DEBUG #prag ...

  7. html5调用摄像头功能

    前言 前些天,线上笔试的时候,发现需要浏览器同意开启摄像头,感觉像是 js 调用的,由于当时笔试,也就没想到这么多

  8. HTML5调用摄像头实现拍照功能（兼容各大主流浏览器）

    本人亲測,兼容各大主流浏览器,HTML5太强大了,须要的留下邮箱哦 假设想要立即收到,则可到我的资源下载 http://download.csdn.net/detail/laijieyao/81699 ...

  9. html5 调用摄像头

    ---移动设备--- <input type="file" capture="camera" accept="image/*" id= ...

随机推荐

  1. FluorineFx 播放FLV 时堆棧溢出解决 FluorineFx NetStream.play 并发时,无法全部连接成功的解决办法

    http://25swf.blogbus.com/tag/FluorineFx/ http://www.doc88.com/p-7002019966618.html  基于Red5的视频监控系统的研究 ...

  2. 【KPC】关于为什么不用Zepto而用JQuery

    1.zepto在window phone手机上不是很兼容 2.JQuery的Deferred对象在zepto上不支持. 3.JQuery经过压缩,以及部分页面的使用,以及缓存,可以达到优化用户体验的效 ...

  3. Oracle DB 管理数据库的空间

    • 描述4 KB 扇区磁盘的概念及使用 • 使用可移动表空间 • 描述可移动表空间的概念 数据库存储 数据库存储 数据库包括物理结构和逻辑结构.由于物理结构和逻辑结构是分开的,因此管理数据的物 理存储 ...

  4. [Angular 2] Style Angular 2 Components

    Each Angular 2 Component can have its own styles which will remained contained inside the component. ...

  5. wampserver下打开phpMyAdmin出现403错误的问题解决方法

    图1 图2 wamp下打开phpMyAdmin出现403错误的问题解决方法安装完wamp后打开其下的phpMyAdmin也就是路径http://localhost/phpmyadmin/ 出现[图一] ...

  6. google对js延迟加载方案的建议

    浏览器在执行JavaScript代码时会停止处理页面,当页面中有很多JavaScript文件或代码要加载时,将导致严重的延迟.尽管可以使用defer.异步或将JavaScript代码放到页面底部来延迟 ...

  7. Redis 管道技术

    Redis是一种基于客户端-服务端模型以及请求/响应协议的TCP服务.这意味着通常情况下一个请求会遵循以下步骤: 客户端向服务端发送一个查询请求,并监听Socket返回,通常是以阻塞模式,等待服务端响 ...

  8. golang之websocket 源码分析

    下载go的websocket包. 1. 通过google官方的方法, 需要hg来同步代码. 由于墙的原因, 还需要设置代理. 比较麻烦 2. http://gopm.io/ 通过该网站下载, 这是go ...

  9. mysql的相关操作

    查看当前登录用户: mysql> select USER(); +----------------+ | USER() | +----------------+ | root@localhost ...

  10. 百篇大计敬本年之系统篇《六》—— Ubuntu 16.04开启 root 超级用户

    Ubuntu 16.04系统在一开始安装完成时是无法切换到 root 用户的,普通用户需要使用 root 权限的时候通常需要在执行命令前加 "sudo",需要经常使用root权限的 ...