html5中調用攝像頭拍照

阿新 • • 發佈：2018-02-13

all phoenix mod 信息 function 平臺 tag 手動 rep

方法：

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+ (支持)

html5中調用攝像頭拍照

all phoenix mod 信息 function 平臺 tag 手動 rep 方法： getCamera: 獲取攝像頭管理對象對象： Ca

html5中調用攝像頭拍照

html5中調用攝像頭拍照

使用html5繪圖技術事項調用攝像頭拍照；

HTML5+Canvas+jQuery調用手機拍照功能實現圖片上傳（二）

Vue2.0 引用 exif.js 實現調用攝像頭進行拍照功能以及圖片上傳功能

在Android中調用USB攝像頭

SqlServer自定義函數Function中調用with as

WebApi接口 - 如何在應用中調用webapi接口

vue組件之間的通信以及如何在父組件中調用子組件的方法和屬性

帶輸出參數的存儲過程的定義，以及在aso.net中調用

python selenium中調用js

Lua中“.”調用方法與“：”調用方法的區別

Titanium中調用ios組件時語言不是本地化的解決方法

ASP.NET MVC做的微信WEBAPP中調用微信JSSDK掃一掃

Intent調用系統拍照程序，返回圖片太小的問題

關於調用攝像頭錄像功能

Lua中調用函數使用點號和冒號的區別

MSScriptControl詳解(可實現在C#等語言中調用JAVASCRIPT代碼)

JavaSE7基礎類中調用靜態成員方法的三種方法

在內容頁中調用母版頁控件、響應控件消息（用戶控件、服務器控件有所不同）

在C++代碼中調用L腳本語言

html5中調用攝像頭拍照

相關推薦