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>标签来获取本地摄像头, ...
随机推荐
- JVM 垃圾回收机制和常见算法和 JVM 的内存结构和内存分配（面试题）
一.JVM 垃圾回收机制和常见算法 Sun 公司只定义了垃圾回收机制规则而不局限于其实现算法,因此不同厂商生产的虚拟机采用的算法也不尽相同.GC(Garbage Collector)在回收对象前首先必 ...
- JSP／Servlet开发——第二章 JSP数据交互（二）
1. JSP 内置对象 application: ●application 对象类似于系统的 "全局变量", 用于同一个应用内的所有用户之问的数据共享: ●application对 ...
- laravel框架excel 的导入导出功能
1.简介 Laravel Excel 在 Laravel 5 中集成 PHPOffice 套件中的 PHPExcel,从而方便我们以优雅的.富有表现力的代码实现Excel/CSV文件的导入和导出. ...
- makefile = 与 := 的区别
“=” make会将整个makefile展开后,再决定变量的值.也就是说,变量的值将会是整个makefile中最后被指定的值.看例子: x = foo y = $(x) bar ...
- javaweb 项目部署到tomcat
1.准备环境 1.安装 mysql 2.安装java 环境 3.使用idea打war包 点击 apply 生成war包 将war包传到tomcat的webapp目录下,进入tomcat安装目录,进入b ...
- web视频播放
webm.mp4/h264 video.js hevc libde265.js hls/m3u8 hls.js
- MyBatis的笔记
1.#{}和${}的区别是什么? #{}是预编译处理,${}是字符串替换. #{}是sql的参数占位符,${}是Properties文件中的变量占位符,它可以用于标签属性值和sql内部,属于静态文本替 ...
- Eclipse报错:An internal error occurred during: "Building workspace". Java heap space），卡死解决办法
在项目工程的根目录下,找到.project,用记事本打开,把两处删除掉: 第一处: <buildCommand> <name>org.eclipse.wst.jsdt.core ...
- CSS3实现3D球体旋转动画
html <div class="ball-box"> <div class="ball"> <div class="l ...
- Ubantu修改主机名详细步骤
使用vmWare创建的Ubantu虚拟主机,默认的主机名均为Ubantu,通过修改主机名的使得分布式集群操作变得方便.具体步骤如下: 1.查看虚拟机的主机名:打开终端,使用 hostname 命令,回 ...