使用getUserMedia 调用摄像头
2015-01-02 20:33
344 查看
html5中一个有趣的 API,能够调用电脑的摄像头,结合 <video> 标签和 Canvas 就能在浏览器中拍摄照片了。
这里需要注意:
因为安全问题, chrome 对于本地文件禁用了很多功能(以file:///开头). 所以如果你直接把html文件拖进chrome是看不到效果的(getUserMedia 失败). 这个问题让我疑惑了挺久的.
解决办法:
1. 使用IDE 来查看效果, 比如webstorm.
2. 配合http服务器. 比如python simplehttpserver. 或者apache等等.
3. 关闭所有chrome窗口(否则参数无效). 在命令行中增加如下参数启动chrome.
chrome --allow-file-access-from-files
一个示例
代码参考自 http://davidwalsh.name/demo/camera.php
这里需要注意:
因为安全问题, chrome 对于本地文件禁用了很多功能(以file:///开头). 所以如果你直接把html文件拖进chrome是看不到效果的(getUserMedia 失败). 这个问题让我疑惑了挺久的.
解决办法:
1. 使用IDE 来查看效果, 比如webstorm.
2. 配合http服务器. 比如python simplehttpserver. 或者apache等等.
3. 关闭所有chrome窗口(否则参数无效). 在命令行中增加如下参数启动chrome.
chrome --allow-file-access-from-files
一个示例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <p>Using Opera Next or Chrome Canary, use this page to take your picture!</p> <video id="video" width="640" height="480" autoplay></video> <button id="snap" class="sexyButton">Snap Photo</button> <canvas id="canvas" width="640" height="480"></canvas> <script> // Put event listeners into place 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 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) { // WebKit-prefixed navigator.mozGetUserMedia(videoObj, function(stream){ video.src = window.URL.createObjectURL(stream); video.play(); }, errBack); } // Trigger photo take document.getElementById("snap").addEventListener("click", function() { context.drawImage(video, 0, 0, 640, 480); }); }, false); </script> </body> </html>
代码参考自 http://davidwalsh.name/demo/camera.php
相关文章推荐
- html5调用摄像头使用Getusermedia和canvas
- HTML5使用 getUserMedia方法调用本地摄像头拍照
- HTML5使用 getUserMedia方法调用本地摄像头拍照
- HTML5调用手机摄像头拍照 - getUserMedia.js
- 手机摄像头拍照 Cross-browser camera capture with getUserMedia/WebRTC
- 手机调取摄像头问题(getUserMedia)
- [转] HTML5利用WebRTC的getUserMedia获取摄像头信息模拟拍照及视频(完整示例)
- HTML5利用WebRTC的getUserMedia获取摄像头信息模拟拍照及视频(完整示例)
- getUserMedia在http下的使用
- Cordova使用插件cordova-plugin-media-capture调用摄像头
- 以不同用户身份运行程序,/savecred只需要输入一次密码(GetTokenByName取得EXPLORER.EXE的令牌,然后调用CreateProcessAsUser,而且使用LoadUserProfile解决另存文件的问题)good
- UserMedia API:使用浏览器访问摄像头拍照
- HTML5利用WebRTC的getUserMedia获取摄像头信息模拟拍照及视频(完整示例)
- C# 使用 Environment.GetCommandLineArgs 方法 制作*.exe和参数 供其他程序调用
- jQuery中使用getJSON方法调用C#的后台方法
- Android调用系统摄像头--使用MediaRecorder--1--预览(preview)功能
- Linux下使用QT调用opencv读取摄像头视频 调试心得
- 使用反射调用set和get方法
- JQuery使用getJSON跨域调用数据
- 使用Runtime.getRuntime().exec()的方法调用本地mysqldump.exe备份还原数据库(路径中含有空格和数字)的方法