关于H5 和 画布 调用本地摄像头拍照功能的实现

1.代码的实现(html部分

<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>

2.js部分

<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>

3.实现效果图

4.浏览器部分

H5的拍照开启摄像头方法navigator.getUserMedia,测试适用于火狐,本地调用,和满足https协议的浏览器调用,本地localhost和127.0.0.1可以访问,然而发布到项目上面,通过其他页面访问,需要tomcat配置https协议,但是安全性很低,所以,只用于参考

调用本地摄像头拍照(H5和画布)的更多相关文章

  1. 利用html5调用本地摄像头拍照上传图片[转]

    利用html5调用本地摄像头拍照上传图片   html5概念啥的就不废话了,不知道的 百度, 谷歌一堆..今天学了学html5中的Canvas结合新增的<video>标签来获取本地摄像头, ...

  2. 利用html5调用本地摄像头拍照上传图片

    这个是前台HTML的代码. <div id="contentHolder"> <video id="video" width="32 ...

  3. H5混合开发二维码扫描以及调用本地摄像头

    今天主管给了我个需求,说要用混合开发,用H5调用本地摄像头进行扫描二维码,我之前有做过原生安卓的二维码扫一扫,主要是通过调用zxing插件进行操作的,其中还弄了个闪光灯.但是纯H5的没接触过,心里没底 ...

  4. 怎样让HTML5调用手机摄像头拍照——实践就是一切

    原文:怎样让HTML5调用手机摄像头拍照--实践就是一切 NanShan 小编将思路提供给了大家.学编程最重要的是实践,我这尽管有完好的代码,可是希望大家都能够自己写出属于自己的代码 HTML5 Th ...

  5. H5实现调用本地摄像头实现实时视频以及拍照功能

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. 调用本地摄像头并通过canvas拍照

    首先我们需要新建一个video标签,并且放到html里边 var video = document.createElement("video"); video.autoplay=& ...

  7. HTML5调用本地摄像头画面,拍照,上传服务器

    实现功能和适用业务 采集本地摄像头获取摄像头画面,拍照保存,上传服务器: 前端上传图片处理,展示,缩小,裁剪,上传服务器 实现步骤 调取本地摄像头(getUserMedia)/上传图片,将图片/视频显 ...

  8. 前端调用本地摄像头实现拍照(vue)

    由于调用摄像头有使用权限,只能在本地运行,线上需用https域名才可以使用. <template> <div class="camera_outer"> & ...

  9. H5调用本地摄像头

    <!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"& ...

随机推荐

  1. WINDOWS java 不能正常卸载 问题, (其他系统问题 也可以试试)

    1.JAVA 原安装包无法卸载  不知道 有没有通知 碰到过这种情况的 自己碰到过3次这种情况了,    卸载不掉, 在网上 找了N多中 方法, 注册表什么的都被翻烂了, 单还是没用,其中有一次还把 ...

  2. Navicat for Mysql 暴力破解教程

    关于破解Navicat for MySQL的教程有很多 ,但是比较繁琐, 这里推荐一种比较简单的办法~ 网盘地址:链接: https://pan.baidu.com/s/1kVHyShL 密码: ws ...

  3. greenplum在执行vacuum和insert产生死锁问题定位及解决方案

    首先声明:未经本人同意,请勿转载,谢谢! 本人使用自己编译的开源版本的greenplum数据库用于学习,版本为PostgreSQL 8.3.23 (Greenplum Database 4.3.99. ...

  4. Linux下实现视频读取(三)---Buffer的准备和数据读取

    前面主要介绍的是:V4L2 的一些设置接口,如亮度,饱和度.曝光时间,帧数,增益.白平衡等.今天看看V4L2 得到数据的几个关键ioctl,Buffer的申请和数据的抓取. 1. 初始化 Memory ...

  5. iOS_正則表達式

    iOS 正則表達式 正則表達式,又称正规表示法.常规表示法(英语:Regular Expression,在代码中常简写为regex.regexp或RE).计算机科学的一个概念. 正則表達式使用单个字符 ...

  6. 三十天学不会TCP,UDP/IP网络编程-UDP,从简单的开始

    如果对和程序员有关的计算机网络知识,和对计算机网络方面的编程有兴趣,欢迎去gitbook(https://www.gitbook.com/@rogerzhu/)star我的这一系列文章,虽然说现在这种 ...

  7. 《极客与团队》【PDF】下载

    <极客与团队>[PDF]下载链接: https://u253469.ctfile.com/fs/253469-231196337 内容简介 软件开发是一项团队运动,人的因素对结果的影响完全 ...

  8. 【python】集合set

  9. 栈stack(1):栈的数组实现

    定义 栈(stack),是一个只允许在表尾端进行删除插入操作的线性表,是一种后进先出(LIFO,last in first out)的数据结构. 因此,对于栈来说,我们规定进行删除插入操作的表尾端称为 ...

  10. iOS UIAlertController在Tableview中显示缓慢,迟钝,延迟

    在UITableViewCell中弹窗Alert延迟.在cellForRow中:cell.selectionStyle = UITableViewCellSelectionStyleNone; 或者在 ...