碼上歡樂
相關內容    簡體    繁體

html實現拍照

本文轉載自   查看原文   2017-12-07 16:25   1086    HTML/ 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>  


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 通過HTML5的getUserMedia實現拍照功能 html5調用攝像頭實現拍照 HTML5 使用FileReader實現調用相冊、拍照功能 HTML5 實現手機拍照上傳 HTML之調用攝像頭實現拍照和攝像功能 HTML5: 實現調用系統拍照或者選擇照片並預覽 webcam實現拍照 uniapp實現拍照模板 WebView加載html實現網頁上傳本地文件(圖片，拍照，語音等) 【Demo】HTML5 拍照上傳
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM