html5打开摄像头并用canvas模拟拍照 - 转
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
打开摄像头
var aVideo=document.getElementById('video');
var aCanvas=document.getElementById('canvas');
var ctx=aCanvas.getContext('2d'); navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;//获取媒体对象(这里指摄像头)
navigator.getUserMedia({video:true}, gotStream, noStream);//参数1获取用户打开权限;参数二成功打开后调用,并传一个视频流对象,参数三打开失败后调用,传错误信息 function gotStream(stream) {
video.src = URL.createObjectURL(stream);
video.onerror = function () {
stream.stop();
};
stream.onended = noStream;
video.onloadedmetadata = function () {
alert('摄像头成功打开!');
};
}
function noStream(err) {
alert(err);
}
按钮模拟拍照
document.getElementById("snap").addEventListener("click", function() { ctx.drawImage(aVideo, 0, 0, 640, 480);//将获取视频绘制在画布上
});
这样就成功啦!
但是!!!还有一点要注意,这在很多人那里都没有提到的,就是,打开摄像头一定要上server上打开,否则没办法使用!因为打开的是属于网络的webcam,需要在server上打开。
目前好像chrome和opera还有大多数移动设备支持HTLM5打开摄像头,我这个是在chrome上测试成功的。
html5打开摄像头并用canvas模拟拍照 - 转的更多相关文章
- html5打开摄像头并用canvas模拟拍照
网上很多关于用HTML5打开本地摄像头的文章,但各有瑕疵.根据我自己的亲身体验,我分享一下我用HTML5打开摄像头的经验. 废话不多说,直接看代码. HTML代码: <video id=&quo ...
- html5 打开摄像头
<video onloadedmetadata="" id="inputVideo" style="width: 1080px;height: ...
- HTML5按键打开摄像头和拍照
HTML5实现按键打开摄像头和拍照 步骤: 1.创建一个打开摄像头按钮的标签.video标签.拍照的按钮标签.画布 2.实现打开摄像头的功能 3.实现拍照功能 具体实现代码: <!DOCTY ...
- html5调用摄像头实现拍照
技术时刻都在前进着.我们的需求也是时刻在改变着.最近在开发中遇到了用户进行账号注册时需要个人图像,网站提供自动拍照功能.还有在登录了PC之后,手机端进行登录时只需要扫描一下PC上的二维码就可以登录.这 ...
- html 通过input video canvas 打开摄像头 定制相机
在机缘巧合之下,了解到用HTML5和javascript调用摄像头来实现拍照功能,今天就把大致原理写下来.页面布局很简单,就是一个input标签,两个HTML5元素video.canvas和一个but ...
- 经典!HTML5 Canvas 模拟可撕裂布料效果
这是一个模拟可撕裂布料效果的 HTML5 Canvas 应用演示,效果逼真.你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果. 温馨提示:为保证最佳的效果, ...
- 手机端file限制只能选择图片、视频、音频,直接打开摄像头拍照或录像
限制只能选择图片 <input type="file" accept="image/*"> 限制只能选择视频 <input type=&quo ...
- 项目实战:Qt+Ffmpeg+OpenCV相机程序(打开摄像头、支持多种摄像头、分辨率调整、翻转、旋转、亮度调整、拍照、录像、回放图片、回放录像)
若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/ar ...
- [转]html5调用摄像头实例
原文:https://blog.csdn.net/binquan_liang/article/details/79489989 最近在学习在做HTML5的项目,看了博客上html5调用摄像头拍照的文章 ...
随机推荐
- 使用spec文件语法创建一个rpm
How to create an RPM package/zh-hk < How to create an RPM package 此页面包含 Packaging:ScriptletSnippe ...
- if __name__ == '__main__的理解
模块之间引用不能循环成环,圆圈 模块的收搜 !!!把模块当作脚本执行 什么叫模块:py文件,如果一个py文件被导入了,他就是一个模块, 模块没有具体的调用过程 但是能对外提供功能 什么叫脚 ...
- Qt样式表的使用
Qt中可以灵活的使用层叠样式表(CSS),其语法和CSS很相似.因为HTML CSS的灵活性,所以可以很方便的为QT界面设计自己需要的外观.除了子类化Style类,使用QT样式表(QStyleShee ...
- LibreOJ 6004. 「网络流 24 题」圆桌聚餐 网络流版子题
#6004. 「网络流 24 题」圆桌聚餐 内存限制:256 MiB时间限制:5000 ms标准输入输出 题目类型:传统评测方式:Special Judge 上传者: 匿名 提交提交记录统计讨论测试数 ...
- Delphi--最强大的开发工具(欢迎转载)
最强大的开发工具 Delphi 目录 --------------------------------------------------------------------------- 前言 De ...
- Maximum Subarray LT53
Given an integer array nums, find the contiguous subarray (containing at least one number) which has ...
- 实现SQL express版做自动备份数据库的方法
SQL Server 2005/2008 Express版没有代理组件,不支持维护计划.可以采用下面的办法实现每日备份: 一.在要备份的数据库中创建存储过程. 存储过程名称:sp_BackupData ...
- strace使用
统计信息 -c -- count time, calls, and errors for each syscall and report summary 输出结果到文件 -o 例如 strace ...
- CRC-32的原理和实现
/* crc32.c -- compute the CRC-32 of a data stream * Copyright (C) 1995-2002 Mark Adler * For conditi ...
- unity在一个对象上挂多个一样的脚本怎么获取
使用GetComponents获取,存到一个该类的数组里