cordova 錄音 &錄像(轉)

時間 2019-11-29

原文原文鏈接

1，插件的安裝
首先咱們要在「終端」中進入工程所在的目錄，而後運行以下命令：

 
         cordova plugin add cordova-plugin-media-capture

2，錄音功能
下面樣例，點擊「開始錄音」按鈕後則系統會打開錄音器進行錄音。錄音完畢後，輸出錄音文件的保存地址。

能夠經過 duration 屬性參數控制音頻錄製長度，若是到達這個時長也會中止錄音。

 
         <!DOCTYPE html> 
        
         <html> 
        
         <head> 
        
         <title>Capture Audio</title> 
        
         <meta http-equiv= 
         "Content-type" 
         content= 
         "text/html; charset=utf-8" 
         > 
        
         <script type= 
         "text/javascript" 
         charset= 
         "utf-8" 
         src= 
         "cordova.js" 
         ></script> 
        
         <script type= 
         "text/javascript" 
         charset= 
         "utf-8" 
         > 
        
         function 
         audioCapture() { 
        
         //開始錄音（最長錄製時間：15秒） 
        
         navigator.device.capture.captureAudio(onSuccess, onError, {duration: 15}); 
        
         //錄製成功 
        
         function 
         onSuccess(mediaFiles) { 
        
         var 
         i, path, len; 
        
         //遍歷獲取錄製的文件（iOS只支持一次錄製一個視頻或音頻） 
        
         for 
         (i = 0, len = mediaFiles.length; i < len; i += 1) { 
        
         console.log(mediaFiles); 
        
         path = mediaFiles[i].fullPath; 
        
         alert( 
         "錄製成功！\n\n" 
        
         +  
         "文件名：" 
         + mediaFiles[i].name +  
         "\n" 
        
         +  
         "大小：" 
         + mediaFiles[i].size +  
         "\n\n" 
        
         +  
         "localURL地址：" 
         + mediaFiles[i].localURL +  
         "\n\n" 
        
         +  
         "fullPath地址：" 
         + path); 
        
         } 
        
         } 
        
         //錄製失敗 
        
         function 
         onError(error) { 
        
         alert( 
         '錄製失敗！錯誤碼：' 
         + error.code); 
        
         } 
        
         } 
        
         </script> 
        
         </head> 
        
         <body style= 
         "padding-top:50px" 
         > 
        
         <button style= 
         "font-size:23px;" 
         onclick= 
         "audioCapture();" 
         >開始錄音</button> 
        
         </body> 
        
         </html>

3，錄像功能
下面樣例，點擊「開始錄像」按鈕後則系統會打開攝像頭進行拍攝視頻。錄像完畢後，輸出錄像文件的保存地址。

能夠經過 duration 屬性參數控制視頻錄製長度，當到達這個長度也會中止錄製。

 
         <!DOCTYPE html> 
        
         <html> 
        
         <head> 
        
         <title>Capture Video</title> 
        
         <meta http-equiv= 
         "Content-type" 
         content= 
         "text/html; charset=utf-8" 
         > 
        
         <script type= 
         "text/javascript" 
         charset= 
         "utf-8" 
         src= 
         "cordova.js" 
         ></script> 
        
         <script type= 
         "text/javascript" 
         charset= 
         "utf-8" 
         > 
        
         function 
         videoCapture() { 
        
         //開始錄像（最長錄製時間：15秒） 
        
         navigator.device.capture.captureVideo(onSuccess, onError, {duration: 15}); 
        
         //錄製成功 
        
         function 
         onSuccess(mediaFiles) { 
        
         var 
         i, path, len; 
        
         //遍歷獲取錄製的文件（iOS只支持一次錄製一個視頻或音頻） 
        
         for 
         (i = 0, len = mediaFiles.length; i < len; i += 1) { 
        
         console.log(mediaFiles); 
        
         path = mediaFiles[i].fullPath; 
        
         alert( 
         "錄製成功！\n\n" 
        
         +  
         "文件名：" 
         + mediaFiles[i].name +  
         "\n" 
        
         +  
         "大小：" 
         + mediaFiles[i].size +  
         "\n\n" 
        
         +  
         "localURL地址：" 
         + mediaFiles[i].localURL +  
         "\n\n" 
        
         +  
         "fullPath地址：" 
         + path); 
        
         } 
        
         } 
        
         //錄製失敗 
        
         function 
         onError(error) { 
        
         alert( 
         '錄製失敗！錯誤碼：' 
         + error.code); 
        
         } 
        
         } 
        
         </script> 
        
         </head> 
        
         <body style= 
         "padding-top:50px" 
         > 
        
         <button style= 
         "font-size:23px;" 
         onclick= 
         "videoCapture();" 
         >開始錄像</button> 
        
         </body> 
        
         </html>

轉載請保留原文連接： http://www.hangge.com/blog/cache/detail_1186.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。