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

<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. Android 手机设置CMWAP 接入点

    Android 手机设置CMWAP 接入点 设置--- 无限控件---移动网络设置---接入点名称----再按菜单---选择新apn 第一步,设置CMNET 上网APN 新建 APN 1.名称:cmn ...

  2. Javascript加载执行问题探索

    转自:http://www.cnblogs.com/huangxincheng/archive/2011/12/04/2275988.html 前言 最近研究MongoDB数据库,无意间发现的好博客, ...

  3. 【CSS系列-选择器优先级总结】

    转:http://www.cnblogs.com/dolphinX/p/3511300.html 容易被忽略CSS特性   CSS初学感觉很简单,但随着学习的深入才感觉CSS的水由多深,平常总会遇到各 ...

  4. 好记心不如烂笔头之JQuery学习，第四章

    ---恢复内容开始--- JQuery中的事件和动画 JQuery中的事件: $(document).ready()该事件和JS中的window.load类似,但是window.load中需要等待所有 ...

  5. 关于composer

    Composer PHP依赖管理的新时代http://segmentfault.com/a/1190000000353129 Composer 的主页   https://getcomposer.or ...

  6. How to solve the SVDI SN Number Display Problem

    Yesterday we have learn how to find the SVDI Serial Number, today one of customer from UK look our a ...

  7. [Java] 遍历HashMap和HashMap转换成List的两种方式

    遍历HashMap和HashMap转换成List   /** * convert the map to the list(1) */ public static void main(String[] ...

  8. linux yum install resource - epel

    首先现在如下rpm包,然后安装对应的rpm包centos5 32位epel源下载地址: www.lishiming.net/data/attachment/forum/epel-release-5-4 ...

  9. Codevs 1287 矩阵乘法&&Noi.cn 09:矩阵乘法（矩阵乘法练手题）

    1287 矩阵乘法  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Description 小明最近在为线性代数而头疼, ...

  10. 百度地图LBS开放平台AK一直没有用

    http://api.map.baidu.com/geoconv/v1/?coords=114.21892734521,29.575429778924;114.21892734521,29.57542 ...