1. 程式人生 > >html5中呼叫攝像頭拍照

html5中呼叫攝像頭拍照

方法:

getCamera: 獲取攝像頭管理物件

物件:

Camera: 攝像頭物件
CameraOption: JSON物件,呼叫攝像頭的引數
PopPosition: JSON物件,彈出拍照或攝像介面指示位置

回撥方法:

CameraSuccessCallback: 呼叫攝像頭操作成功回撥
CameraErrorCallback: 攝像頭操作失敗回撥

許可權:

功能模組(permissions)

{
// ...
"permissions":{
    // ...
    "Camera": {
        "description"
: "攝像頭" } } }

getCamera

獲取攝像頭管理物件

Camera plus.camera.getCamera( index );

說明:

獲取需要操作的攝像頭物件,如果要進行拍照或攝像操作,需先通過此方法獲取攝像頭物件。
引數:

index: ( Number ) 可選 要獲取攝像頭的索引值
指定要獲取攝像頭的索引值,1表示主攝像頭,2表示輔攝像頭。如果沒有設定則使用系統預設主攝像頭。

返回值:
Camera : 攝像頭物件
平臺支援:

Android - 2.2+ (支援)
iOS - 4.3+ (支援)

示例:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Camera Example</title>
    <script type="text/javascript">
// 擴充套件API載入完畢後呼叫onPlusReady回撥函式 
document.addEventListener( "plusready", onPlusReady, false );
var r = null; 
// 擴充套件API載入完畢,現在可以正常呼叫擴充套件API 
function onPlusReady() { // 獲取裝置預設的攝像頭物件 var cmr = plus.camera.getCamera(); // ...... }
</script> </head> <body> </body> </html>

Camera

攝像頭物件

interface Camera {
    readonly attribute String[] supportedImageResolutions;
    readonly attribute String[] supportedVideoResolutions;
    readonly attribute String[] supportedImageFormats;
    readonly attribute String[] supportedVideoFormats;
    function void captureImage( successCB, errorCB, option );
    function void startVideoCapture( successCB, errorCB, option );
    function void stopVideoCapture();
}

屬性:

 supportedImageResolutions: 字串陣列,攝像頭支援的拍照解析度
    supportedVideoResolutions: 字串陣列,攝像頭支援的攝像解析度
    supportedImageFormats: 字串陣列,攝像頭支援的拍照檔案格式
    supportedVideoFormats: 字串陣列,攝像頭支援的攝像檔案格式

方法:

  captureImage: 進行拍照操作
    startVideoCapture: 呼叫攝像頭進行攝像操作
    stopVideoCapture: 結束攝像操作

supportedImageResolutions

字串陣列,攝像頭支援的拍照解析度
說明:

Array 型別 只讀屬性

屬性型別為String[],若不支援此屬性則返回空陣列物件。攝像頭支援的拍照圖片解析度字串形式“WIDTH*Height”,如“400*800”;如果支援任意自定義解析度則“*”。
平臺支援:

Android (支援)
iOS (不支援): 返回空陣列物件

示例:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Camera Example</title>
    <script type="text/javascript">
// 擴充套件API載入完畢後呼叫onPlusReady回撥函式 
document.addEventListener( "plusready", onPlusReady, false );
// 擴充套件API載入完畢,現在可以正常呼叫擴充套件API 
function onPlusReady() {
    var cmr = plus.camera.getCamera();
    alert( "Camera supperted image resolutions: " + cmr.supportedImageResolutions );
}
    </script>
    </head>
    <body>
    </body>
</html>

supportedVideoResolutions

字串陣列,攝像頭支援的攝像解析度
說明:

Array 型別 只讀屬性

屬性型別為String[],若不支援此屬性則返回空陣列物件。攝像頭支援的視訊解析度字串形式為“WIDTH*Height”,如“400*800”;如果支援任意自定義解析度則“*”。
平臺支援:

Android (支援)
iOS (不支援): 返回空陣列物件

示例:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Camera Example</title>
    <script type="text/javascript">
// 擴充套件API載入完畢後呼叫onPlusReady回撥函式 
document.addEventListener( "plusready", onPlusReady, false );
// 擴充套件API載入完畢,現在可以正常呼叫擴充套件API 
function onPlusReady() {
    var cmr = plus.camera.getCamera();
    alert( "Camera supperted image resolutions: " + cmr.supportedImageResolutions );
}
    </script>
    </head>
    <body>
    </body>
</html>

supportedImageFormats

字串陣列,攝像頭支援的拍照檔案格式
說明:

Array 型別 只讀屬性

屬性型別為String[],若不支援此屬性則返回空陣列物件。攝像頭支援的圖片檔案格式字串形式為檔案格式字尾名,如“jpg”、“png”、“bmp”。
平臺支援:

Android (支援)
iOS (不支援): 返回空陣列物件

示例:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Camera Example</title>
    <script type="text/javascript">
// 擴充套件API載入完畢後呼叫onPlusReady回撥函式 
document.addEventListener( "plusready", onPlusReady, false );
// 擴充套件API載入完畢,現在可以正常呼叫擴充套件API 
function onPlusReady() {
    var cmr = plus.camera.getCamera();
    alert( "Camera supperted image formats: " + cmr.supportedImageFormats );
}
    </script>
    </head>
    <body>
    </body>
</html>

supportedVideoFormats

字串陣列,攝像頭支援的攝像檔案格式
說明:

Array 型別 只讀屬性

屬性型別為String[],若不支援此屬性則返回空陣列物件。攝像頭支援的視訊檔案格式字串形式為檔案格式字尾名,如“3gp”、“mp4”、“avi”。
平臺支援:

Android (支援)
iOS (不支援): 返回空陣列物件

示例:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Camera Example</title>
    <script type="text/javascript">
// 擴充套件API載入完畢後呼叫onPlusReady回撥函式 
document.addEventListener( "plusready", onPlusReady, false );
// 擴充套件API載入完畢,現在可以正常呼叫擴充套件API 
function onPlusReady() {
    var cmr = plus.camera.getCamera();
    alert( "Camera supperted video formats: " + cmr.supportedVideoFormats );
}
    </script>
    </head>
    <body>
    </body>
</html>

captureImage

進行拍照操作

cmr.captureImage( successCB, errorCB, option );

說明:

攝像頭資源為獨佔資源,如果其它程式或頁面已經佔用攝像頭,再次操作則失敗。 拍照操作成功將通過successCB返回拍照獲取的圖片路徑。 可通過option設定攝像頭的各種屬性引數。
引數:

 successCB: ( CameraSuccessCallback ) 必選 拍照操作成功的回撥函式
    errorCB: ( CameraErrorCallback ) 可選 拍照操作失敗的回撥函式
    option: ( CameraOption ) 必選 攝像頭拍照引數

返回值:
void : 無
平臺支援:

Android - 2.2+ (支援)
iOS - 4.3+ (支援)

示例:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Camera Example</title>
    <script type="text/javascript">
// 擴充套件API載入完畢後呼叫onPlusReady回撥函式 
document.addEventListener( "plusready", onPlusReady, false );
// 擴充套件API載入完畢,現在可以正常呼叫擴充套件API 
function onPlusReady() {
    console.log("plusready");
}
// 拍照
function captureImage(){
    var cmr = plus.camera.getCamera();
    var res = cmr.supportedImageResolutions[0];
    var fmt = cmr.supportedImageFormats[0];
    console.log("Resolution: "+res+", Format: "+fmt);
    cmr.captureImage( function( path ){
            alert( "Capture image success: " + path );  
        },
        function( error ) {
            alert( "Capture image failed: " + error.message );
        },
        {resolution:res,format:fmt}
    );
}
    </script>
    </head>
    <body>
        <button onclick="captureImage()">拍照</button>
    </body>
</html>

startVideoCapture

呼叫攝像頭進行攝像操作

cmr.startVideoCapture( successCB, errorCB, option );

說明:

攝像頭資源為獨佔資源,如果其它程式或頁面已經佔用攝像頭,再次操作則失敗。 拍照操作成功將通過successCB返回攝像獲取的視訊檔案路徑。 可通過option設定攝像頭的各種屬性引數。
引數:

  successCB: ( CameraSuccessCallback ) 必選 攝像操作成功的回撥函式
    errorCB: ( CameraErrorCallback ) 可選 拍攝像操作失敗的回撥函式
    option: ( CameraOption ) 必選 攝像頭拍照引數

返回值:
void : 無
平臺支援:

Android - 2.2+ (支援)
iOS - 4.3+ (支援)

示例:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Camera Example</title>
    <script type="text/javascript">
// 擴充套件API載入完畢後呼叫onPlusReady回撥函式 
document.addEventListener( "plusready", onPlusReady, false );
// 擴充套件API載入完畢,現在可以正常呼叫擴充套件API 
function onPlusReady() {
    console.log("plusready");
}
// 攝像
function videoCapture(){
    var cmr = plus.camera.getCamera();
    var res = cmr.supportedVideoResolutions[0];
    var fmt = cmr.supportedVideoFormats[0];
    console.log("Resolution: "+res+", Format: "+fmt);
    cmr.startVideoCapture( function( path ){
            alert( "Capture video success: " + path );  
        },
        function( error ) {
            alert( "Capture video failed: " + error.message );
        },
        {resolution:res,format:fmt}
    );
}
    </script>
    </head>
    <body>
        <button onclick="videoCapture()">攝像</button>
    </body>
</html>

stopVideoCapture

結束攝像操作

cmr.stopVideoCapture();

說明:

開始呼叫攝像頭進行攝像操作後,可在後臺結束攝像操作,與使用者在介面結束操作效果一致。 攝像操作成功將通過startVideoCapture函式中的successCB返回拍照獲取的圖片路徑。 使用者如果沒有進行攝像操作關閉攝像頭頁面則呼叫失敗回撥函式。
引數:

返回值:
void : 無
平臺支援:

Android - ALL (不支援): 暫不支援呼叫此API停止攝像,需要手動操作停止。
iOS - ALL (不支援): 暫不支援呼叫此API停止攝像,需要手動操作停止。

示例:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Camera Example</title>
    <script type="text/javascript">
// 擴充套件API載入完畢後呼叫onPlusReady回撥函式 
document.addEventListener( "plusready", onPlusReady, false );
// 擴充套件API載入完畢,現在可以正常呼叫擴充套件API 
function onPlusReady() {
    console.log("plusready");
}
var cmr=null;
// 攝像
function videoCapture(){
    cmr = plus.camera.getCamera();
    var res = cmr.supportedVideoResolutions[0];
    var fmt = cmr.supportedVideoFormats[0];
    console.log("Resolution: "+res+", Format: "+fmt);
    cmr.startVideoCapture( function( path ){
            alert( "Capture video success: " + path );  
        },
        function( error ) {
            alert( "Capture video failed: " + error.message );
        },
        {resolution:res,format:fmt}
    );
    // 拍攝10s後自動完成 
    setTimeout( stopCapture, 10000 );
}
// 停止攝像
function stopCapture(){
    console.log("stopCapture");
    cmr.stopVideoCapture();
}
    </script>
    </head>
    <body>
        <button onclick="videoCapture()">攝像</button><br/>
        <button onclick="stopCapture()">停止攝像</button>
    </body>
</html>

CameraOption

JSON物件,呼叫攝像頭的引數

interface CameraOption {
    attribute String filename;
    attribute String format;
    attribute String index;
    attribute PopPosition popover;
}

屬性:

filename: (String 型別 )拍照或攝像檔案儲存的路徑

可設定具體檔名(如"_doc/camera/a.jpg");也可只設置路徑,以"/"結尾則表明是路徑(如"_doc/camera/")。如未設定檔名稱或設定的檔名衝突則檔名由程式程式自動生成。
format: (String 型別 )拍照或攝像的檔案格式

可通過Camera物件的supportedImageFormats或supportedVideoFormats獲取,如果設定的引數無效則使用系統預設值。
index: (String 型別 )拍照或攝像預設使用的攝像頭

拍照或攝像介面預設使用的攝像頭編號,1表示主攝像頭,2表示輔攝像頭。
平臺支援
    Android - 2.2+ (不支援): 暫不支援設定攝像頭,忽略此屬性值
    iOS - 4.3+ (支援)
popover: (PopPosition 型別 )拍照或攝像介面彈出指示區域

對於大螢幕裝置如iPad,拍照或攝像介面為彈出視窗,此時可通過此引數設定彈出視窗位置,其為JSON物件,格式如{top:"10px",left:"10px",width:"200px",height:"200px"},預設彈出位置為螢幕居中。
平臺支援
    Android - ALL (不支援): 暫不支援設定攝像頭,忽略此屬性值
    iOS - 5.0+ (支援): 僅iPad裝置支援此屬性,iPhone/iTouch上忽略此屬性值

PopPosition

JSON物件,彈出拍照或攝像介面指示位置
屬性:

top: (String 型別 )指示區域距離容器頂部的距離

彈出拍照或攝像視窗指示區域距離容器頂部的距離,支援畫素值(如"100px")和百分比(如"50%")。
left: (String 型別 )指示區域距離容器左側的距離

彈出拍照或攝像視窗指示區域距離容器左側的距離,支援畫素值(如"100px")和百分比(如"50%")。
width: (String 型別 )指示區域的寬度

彈出拍照或攝像視窗指示區域的寬度,支援畫素值(如"100px")和百分比(如"50%")。
height: (String 型別 )指示區域的高度

彈出拍照或攝像視窗指示區域的高度,支援畫素值(如"100px")和百分比(如"50%")。

CameraSuccessCallback

呼叫攝像頭操作成功回撥

void onSuccess( capturedFile ) {
    // Caputre image/video file code.
}

說明:

呼叫攝像頭操作成功的回撥函式,在拍照或攝像操作成功時呼叫,用於返回圖片或視訊檔案的路徑。
引數:

capturedFile: ( String ) 必選 拍照或攝像操作儲存的檔案路徑

返回值:
void : 無
平臺支援:

Android - 2.2+ (支援)
iOS - 4.3+ (支援)

CameraErrorCallback

攝像頭操作失敗回撥

void onError( error ) {
    // Handle camera error
    var code = error.code; // 錯誤編碼
    var message = error.message; // 錯誤描述資訊
}

引數:

error: ( Exception ) 必選 攝像頭操作的錯誤資訊
可通過error.code(Number型別)獲取錯誤編碼; 可通過error.message(String型別)獲取錯誤描述資訊。 

返回值:
void : 無
平臺支援:

Android - 2.2+ (支援)
iOS - 4.3+ (支援)

相關推薦

no