<!DOCTYPE html><html><head> ???<meta charset="utf-8"> ???<title></title></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> ???<h2>按钮模拟拍照</h2></body><script type="text/javascript"> ???var aVideo = document.getElementById(‘video‘); ???var aCanvas = document.getElementById(‘canvas‘); ???var ctx = aCanvas.getContext(‘2d‘); ???navigator.getUserMedia = navigator.getUserMedia || ???????navigator.webkitGetUserMedia || ???????navigator.mozGetUserMedia || ???????navigator.msGetUserMedia; //获取媒体对象（这里指摄像头） ???navigator.getUserMedia({ ???????video: true ???}, gotStream, noStream); //参数1获取用户打开权限；参数二成功打开后调用，并传一个视频流对象，参数三打开失败后调用，传错误信息 ???function gotStream(stream) { ???????video.src = URL.createObjectURL(stream); ???????video.onerror = function() { ???????????stream.stop(); ???????}; ???????stream.onended = noStream; ???????video.onloadedmetadata = function() { ???????????alert(‘摄像头成功打开！‘); ???????}; ???} ???function noStream(err) { ???????alert(err); ???} ???document.getElementById("snap").addEventListener("click", function() { ???????ctx.drawImage(aVideo, 0, 0, 640, 480); //将获取视频绘制在画布上 ???});</script></html>
js获取摄像头视频流
原文地址：http://www.cnblogs.com/yoyogis/p/7810935.html