web HTML5 调用摄像头的代码
最近公司要求做一个在线拍照的功能，具体代码如下：
<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 调用摄像头的代码的更多相关文章
- html5调用摄像头实现拍照
技术时刻都在前进着.我们的需求也是时刻在改变着.最近在开发中遇到了用户进行账号注册时需要个人图像,网站提供自动拍照功能.还有在登录了PC之后,手机端进行登录时只需要扫描一下PC上的二维码就可以登录.这 ...
- [转]html5调用摄像头实例
原文:https://blog.csdn.net/binquan_liang/article/details/79489989 最近在学习在做HTML5的项目,看了博客上html5调用摄像头拍照的文章 ...
- html5调用摄像头截图
关于html5调用音视频等多媒体硬件的API已经很成熟,不过一直找不到机会把这些硬件转化为实际的应用场景,不过近年来随着iot和AI的浪潮,我觉得软硬结合的时机已经成熟.那我们就提前熟悉下怎么操作这些 ...
- html5调用摄像头并拍照
随着flash被禁用,flash上传附件的方式已成为过去,现在开始用html5上传了.本片文章就是介绍如何使用html5拍照,其实挺简单的原理: 调用摄像头采集视频流,利用canvas的特性生成bas ...
- getUserMedia API及HTML5 调用摄像头和麦克风
getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头.视频.音频.地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件 ...
- OpenCv调用摄像头拍照代码
近期在研究OpenCv对摄像头的调用.现将代码贴出,供大家批评指正. 1.申明 #include"./opencv2/opencv.hpp" #ifdef _DEBUG #prag ...
- html5调用摄像头功能
前言 前些天,线上笔试的时候,发现需要浏览器同意开启摄像头,感觉像是 js 调用的,由于当时笔试,也就没想到这么多
- HTML5调用摄像头实现拍照功能（兼容各大主流浏览器）
本人亲測,兼容各大主流浏览器,HTML5太强大了,须要的留下邮箱哦 假设想要立即收到,则可到我的资源下载 http://download.csdn.net/detail/laijieyao/81699 ...
- html5 调用摄像头
---移动设备--- <input type="file" capture="camera" accept="image/*" id= ...
随机推荐
- hdu5071 2014 Asia AnShan Regional Contest B Chat
模拟题: add的时候出现过的则不再添加 close的时候会影响到top rotate(Prior.Choose)的时候会影响到top /*============================== ...
- 丢失全部控制文件，noresetlogs重建控制文件，alter database open
測试2: (1)一致性的全备 SQL> shutdown immediate; $ cp -rf $ORACLE_BASE/oradata/boss/*.dbf /oradata/bossbak ...
- 将表中数据生成SQL语句
在开发过程中,经常需要我们对表中的数据进行转移,如果在同台机器,可以使用SQL自带的导入数据,但是如果想让所有的数据生成可执行的SQL语句,它的移植性最强了.首先要设计一个存储过程.具体如下: CRE ...
- Android监听WIFI网络的变化并且获得当前信号强度
MainActivity如下: package cc.testwifi; import android.os.Bundle; import android.app.Activity; /** * De ...
- ibatis 分页的简单实现
ibatis 物理分页的简单实现 cheungmine 2013-8-26 使用SSI (Struts2, Spring3, iBATIS2.3)框架开发Web服务的时候有一个需求就是对查询得到的结果 ...
- systemtap-与 oracle 转
https://baoz.net/using-systemtap/ http://nanxiao.me/category/%E6%8A%80%E6%9C%AF/systemtap-%E7%AC%94% ...
- 读懂IL代码就这么简单
原文地址:http://www.cnblogs.com/zery/p/3366175.html 一前言 感谢 @冰麟轻武 指出文章的错误之处,现已更正 对于IL代码没了解之前总感觉很神奇,初一看完全不 ...
- php对比辨析之 mysql_escape_string & mysql_real_escape_string & addsalshes
概述: addslashes和mysql_real_escape_string.都是为了使数据安全的插入到数据库中而进行过滤. addslashes 转义的字符是单引号(').双引号("). ...
- java 数组初始化
一维数组 1) int[] a; //声明,没有初始化 2) int[] a=new int[5]; //初始化为默认值,int型为0 3) int[] a={1,2,3,4,5} ...
- scala基础备忘
声明一个变量 声明一个常量 显式指定类型 定义一个main函数 package org.admln.scala class HelloScala { } object HelloScala { def ...