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

<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. 无线网卡的查看与配置——iw，iwconfig，ethtool

    摘要:在linux上,我们经常需要把一台笔记本设置成一个共享wifi上网的路由器.如果我们需要把本机配置成一台无线AP,就需要查看网卡的相关信息和进行对应配置.其中iw.iwconfig和ethtoo ...

  2. ubuntu在xampp下安装memcache扩展

    sudo wget http://pecl.php.net/get/memcache-2.2.1.tgz sudo tar vxzf memcache-2.2.1.tgz cd memcache-2. ...

  3. Flex4+Spring3+Hibernate3+BlazeDS整合笔记

    普通Java Web工程流行使用ssh框架,而当前台使用Flex制作的时候,后台就不需要用Struts了,通过使用BlazeDS远程方法调用即可. 首先,新建Java Web工程,然后添加Flex项目 ...

  4. MySQL Order By实现原理分析和Filesort优化

    http://blog.csdn.net/hguisu/article/category/796963

  5. WIN7 下 Qt Creator 安装 QWT

    WIN7 下 Qt Creator 安装 QWT 环境:WIN7 +QT Creator2.6.2 1.下载QWT源代码 qwt-6.1-rc3.zip 2 编译QWT  open projects- ...

  6. 深入理解Redis中的主键失效及其实现机制

    参考:http://blog.sina.com.cn/s/articlelist_1221155353_0_1.html 作为一种定期清理无效数据的重要机制,主键失效存在于大多数缓存系统中,Reids ...

  7. 16g u盘变 成1g u盘 解决方案，使用驱动器中的光盘之前需要将其格式化

    1\ 计算机----管理------磁盘管理  有一个黑色区域是未分配的 2\ 1)进入cmd 命令行窗口2)输入 diskpart,并回车.弹出系统提示,选是即可.3)输入 list disk,并回 ...

  8. c#实现无标题栏窗口的拖动

    当把窗体的FormBorderStyle属性设为None后会导致边框没了,结果窗体无法用鼠标拖动.最大.最下化和关闭…… 下面解决窗体可拖动问题:1.首先导入命名空间: using System.Ru ...

  9. iOS retain、strong、weak、assign

    iOS retain.strong.weak.assign strong与weak是由ARC新引入的对象变量属性xcode 4.2(ios sdk4.3和以下版本)和之前的版本使用的是retain和a ...

  10. TCP/IP协议原理与应用笔记21：路由选择的方法

    1. 路由选择的方法 (1)基本思想 不是收到IP分组后才能为其选路,而是预先获得所有的目的的路由(Routing Protocol) IP报文按预定的路由转发(route table) (2)预定路 ...