基于火狐和谷歌浏览器的html5调用摄像头
2015-08-16 00:24
851 查看
基于火狐和谷歌浏览器的html5调用摄像头需要浏览器版本比较高,此代码基于两个浏览器都是40版本。手机版本谷歌浏览器在安卓4.0的33版本不支持,手机火狐浏览器支持,并且可以选择调用前后摄像头
调用代码
调用代码
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="jquery-1.8.2.min.js"></script> </head> <body> <video id="video" width="640" height="480" autoplay></video> <button id="snap">Snap Photo</button> <canvas id="canvas" width="640" height="480"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var video = document.getElementById("video"); $(document).ready(function () { videoObj = { "video": true }; var errBack = function (error) { console.log("Video capture error: ", error.code); }; if (navigator.getUserMedia) { // Standard navigator.getUserMedia(videoObj, function (stream) { video.src = stream; video.play(); }, errBack); } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed navigator.webkitGetUserMedia(videoObj, function (stream) { video.src = window.webkitURL.createObjectURL(stream); video.play(); }, errBack); } else if (navigator.mozGetUserMedia) { // Firefox-prefixed navigator.mozGetUserMedia(videoObj, function (stream) { video.src = window.URL.createObjectURL(stream); video.play(); }, errBack); }; $("#snap").on("click", function () { context.drawImage(video, 0, 0, 640, 480); }); }); </script> </body> </html>
相关文章推荐
- html5的UI框架
- 【实例】html5-canvas绘制线段、矩形和圆
- html5 说明
- 【学习Egret】第一个H5小游戏,人人来打产品汪
- 基于Html5缓存的页面P2P技术可行性探讨
- H5实现支付宝的集成
- Java EE HTML5 WebSocket 示例
- html5 canvas
- HTML5元素、属性和格式化
- HTML5 重力感应效果,实现摇一摇效果
- H5页面性能优化
- 脚本化CSS类-HTML5 classList属性
- 24个 HTML5 & CSS3 下拉菜单制作教程
- HTML5基础
- Html5 Canvas笔记(2)-Canvas绘图
- H5填坑笔记--持续更新
- 为什么学习html5
- Notepad++巨大灾难!史诗级错误~
- html5 -- canvas画图
- html5 touch引发的一个应用以及营销