zoukankan      html  css  js  c++  java

  • 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>  
  • 相关阅读:
    bzoj1053(反素数）
    poj1442（对顶堆）
    poj2823(单调队列）
    poj3630(简单tire）
    poj1924(单调栈求最大矩阵）
    最大xor路径（poj3764）
    poj2689
    求n!末尾0的个数
    BigInteger和BigDecimal的基本用法
    大数乘法
  • 原文地址：https://www.cnblogs.com/hsdying/p/7999693.html
Copyright © 2011-2022 走看看