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+ (支持)
html5中調用攝像頭拍照