HTML调用PC摄像头【申明:来源于网络】
2016-12-23 13:56
274 查看
HTML调用PC摄像头【申明:来源于网络】 ———- 地址:http://www.oschina.net/code/snippet_2440934_55195
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5调用电脑摄像头实例</title> <script type="text/javascript"> window.addEventListener("DOMContentLoaded", function() { // Grab elements, create settings, etc. var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"), video = document.getElementById("video"), videoObj = { "video": true }, errBack = function(error) { console.log("Video capture error: ", error.code); }; // Put video listeners into place if(navigator.getUserMedia) { // Standard //alert("支持navigator.getUserMedia"); navigator.getUserMedia(videoObj, function(stream) { video.src = stream; video.play(); }, errBack); } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed //alert("支持navigator.webkitGetUserMedia"); navigator.webkitGetUserMedia(videoObj, function(stream){ video.src = window.webkitURL.createObjectURL(stream); video.play(); }, errBack); } else if(navigator.mozGetUserMedia) { // Firefox-prefixed //alert("支持navigator.mozGetUserMedia"); navigator.mozGetUserMedia(videoObj, function(stream){ video.src = window.URL.createObjectURL(stream); video.play(); }, errBack); } // 触发拍照动作 document.getElementById("snap").addEventListener("click", function() { context.drawImage(video, 0, 0, 640, 480); }); }, false); </script> </head> <body> <video id="video" width="640" height="480" autoplay></video><br> <button id="snap" >点击拍照</button> <br> <canvas id="canvas" width="640" height="480"></canvas> </body> </html>
相关文章推荐
- C#实现控制摄像头的类
- Android 开发随手笔记之使用摄像头拍照
- C#实现调用本机摄像头实例
- unity3d调用手机或电脑摄像头
- AngularJS中使用HTML5手机摄像头拍照
- Python中使用摄像头实现简单的延时摄影技术
- Android开发教程之调用摄像头功能的方法详解
- Android实现手机摄像头的自动对焦
- iOS利用手机摄像头测心率
- h5调用摄像头的实现方法
- Linux系统中如何正确安装摄像头驱动
- 深入挖掘手机摄像头的潜力
- html5调用摄像头拍照
- LG G3截图曝光 界面采用扁平化设计风格
- 三星GALAXY S5内部拆解 史上零件最少
- 三星推出GALAXY S5 Active
- Find 75000万像素和诺基亚的不是一个概念
- 诺基亚Lumia630传感器并未缩水
- CamTrack 2.4
- 用C#捕获摄像头