html5 摄像头的调用
<!DOCTYPE html>
<html>
<head>
<title>摄像头调用</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" charset="utf-8" />
<style type="text/css">
video,canvas{
margin-top: 10px;
}
</style>
</head>
<body>
<input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia();" />
<input type="button" title="关闭摄像头" value="关闭摄像头" onclick="shutdown()"><br/>
<video height="200px" autoplay="autoplay" poster="cover.png" ></video><hr/> //poster是video的封面图片,可以自己加一个,也可以直接去掉 <input type="button" title="拍照" value="拍照" onclick="getPhoto();"/><br/>
<canvas id="canvas1" height="200px" ></canvas> <script type="text/javascript">
var video = document.querySelector('video'); var canvas1 = document.getElementById('canvas1');
var context1 = canvas1.getContext('2d'); navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL || window.mozURL || window.msUR; 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':false //关闭声音
}, successFunc, errorFunc); //success是获取成功的回调函数
}
else {
alert('Native device media streaming (getUserMedia) not supported in this browser.');
}
}
function shutdown() {
successFunc(null);
}
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;
}
}
function errorFunc(e) {
alert('Error!'+e);
}
//拍照
function getPhoto() {
context1.drawImage(video, 0, 0,270,200); //将video对象内指定的区域捕捉绘制到画布上指定的区域,实现拍照。
}
</script>
</body>
</html>
html5 摄像头的调用的更多相关文章
- 荣品RP4412开发板摄像头驱动调用及对焦控制
1.关于更换不同摄像头驱动调用问题. 问:RP4412开发板,我用的摄像头640*480图像预览时OK的,但是我调用1280*720的初始化预览,摄像头没有图像了,是不是camera程序也需要修改? ...
- PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码
PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码 看看新闻网>看引擎>开源产品 0人收藏此文章, 发表于8小时前(2013-09-06 00:39) ...
- HTML5+Canvas+jQuery调用手机拍照功能实现图片上传(二)
上一篇仅仅讲到前台操作,这篇专门涉及到Java后台处理.前台通过Ajax提交将Base64编码过的图片数据信息传到Java后台,然后Java这边进行接收处理.通过对图片数据信息进行Base64解码,之 ...
- HTML5页面直接调用百度地图API,获取当前位置,直接导航目的地
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <meta charset="UTF-8"&g ...
- Emgucv(一)Aforge切换摄像头并调用摄像头属性
一.新建一个Windows窗体应用程序,在Form1窗体上添加一个PictureBox控件.一个ComboBox控件,命名为PictureBox1.cbCapture,还有两个Button控件,Tex ...
- 摄像头(3)调用系统拍照activity来拍照
import android.app.Activity; import android.content.Intent; import android.content.pm.PackageManager ...
- 摄像头(2)调用系统拍照activity来录像
import android.app.Activity; import android.content.Intent; import android.content.pm.PackageManager ...
- html5的navigator调用手机震动
navigator.vibrate(s) 或 navigator.webkitVibrate(s),不过该属性只在安卓系统有效.
- HTML5网页如何调用浏览器APP的微信分享功能?
if (/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Al ...
随机推荐
- CSS截取截取字符长度并显示省略号的方法
HTML部分 <div> <span>这是一个CSS3截取截取字符的例子.它根据宽度来处理.</span> </div> <div class=& ...
- codeforces Hill Number 数位dp
http://www.codeforces.com/gym/100827/attachments Hill Number Time Limits: 5000 MS Memory Limits: ...
- zoj1492 最大团
Maximum Clique Time Limit: 10 Seconds Memory Limit: 32768 KB Given a graph G(V, E), a clique is ...
- ubuntu搭建pyqt5开发环境
到PyQt官网去下载最新版本 https://www.riverbankcomputing.com/software/pyqt/download5 根据提示我们首先应该安装SIP,什么是SIP呢,百度 ...
- RSA数字证书管理
RSA数字证书管理分为以下几个部分: 1:在存储区内创建数字证书: 2:导出数字证书私钥: 3:导出数字证书公钥: 4:导入数字证书; 5:读取数字证书. 1:在.net开发环境中,在证书存储区内创建 ...
- mssql-异常value '0000-00-00' can not be represented as java.sql.Date
Mysql开发中采用ResultSet取值時,不管是才用getString()还是用getDate(),或者getObject,均会拋出如题所述异常.查阅Mysql官方Bug咨询: 是因为日期型(Da ...
- 【POJ 1112】Team Them Up!(二分图染色+DP)
Description Your task is to divide a number of persons into two teams, in such a way, that: everyone ...
- this action could not be completed.try again登陆appstore错误提示
今天升级10.11后登陆appstore的时候发现报错了: this action could not be completed.try again 解决办法,终端敲入: sudo mkdir -p ...
- perl push an array to hash
#!/usr/bin/perl use strict; use warnings; use Data::Dumper; my @array=qw /fm1 fm2 fm3 fm4 fm5 fm6/; ...
- smtplib.SMTPDataError: (554, 'DT:SPM 126 smtp5错误解决办法
1.自动化测试中,调用邮件模块自动发送邮件时,运行脚本报错: smtplib.SMTPDataError: (554, 'DT:SPM 126 smtp5,jtKowAD3MJz2c1JXLcK2AA ...