- 1 <script type="text/javascript" src="jquery.js"></script>
- 2 <script type="text/javascript">
- 3 function $(elem) {
- 4 return document.querySelector(elem);
- 5 }
- 6
- 7 // 获取媒体方法(旧方法)
- 8 navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMeddia || navigator.msGetUserMedia;
- 9
- 10 var canvas = $('canvas'),
- 11 context = canvas.getContext('2d'),
- 12 video = $('video'),
- 13 snap = $('#snap'),
- 14 close = $('#close'),
- 15 upload = $('#upload'),
- 16 uploaded = $('#uploaded'),
- 17 mediaStreamTrack;
- 18
- 19 // 获取媒体方法(新方法)
- 20 // 使用新方法打开摄像头
- 21 if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
- 22 navigator.mediaDevices.getUserMedia({
- 23 video: true,
- 24 audio: true
- 25 }).then(function(stream) {
- 26 console.log(stream);
- 27
- 28 mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[1];
- 29
- 30 video.src = (window.URL || window.webkitURL).createObjectURL(stream);
- 31 video.play();
- 32 }).catch(function(err) {
- 33 console.log(err);
- 34 })
- 35 }
- 36 // 使用旧方法打开摄像头
- 37 else if (navigator.getMedia) {
- 38 navigator.getMedia({
- 39 video: true
- 40 }, function(stream) {
- 41 mediaStreamTrack = stream.getTracks()[0];
- 42
- 43 video.src = (window.URL || window.webkitURL).createObjectURL(stream);
- 44 video.play();
- 45 }, function(err) {
- 46 console.log(err);
- 47 });
- 48 }
- 49
- 50 // 截取图像
- 51 snap.addEventListener('click', function() {
- 52 context.drawImage(video, 0, 0, 200, 150);
- 53 }, false);
- 54
- 55 // 关闭摄像头
- 56 close.addEventListener('click', function() {
- 57 mediaStreamTrack && mediaStreamTrack.stop();
- 58 }, false);
- 59
- 60 // 上传截取的图像
- 61 upload.addEventListener('click', function() {
- 62 jQuery.post('/uploadSnap.php', {
- 63 snapData: canvas.toDataURL('image/png')
- 64 }).done(function(rs) {
- 65 rs = JSON.parse(rs);
- 66
- 67 console.log(rs);
- 68
- 69 uploaded.src = rs.path;
- 70 }).fail(function(err) {
- 71 console.log(err);
- 72 });
- 73 }, false);
- 74
- 75 </script>
来源: http://www.bubuko.com/infodetail-1949747.html