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

<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. Linux内核--usb子系统的分析

    drivers/usb/core/usb.c subsys_init(usb_init); module_exit(usb_exit); 我们 看到一个subsys_initcall,它也是一个宏,我 ...

  2. [Angular 2 Router] Configure Your First Angular 2 Route

    Using the Angular 2 router requires defining routes, passing them in to the RouterModule.forRoot and ...

  3. iOS开发——UI篇Swift篇&UIActivityIndicatorView

    UIActivityIndicatorView override func viewDidLoad() { super.viewDidLoad() titleLabel.text = titleStr ...

  4. oc-17-description

    Book.h #import <Foundation/Foundation.h> @interface Book : NSObject { NSString *_bookName; // ...

  5. mysql基本定义--数据类型

    浮点数类型与定点数类型: MySQL中使用浮点数类型和定点数类型来表示小数. 浮点数类型包括单精度浮点数(float型)和双精度浮点数(double型).定点数类型就是decimal型. OK,现在我 ...

  6. 基于css3的文字3D翻转特效

    一款基于css3的文字3D翻转特效.这款特效当鼠标经过文字的时候3D翻转显示阴影.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="compo ...

  7. Spring源码解析之：Spring Security启动细节和工作模式--转载

    原文地址:http://blog.csdn.net/bluishglc/article/details/12709557 Spring-Security的启动加载细节   Spring-Securit ...

  8. iOS H5容器的一些探究（二）：iOS 下的黑魔法 NSURLProtocol

    来源:景铭巴巴 链接:http://www.jianshu.com/p/03ddcfe5ebd7 iOS H5 容器的一些探究(一):UIWebView 和 WKWebView 的比较和选择 一.前言 ...

  9. B - Fill

    Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Submit Status Practice UV ...

  10. iOS 自定义 shareSDK 容器

    - (void)initializePlat { //添加新浪微博应用 [ShareSDK connectSinaWeiboWithAppKey:@"3201194191" app ...