HTML之调用摄像头实现拍照和摄像功能
应该有很多人知道，我们的手机里面有个功能是“抓拍入侵者”，说白了就是在解锁应用时如果我们输错了密码手机就会调用这一功能实现自动拍照。
其实在手机上还有很多我们常用的软件都有类似于这样的功能，比如微信扫一扫二维码，玩图……
感觉挺有趣的，今天，我们就来研究一下这个功能的原理，不过我们不是用Android来做，而是用HTML5和javascript来做，浏览器支持IE9+。
布局很简单，就是设置一个“拍照”按钮的监听器，调用摄像头video，然后显示出来画像。（需要用户权限）
首先，我们要允许网页宽度自动调整，我们在网页头添加viewport标签：
<meta name="viewport" content="width=device-width, initial-scale=1" />
还有一个重点知识，就是getUserMedia（获取用户多媒体）。
使用这个getUserMedia API可以访问多媒体设备，利用该API与<video>和canvas元素，可以在浏览器里面捕获许多漂亮的图片。
所以除了视频，还有音频，所以接口要变成类似{video: true,audio:false}，可以设定音视频的获取开关。
navigator对象包含的属性描述了正在使用的浏览器,可以使用这些属性进行平台专用的配置。
如果浏览器检测不到摄像头，则会提示：
That's all right，我们直接走起看Demo吧：
<!DOCTYPE html>
<head>
<title>HTML5 GetUserMedia Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
</head>
<body>
<input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia();" /><br />
<video height="120px" autoplay="autoplay"></video><hr />
<input type="button" title="拍照" value="拍照" onclick="getPhoto();" /><br />
<canvas id="canvas1" height="120px" ></canvas><hr />
<input type="button" title="视频" value="视频" onclick="getVedio();" /><br />
<canvas id="canvas2" height="120px"></canvas>
<script type="text/javascript">
var video = document.querySelector('video');
var audio, audioType;
var canvas1 = document.getElementById('canvas1');
var context1 = canvas1.getContext('2d');
var canvas2 = document.getElementById('canvas2');
var context2 = canvas2.getContext('2d');
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
var exArray = []; //存储设备源ID
MediaStreamTrack.getSources(function (sourceInfos) {
for (var i = 0; i != sourceInfos.length; ++i) {
var sourceInfo = sourceInfos[i];
//这里会遍历audio,video，所以要加以区分
if (sourceInfo.kind === 'video') {
exArray.push(sourceInfo.id);
}
}
});
function getMedia() {
if (navigator.getUserMedia) {
navigator.getUserMedia({
'video': {
'optional': [{
'sourceId': exArray[1] //0为前置摄像头，1为后置
}]
},
'audio':true
}, successFunc, errorFunc); //success是获取成功的回调函数
}
else {
alert('Native device media streaming (getUserMedia) not supported in this browser.');
}
}
function successFunc(stream) {
//alert('Succeed to get media!');
if (video.mozSrcObject !== undefined) {
//Firefox中，video.mozSrcObject最初为null，而不是未定义的，我们可以靠这个来检测Firefox的支持
video.mozSrcObject = stream;
}
else {
video.src = window.URL && window.URL.createObjectURL(stream) || stream;
}
//video.play();
// 音频
audio = new Audio();
audioType = getAudioType(audio);
if (audioType) {
audio.src = 'polaroid.' + audioType;
audio.play();
}
}
function errorFunc(e) {
alert('Error！'+e);
}
// 将视频帧绘制到Canvas对象上,Canvas每60ms切换帧，形成肉眼视频效果
function drawVideoAtCanvas(video,context) {
window.setInterval(function () {
context.drawImage(video, 0, 0,90,120);
}, 60);
}
//获取音频格式
function getAudioType(element) {
if (element.canPlayType) {
if (element.canPlayType('audio/mp4; codecs="mp4a.40.5"') !== '') {
return ('aac');
} else if (element.canPlayType('audio/ogg; codecs="vorbis"') !== '') {
return ("ogg");
}
}
return false;
}
// vedio播放时触发，绘制vedio帧图像到canvas
// video.addEventListener('play', function () {
// drawVideoAtCanvas(video, context2);
// }, false);
//拍照
function getPhoto() {
context1.drawImage(video, 0, 0,90,120); //将video对象内指定的区域捕捉绘制到画布上指定的区域，实现拍照。
}
//视频
function getVedio() {
drawVideoAtCanvas(video, context2);
}
</script>
</body>
HTML之调用摄像头实现拍照和摄像功能的更多相关文章
- html5调用摄像头实现拍照
技术时刻都在前进着.我们的需求也是时刻在改变着.最近在开发中遇到了用户进行账号注册时需要个人图像,网站提供自动拍照功能.还有在登录了PC之后,手机端进行登录时只需要扫描一下PC上的二维码就可以登录.这 ...
- 手机调用系统的拍照和裁剪功能，假设界面有输入框EditText，在一些手机会出现点击EditText会弹出输入法，却不能输入的情况。
1. 拍照裁剪后 点击EditText会弹出输入法,却不能输入.可是点击点一EdtiText就能够输入了,所以我就写了一个看不见的EdtiText,切换焦点,这样就攻克了这个奇怪的这问题,应该是and ...
- html5调用摄像头并拍照
随着flash被禁用,flash上传附件的方式已成为过去,现在开始用html5上传了.本片文章就是介绍如何使用html5拍照,其实挺简单的原理: 调用摄像头采集视频流,利用canvas的特性生成bas ...
- java javacv调用摄像头并拍照
调用摄像头并拍张照片,我一开始用的java的jmf媒体框架,但这个有很多的局限性不好使并且很有麻烦,兜了一圈发现javacv东西,研究之后这东西简单,方便:废话不多说了来重点. javacv官网:点击 ...
- 【Java】调用摄像头进行拍照并保存【详细】以及处理no jniopencv_core in java.library.path的一种方法
[之前困扰笔者的问题描述] date:2019.12.18 网上教程很多,但是没有看见完整的,所以写一个出来. 调用摄像头需要javaCV的jar包和openCV的jar包,现在已经不需要安装包了 ...
- Android初级教程调用手机拍照与摄像功能
这个小案例建议在手机上运行. package com.example.camera; import java.io.File; import android.net.Uri; import andro ...
- Vue2.0 引用 exif.js 实现调用摄像头进行拍照功能以及图片上传功能
vue组件代码 <template> <div> <div style="padding:20px;"> <div class=" ...
- HTML5调用摄像头实现拍照功能（兼容各大主流浏览器）
本人亲測,兼容各大主流浏览器,HTML5太强大了,须要的留下邮箱哦 假设想要立即收到,则可到我的资源下载 http://download.csdn.net/detail/laijieyao/81699 ...
- Android开发中如何调用摄像头的功能
我们要调用摄像头的拍照功能,显然 第一步必须加入调用摄像头硬件的权限,拍完照后我们要将图片保存在SD卡中,必须加入SD卡读写权限,所以第一步,我们应该在Android清单文件中加入以下代码 & ...
随机推荐
- Study notes for Clustering and K-means
1. Clustering Analysis Clustering is the process of grouping a set of (unlabeled) data objects into ...
- javascript中字符串格式转化成json对象记录
什么是JSON JSON(JavaScript Object Notation)是一种优美的JavaScript对象创建方法.JSON也是一种轻量级数据交换格式.JSON非常易于人阅读与编写,同时利于 ...
- android4.4.2 短信广播变更
近期三星陆续放出android4.4.2ROM更新包,android4.4.2对短信虽说是放开了权限,但其实是加强了限制,一台手机智能通过一个设置为默认应用的短信应用软件才能发送短信,否则就无法对短信 ...
- Android闹钟【复杂版】
最近做闹钟,所以自己写了个Demo版本,这个程序是用listview单独的类来实现的,和activity类分开来实现的!这个是用数据库进行更新的,当闹钟设置后,闹钟图片变成闹钟的样子,闹钟取消后,图片 ...
- 推荐《Linux 多线程服务器端编程》
赖勇浩(http://laiyonghao.com) 最近,有一位朋友因为工作需要,需要从网游的客户端编程转向服务器端编程,找我推荐一本书.我推荐了<Linux 多线程服务器端编程——使用 mu ...
- [Angular2 Router] Load Data Based on Angular 2 Route Params
You can load resource based on the url using the a combination of ActivatedRouteand Angular 2’s Http ...
- [Angular2 Router] Understand the Angular 2 Base href Requirement
The <base href=”/”/> you define will determine how all other assets you plan on loading treat ...
- iOS开发——UI篇Swift篇&UIActivityIndicatorView
UIActivityIndicatorView override func viewDidLoad() { super.viewDidLoad() titleLabel.text = titleStr ...
- Linux的内存回收和交换
Linux的内存回收和交换 版权声明: 本文章内容在非商业使用前提下可无需授权任意转载.发布. 转载.发布请务必注明作者和其微博.微信公众号地址,以便读者询问问题和甄误反馈,共同进步. 微博ID:or ...
- How does a relational database work
http://blog.jobbole.com/100349/ http://coding-geek.com/how-databases-work/