HTML5调用手机摄像头,仅仅支持OPPOHD浏览器
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5调用手机摄像头,仅仅支持OPPOHD浏览器</title>
<style>
#video { border: 1px solid #ccc; display:inline-block; }
#canvas { border: 1px solid #ccc; display:inline-block;}
#take_photo{background-color:orange;width:100px;height:30px;border:0px;}
</style>
</head>
<body>
<video id="video" width="480" height="320" autoplay></video>
<canvas id="canvas" width="480" height="320"></canvas>
<input id="take_photo" name="take_photo" value="拍照" type="button" />
</body>
</html> <script type="text/javascript">
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
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("error", error.code);
};
if (navigator.getUserMedia) {
navigator.getUserMedia(videoobj, function (stream) {
video.src = stream;
}, errback);
} else if (navigator.webkitGetUserMedia) {//chrome
navigator.webkitGetUserMedia(videoobj, function (stream) {
video.src = window.URL.createObjectURL(stream) || stream;
}, errback)
}
else if (navigator.mozGetUserMedia) {//firefox
navigator.mozGetUserMedia(videoobj, function (stream) {
video.src = window.URL.createObjectURL(stream) || stream;
}, errback)
}
else if (navigator.msGetUserMedia) {//IE
navigator.msGetUserMedia(videoobj, function (stream) {
video.src = window.URL.createObjectURL(stream) || stream;
}, errback)
}
video.play();
document.getElementById("take_photo").addEventListener("click", function () {
context.drawImage(video, 0, 0, 480, 320); //视频截屏
});
}, false);
</script>
HTML5调用手机摄像头,仅仅支持OPPOHD浏览器的更多相关文章
- 怎样让HTML5调用手机摄像头拍照——实践就是一切
原文:怎样让HTML5调用手机摄像头拍照--实践就是一切 NanShan 小编将思路提供给了大家.学编程最重要的是实践,我这尽管有完好的代码,可是希望大家都能够自己写出属于自己的代码 HTML5 Th ...
- html5调用手机摄像头，实现拍照上传功能
今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在 ...
- 使用HTML5+调用手机摄像头和相册
前言:前端时间使用HTML5做了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了不少时间去研究.最终是采用了HTML5plus(HTML5+)的方式完成了该功能,现将具体方法简 ...
- html5调用手机摄像头
<input type="file" accept="image/*" capture="camera"><input t ...
- getUserMedia API及HTML5 调用手机摄像头拍照
getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头.视频.音频.地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件 ...
- html5调用手机摄像头（图片可多选 限pc）
html5自带的 input file=”” ,纯html5,并且不涉及到js ,就可以实现.代码如下: <input type="file" accept="im ...
- 亲测可用）html5 file调用手机摄像头
在切图网一个客户的webapp项目中需要用到 html5调用手机摄像头,找了很多资料,大都是 js调用api 然后怎样怎样,做了几个demo测试发现根本不行, 后来恍然大悟,用html5自带的 in ...
- html5调取手机摄像头或相册
html5调用手机摄像头或者相册 由于input的type=file 格式的文件的界面并不是我们所希望的界面,所以在此我隐藏input,自定义样式,这个样式就在<a>中自己定义,这里我就不 ...
- 利用html5调用本地摄像头拍照上传图片[转]
利用html5调用本地摄像头拍照上传图片 html5概念啥的就不废话了,不知道的 百度, 谷歌一堆..今天学了学html5中的Canvas结合新增的<video>标签来获取本地摄像头, ...
随机推荐
- Zabbix源码安装部署
zabbix源码部署安装 参考文档:https://www.zabbix.com/documentation/4.0/manual/installation/install https://www ...
- 解决url传递过程中加号变空格的问题
url传递过程中加号变空格 在接收url参数的过程中,会发现如果参数中存在‘+’号,接收后会变成空格. 如11+22接收后变成11 22. 要解决这个问题,需要将加号替换为%2B进行传递. 如11%2 ...
- 第四课：PHP 变量
变量指程序中使用的数值是可以变化的量,与常量(一旦被定义,就无法改变)相反. 变量是用于存储信息的"容器": 实例 <?php $x=5; $y=6; $z=$x+$y; e ...
- php+sqlserver处理读取decimal 类型数据，不满1的数字会去掉0的问题
php+sqlserver处理读取decimal 类型数据,如果数据不满1,会去掉0的问题.比如读取的数据是 0.05,会显示 .05 function convert_number($number) ...
- Hive(2)-Hive的安装,使用Mysql替换derby,以及一丢丢基本的HQL
一. Hive下载 1. Hive官网地址 http://hive.apache.org/ 2. 文档查看地址 https://cwiki.apache.org/confluence/display/ ...
- hive 学习系列五（hive 和elasticsearch 的交互，很详细哦，我又来吹liubi了）
hive 操作elasticsearch 一,从hive 表格向elasticsearch 导入数据 1,首先,创建elasticsearch 索引,索引如下 curl -XPUT '10.81.17 ...
- queue消息队列
class queue.Queue(maxsize=0) #先入先出 class queue.LifoQueue(maxsize=0) #last in fisrt out class queue. ...
- PHP中的mysql_unbuffered_query与mysql_query的区别
对于mysql_query大家都很熟悉,下面先简单介绍下mysql_unbuffered_query mysql_unbuffered_query (PHP 4 >= 4.0.6, PHP 5) ...
- Servlet生命周期与线程安全
上一篇介绍了Servlet初始化,以及如何处理HTTP请求,实际上在这两个过程中,都伴随着Servlet的生命周期,都是Servlet生命周期的一部分.同时,由于Tomcat容器默认是采用单实例多线程 ...
- js倒计时页面跳转
HTML: <p><span id="timer">60</span>s 后跳转到百度首页</p> JS: //倒计时方法 func ...