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= ...
随机推荐
- iOS CocoaPods安装和使用图解
Cocoapods安装步骤 1.升级Ruby环境 sudo gem update --system 如果Ruby没有安装,请参考 如何在Mac OS X上安装 Ruby运行环境 2.安装CocoaPo ...
- Swift之UIBezierPath
使用UIBezierPath可以创建基于矢量的路径.使用此类可以定义简单的形状,如椭圆.矩形或者有多个直线和曲线段组成的形状等.主要用到的该类的属性包括 moveToPoint: //设置起始点 ad ...
- wp上一款应用的出生与死亡
起因 因为自己买了个wp手机,所以对于微软的这个wp系统还是非常喜欢,无奈软件质量不高,过年前便买了个wp的开发者帐号,不是很贵,还想着为wp的生态系统做点贡献.无奈工作繁忙,一直没有机会去做.但是自 ...
- sun.misc.BASE64Encoder和sun.misc.BASE64Encoder 找不到解决的方法
1.右键项目->属性->java bulid path->jre System Library->access rules->resolution选择accessible ...
- careercup-高等难度 18.7
18.7 给定一组单词,编写一个程序,找出其中的最长单词,且该单词由这组单词中的其他单词组合而成. 解法: 原题 给定字符串,以及一个字典,判断字符串是否能够拆分为字段中的单词.例如,字段为{hell ...
- Mysql之EXPLAIN显示using filesort
索引使用经验: 1. 一条 SQL 语句只能使用 1 个索引 (5.0-),MySQL 根据表的状态,选择一个它认为最好的索引用于优化查询 2. 联合索引,只能按从左到右的顺序依次使用 Using w ...
- C++对象内存模型2 （虚函数，虚指针，虚函数表）
从例子入手,考察如下带有虚函数的类的对象内存模型: class A { public: virtual void vfunc1(); virtual void vfunc2(); void func1 ...
- 多线程和并发管理 .NET多线程服务
线程相关静态变量 默认静态变量应用程序域所有线程可见.如果静态变量需要在线程间共享,同步访问也就必然了. 线程相关静态变量保证线程安全,同一时间只有一个线程可访问,且每个线程都有该静态变量的拷贝. p ...
- 开发工具 之 PowerDesigner
PowerDesigner是一款功能非常强大的建模工具软件,足以与Rose比肩,同样是当今最著名的建模软件之一.Rose是专攻UML对象模型的建模工具,之后才向数据库建模发展,而PowerDesign ...
- EF——Guid类型数据的自增长、时间戳和复杂类型的用法 03 （转）
EF里Guid类型数据的自增长.时间戳和复杂类型的用法 通过前两章Lodging和Destination类的演示,大家肯定基本了解Code First是怎么玩的了,本章继续演示一些很实用的东西.文 ...