使用js调用摄像头拍照
在一些浏览器里已经可以使用web api调用摄像头功能了。
基于此可以经行拍照摄像功能，网上找了些资料，然后实现了简单的拍照功能
演示地址 /webrtc.html
代码
<!DOCTYPE html><html lang="ZH-CN"><head><meta charset="utf-8"><title>web RTC 测试</title><style>.booth {width:400px;background:#ccc;border: 10px solid #ddd;margin: 0 auto;}</style></head><body><div class="booth"><video id="video" width="400" height="300"></video><button id='tack'> snap shot</button><canvas id='canvas' width='400' height='300'></canvas><img id='img' src=''></div><script>var video = document.getElementById('video'),canvas = document.getElementById('canvas'),snap = document.getElementById('tack'),img = document.getElementById('img'),vendorUrl = window.URL || window.webkitURL;//媒体对象navigator.getMedia = navigator.getUserMedia ||navagator.webkitGetUserMedia ||navigator.mozGetUserMedia ||navigator.msGetUserMedia;navigator.getMedia({video: true, //使用摄像头对象audio: false //不适用音频}, function(strem){console.log(strem);video.src = vendorUrl.createObjectURL(strem);video.play();}, function(error) {//error.codeconsole.log(error);});snap.addEventListener('click', function(){//绘制canvas图形canvas.getContext('2d').drawImage(video, 0, 0, 400, 300);//把canvas图像转为img图片img.src = canvas.toDataURL("image/png");})</script></body></html>
demo演示;
特别说明
有些浏览器可能不支持此功能必须通过服务器打开页面，通过files：//打开无效如果通过远程服务器打开则必须是https协议， http协议也无法使用
此博客出自稻草人LXB，转载请注明原文地址
博客地址：/scarecrowlxb/
个人网址：
