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

<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. 如何实现一个c/s模式的flv视频点播系统

    一.写在前面 视频点播,是一个曾经很热,现如今依然很热的一项视频服务技术.本人最近致力于研究将各种视频格式应用于点播系统中,现已研究成功FLV, F4V, MP4, TS格式的视频点播解决方案,完全支 ...

  2. HDU 1504 Disk Tree

    转载请注明出处:http://blog.csdn.net/a1dark 分析:查了一下这题.发现网上没有什么关于这道题的解题报告.其实题目意思挺好懂的.就是给你一些文件的目录结构.然后让你把它们组合在 ...

  3. oc-26-动态类型检测

    /** 1).判断对象是不是指定类的对象或者指定类的子类对象. - (BOOL)isKindOfClass:(Class)aClass; 2).判断对象是不是1个特定类型的对象,不包括子类. - (B ...

  4. 在Dropbox上搭建私有的Git仓库的教程

    导读 Git版本控制系统需要一个服务器端,而GitHub上要想创建私有的Git服务器端仓库则触及到收费项目,于是这里我们利用Dropbox的免费空间,来看一下在Dropbox上搭建私有的Git仓库的教 ...

  5. Java最重要的21个技术点和知识点之JAVA集合框架、异常类、IO

    (三)Java最重要的21个技术点和知识点之JAVA集合框架.异常类.IO  写这篇文章的目的是想总结一下自己这么多年JAVA培训的一些心得体会,主要是和一些java基础知识点相关的,所以也希望能分享 ...

  6. 开发工具 之 PowerDesigner

    PowerDesigner是一款功能非常强大的建模工具软件,足以与Rose比肩,同样是当今最著名的建模软件之一.Rose是专攻UML对象模型的建模工具,之后才向数据库建模发展,而PowerDesign ...

  7. Spring3 Security 中配置会话管理

    账户登录时,要求一个账户同时只能一人登录,配置中的步骤有三个: 1.在web.xml中配置HttpSessionEventPublisher <listener> <listener ...

  8. Triangular Sums

    描述 The nth Triangular number, T(n) = 1 + … + n, is the sum of the first n integers. It is the number ...

  9. solr 相似查询-MoreLikeThis

    参考文档: MoreLikeThis MoreLikeThisHandler 在solr中有两种方式实现MoreLikeThis:第一种:SearchHandler中的MoreLikeThisComp ...

  10. 通过uiview动画来放大图片

    UIImage *image=[UIImage imageNamed:"]; UIImageView *imageView=[[UIImageView alloc]init]; imageV ...