html5中呼叫攝像頭拍照

阿新 • • 發佈：2019-01-16

方法：

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中呼叫攝像頭拍照

方法： getCamera: 獲取攝像頭管理物件物件： Camera: 攝像頭物件 CameraOption: JSON物件，呼叫攝像頭的引數 PopPosition: JSON物件，彈出拍照或攝像介面指示位置

Android中呼叫攝像頭拍照儲存，並在相簿中選擇圖片顯示

我的配置是： android手機版本是7.0 android studio是3.1 android平臺是9.0 我的測試都是在真機上進行的。首先來看程式碼： package com.example.sunshunli.cameraalbumtest; import a

HTML5+JavaScript呼叫攝像頭拍照或者攝像

呼叫攝像頭拍照或者攝像有多種方法，之前介紹過兩種：現在我們來看一下第三種方法：用HTML5和javascript來做，瀏覽器支援IE9+。佈局很簡單，就是設定一個"拍照"按鈕的監聽器，呼叫攝像頭video，然後顯示出來畫像（需要使用者許可權）。首先，要允許網頁寬度自動調整，我

呼叫攝像頭和相簿（呼叫攝像頭拍照和從相簿中選擇圖片）

public class MainActivity extends Activity { public static final int TAKE_PHOTO=1; public static final int CROP_PHOTO=0; public static

unity呼叫攝像頭拍照

我的unity呼叫攝像頭拍照因為做的是pc端的，所以不知道手機上效果是怎樣的，據說程式碼是完全相同的。廢話不說，上程式碼，開啟攝像頭程式碼： /// <summary> /// Opens the camera /// </summary&g

js呼叫攝像頭拍照,js呼叫攝像頭線上拍照,js呼叫電腦攝像頭拍照

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>人臉採集</title> <script src="jque

js 呼叫攝像頭拍照

本文主要介紹，js+canvas+video ，呼叫本地攝像頭，實現拍照效果，程式碼如下，供大家參考學習 <!doctype html> <html lang="en"> <he

android8.0中呼叫相機拍照

網址：https://blog.csdn.net/q992767879/article/details/79654733 1. <provider android:name

使用js呼叫攝像頭拍照

使用js呼叫攝像頭拍照在一些瀏覽器裡已經可以使用web api呼叫攝像頭功能了。基於此可以經行拍照攝像功能，網上找了些資料，然後實現了簡單的拍照功能演示地址 bingxl.cn/webrtc.html 程式碼 <!

Android開發之呼叫攝像頭拍照

現在很多應用中都會要求使用者上傳一張圖片來作為頭像，首先我在這接收使用相機拍照和在相簿中選擇圖片。接下來先上效果圖：接下來看程式碼： 1，佈局檔案： <?xml version="1.0" encoding="utf-8"?> <

h5呼叫攝像頭+拍照+上傳圖片-----h5+js+ajax

敬請關注部落格，後期不斷更新優質博文，謝謝專案中需要用到呼叫攝像頭拍照並上傳照片到後臺，特此記錄：如有不足，望廣大同行們批評指出。 1，前端頁面 visitor/touch/touchIndex/list.jsp:前端頁面 <!-- ************

轉載了一個呼叫攝像頭拍照的cordova案例

“ camera物件提供對裝置預設攝像頭應用程式的訪問。方法： camera.getpicture 引數： camerasuccess cameraerror cameraoptions camera.getpicture 選擇使用攝像頭拍照，或從裝置相簿中獲取一張照片。圖片以base64編碼

關於android中呼叫系統拍照，返回圖片是旋轉90度..

由於專案的需要，沒有自定義拍照功能，僅僅呼叫了系統的拍照程式..但是出現了一個問題，就是拍照完成顯示圖片居然是被旋轉的圖片....解決辦法：/** * 獲取圖片的旋轉角度，有些系統把拍照的圖片旋轉了，有的沒有旋轉 */ int degree

android studio呼叫攝像頭拍照及具體步驟演示程式碼

演示程式碼的功能，呼叫攝像頭拍照，成功的話則把照片顯示出來。第一步定義一個按鈕用於呼叫攝像頭拍照，ImageView用於存放顯示拍出的照片。 <Button android:id="@+id/take_photo" android

Aforge.net類庫呼叫攝像頭拍照(C#)

官網下載library 新增引用： AForge.Imaging ——影象處理和過濾器 AForge.Video ——視訊處理類庫 AForge.Controls—— 影象顯示控制元件工具箱新增aforge的元件：新增元件：先載入列出來所有可用攝像頭放到

Qt5.5 呼叫攝像頭拍照

在網上找了攝像頭拍照的demo，自己敲了一遍，並加了註釋，僅作為學習記錄。標頭檔案： #ifndef TEST_CAPTURE_H #define TEST_CAPTURE_H #include <QDialog> #include <QCamera

android呼叫攝像頭拍照並顯示

1. 得到一個button並新增事件，先建立一個檔案，然後用Intent通過 “android.media.action.IMAGE_CAPTURE”，呼叫攝像頭。 File outputImage = new File(Environment.getExternalSto

如何使用HTML5實現利用攝像頭拍照上傳功能

（為便於閱讀，對原文進行了不失原意的適當修改，包括程式碼中一些錯誤的重複，並作了註釋）　　HTML5技術支援WebApp在手機上拍照，顯示在頁面上並上傳到伺服器。這是手機微博應用中常見的功能，當然你也可以在其它型別應用中適當使用此技術。 1、視訊流 HTML5 的 Th

html5中調用攝像頭拍照

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

HTML5呼叫手機攝像頭拍照

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ http://blog.sina.com.cn/s/blog_4ad7c2540101lnak.html HTML5 The Media

html5中呼叫攝像頭拍照

相關推薦