html实现拍照

  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>HTML5 GetUserMedia Demo</title>  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />  
  6. </head>  
  7. <body>  
  8.     <input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia();" /><br />  
  9.     <video height="120px" autoplay="autoplay"></video><hr />  
  10.     <input type="button" title="拍照" value="拍照" onclick="getPhoto();" /><br />  
  11.     <canvas id="canvas1" height="120px" ></canvas><hr />  
  12.     <input type="button" title="视频" value="视频" onclick="getVedio();" /><br />  
  13.     <canvas id="canvas2" height="120px"></canvas>  
  14.   
  15.     <script type="text/javascript">  
  16.         var video = document.querySelector('video');  
  17.         var audio, audioType;  
  18.   
  19.         var canvas1 = document.getElementById('canvas1');  
  20.         var context1 = canvas1.getContext('2d');  
  21.   
  22.         var canvas2 = document.getElementById('canvas2');  
  23.         var context2 = canvas2.getContext('2d');  
  24.   
  25.         navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;  
  26.         window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;  
  27.   
  28.         var exArray = []; //存储设备源ID  
  29.         MediaStreamTrack.getSources(function (sourceInfos) {  
  30.             for (var i = 0; i != sourceInfos.length; ++i) {  
  31.                 var sourceInfo = sourceInfos[i];  
  32.                 //这里会遍历audio,video，所以要加以区分  
  33.                 if (sourceInfo.kind === 'video') {  
  34.                     exArray.push(sourceInfo.id);  
  35.                 }  
  36.             }  
  37.         });  
  38.   
  39.         function getMedia() {  
  40.             if (navigator.getUserMedia) {  
  41.                 navigator.getUserMedia({  
  42.                     'video': {  
  43.                         'optional': [{  
  44.                             'sourceId': exArray[1] //0为前置摄像头，1为后置  
  45.                         }]  
  46.                     },  
  47.                     'audio':true  
  48.                 }, successFunc, errorFunc);    //success是获取成功的回调函数  
  49.             }  
  50.             else {  
  51.                 alert('Native device media streaming (getUserMedia) not supported in this browser.');  
  52.             }  
  53.         }  
  54.   
  55.         function successFunc(stream) {  
  56.             //alert('Succeed to get media!');  
  57.             if (video.mozSrcObject !== undefined) {  
  58.                 //Firefox中，video.mozSrcObject最初为null，而不是未定义的，我们可以靠这个来检测Firefox的支持  
  59.                 video.mozSrcObject = stream;  
  60.             }  
  61.             else {  
  62.                 video.src = window.URL && window.URL.createObjectURL(stream) || stream;  
  63.             }  
  64.   
  65.             //video.play();  
  66.   
  67.             // 音频  
  68.             audio = new Audio();  
  69.             audioType = getAudioType(audio);  
  70.             if (audioType) {  
  71.                 audio.src = 'polaroid.' + audioType;  
  72.                 audio.play();  
  73.             }  
  74.         }  
  75.         function errorFunc(e) {  
  76.             alert('Error！'+e);  
  77.         }  
  78.   
  79.           
  80.         // 将视频帧绘制到Canvas对象上,Canvas每60ms切换帧，形成肉眼视频效果  
  81.         function drawVideoAtCanvas(video,context) {  
  82.             window.setInterval(function () {  
  83.                 context.drawImage(video, 0, 0,90,120);  
  84.             }, 60);  
  85.         }  
  86.   
  87.         //获取音频格式  
  88.         function getAudioType(element) {  
  89.             if (element.canPlayType) {  
  90.                 if (element.canPlayType('audio/mp4; codecs="mp4a.40.5"') !== '') {  
  91.                     return ('aac');  
  92.                 } else if (element.canPlayType('audio/ogg; codecs="vorbis"') !== '') {  
  93.                     return ("ogg");  
  94.                 }  
  95.             }  
  96.             return false;  
  97.         }  
  98.   
  99.         // vedio播放时触发，绘制vedio帧图像到canvas  
  100. //        video.addEventListener('play', function () {  
  101. //            drawVideoAtCanvas(video, context2);  
  102. //        }, false);  
  103.   
  104.         //拍照  
  105.         function getPhoto() {  
  106.             context1.drawImage(video, 0, 0,90,120); //将video对象内指定的区域捕捉绘制到画布上指定的区域，实现拍照。  
  107.         }  
  108.   
  109.         //视频  
  110.         function getVedio() {  
  111.             drawVideoAtCanvas(video, context2);  
  112.         }  
  113.   
  114.     </script>  
  115. </body>  
  116. </html>  
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/hsdying/p/7999693.html