html5中拍照camera

方法：

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+ (支持)
时间： 2024-10-14 16:47:48

html5中拍照camera的相关文章

HTML5 Plus 拍照或者相册选择图片上传

利用HTML Plus的Camera.GalleryIO.Storage和Uploader来实现手机APP拍照或者从相册选择图片上传.Camera模块管理设备的摄像头,可用于拍照.摄像操作,通过plus.camera获取摄像头管理对象.Gallery模块管理系统相册,支持从相册中选择图片或视频文件.保存图片或视频文件到相册等功能.通过plus.gallery获取相册管理对象.IO模块管理本地文件系统,用于对文件系统的目录浏览.文件的读取.文件的写入等操作.通过plus.io可获取文件系统管理对象

html5中上传图片

从相册中选择图片上传 function uploadFromAlbum(type) { var dirtype = ""; if ("pick_store_license" == type || "pick_id_pic" == type) { dirtype = "auth"; } if ("pick_store_pic" == type) { dirtype = "store"; }

在Ubuntu手机平台中使用Camera API来录像

在前面的文章"如何在QML中使用camera API来拍照"中,我们介绍了如何使用Camera API来进行拍照.今天我们在这篇文章中来介绍如何使用Camera API来进行录像. 首先,还是和以前一样,我直接把自己的代码贴出来: main.qml import QtQuick 2.0 import Ubuntu.Components 1.1 import QtMultimedia 5.0 /*! \brief MainView with a Label and Button elem

4.html5中超链接和路径

html中超链接都是通过<a>标签实现的,html5也不例外,这里就来探讨一下<a>标签. <a>元素属于文本元素,有一些私有属性或者叫局部属性.那么,相对应的还有通用属性或叫做全局属性,全局属性是的问题我们以后再来探讨. 对于其私有属性有哪些,下面用一个表格进行了整理: 属性名称 说明 href 指定<a>元素所指资源的 URL hreflang 指向的链接资源所使用的语言 media 说明所链接资源用于哪种设备 rel 说明文档与所链接资源的关系类型 t

HTML5中引入的关键特性

新特性 描述 accesskey 定义通过键盘访问元素的快捷键 contenteditable 该特性设置为true时,浏览器应该允许用户编辑元素的内容.不指定变化后的内容如何保存 contextmenu 定义menu元素的DOM id作为定义钙元素特性的上下文菜单 data-X 制定可以包含在标签中的用户定义的元数据,而不必担心这些元数据与当前的特性或者未来的特性冲突.使用这种类型的特性可以避免创建自定义特性或者过载class特性的常见方法 draggable 定义特性时,允许元素与其内容可以

HTML5中判断横屏竖屏

HTML5中判断横屏竖屏 在移动端中我们经常碰到横屏竖屏的问题,那么我们应该如何去判断或者针对横屏.竖屏来写不同的代码呢. 这里有两种方法: 一:CSS判断横屏竖屏 写在同一个CSS中 1 2 3 4 5 6 @media screen and (orientation: portrait) {   /*竖屏 css*/ } @media screen and (orientation: landscape) {   /*横屏 css*/ } 分开写在2个CSS中 竖屏 1 <link rel=

HTML5中的canvas基本概念及绘图

* Canvas(画布) * 基本内容 * 简单来说,HTML5提供的新元素<canvas> * Canvas在HTML页面提供画布的功能 * 在画布中绘制各种图形 * Canvas绘制的图形与HTML页面无关 * 无法通过DOM获取绘制的图形 * 无法为绘制的图形绑定DOM事件 * 只能使用Canvas提供的API * Canvas用途 * 在HTML页面中绘制图表(例如柱状图.饼状图等) * 网页游戏 - Flash技术 * 使用HTML5中的Canvas * 如何使用Canvas * 在

HTML5中的SVG

* SVG * 基本内容 * SVG并不属于HTML5专有内容 * HTML5提供有关SVG原生的内容 * 在HTML5出现之前,就有SVG内容 * SVG,简单来说就是矢量图 * SVG文件的扩展名为".svg" * SVG使用的是XML语法 * 概念 * SVG是一种使用XML技术描述二维图形的语言 * SVG的特点 * SVG绘制图形可以被搜索引擎抓取 * SVG在图片质量不下降的情况下,被放大 * SVG与Canvas的区别 * SVG * 不依赖分辨率 * 支持事件绑定 *

html5 中的 css样式单 的 两种调用方式的区别

在 html5 中 使用 css 样式单的方式 有4种: 1.链接外部样式文件:将样式文件 彻底与 html 文档分离,样式文件需要额外引入,这种情况下 一批样式 可以控制多份文档.对于好多文件都共有的样式单,推荐使用这种方式. 2.导入外部样式文件:此方式与第一种方式类似,但是需要用@import来引入外部样式单.由于某些浏览器(如 internet explorer)会在导入外部样式单时导致闪屏,所以不推荐用这种方式,而是尽量考虑使用第一种方式. 3.使用内部样式定义:这种方式是通过在htm