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中调用摄像头拍照的更多相关文章

【MediaKit】WPF项目中调用摄像头拍照的开发包
今天遇到一个人事的项目,项目中需要调用摄像头给员工照相.如何解决这个问题呢? 介绍一个开发包给你,MediaKit.论坛里头的人都说好,但是黑兔觉得大家好才是真的好.你不妨试试~ 第一步:添加WPF ...
android: 调用摄像头拍照
很多应用程序都可能会使用到调用摄像头拍照的功能,比如说程序里需要上传一张图片作为用户的头像,这时打开摄像头拍张照是最简单快捷的.下面就让我们通过一个例子来学习一下,如何才能在应用程序里调用手机的摄 ...
android ——调用摄像头拍照和相册
先在布局文件中加入两个按钮和一个图片控件 <?xml version="1.0" encoding="utf-8"?> <LinearLayo ...
C# - VS2019调用AForge库实现调用摄像头拍照功能
前言作为一名资深Delphi7程序员,想要实现摄像头扫描一维码/二维码功能,发现所有免费的第三方库都没有简便的实现办法,通用的OpenCV或者ZXing库基本上只支持XE以上的版本,而且一维码的识别 ...
Java乔晓松-android中调用系统拍照功能并显示拍照的图片
android中调用系统拍照功能并显示拍照的图片如果你是拍照完,利用onActivityResult获取data数据,把data数据转换成Bitmap数据,这样获取到的图片,是拍照的照片的缩略图代 ...
AForge调用摄像头拍照时设置分辨率
简单记录下AForge2.2.5.0版本调用摄像头拍照时设置分辨率的方法. FilterInfo info = _videoDevices[0];//获取第一个摄像头 _cameraDevice = ...
vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
进入正题 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div> &l ...
使用html5绘图技术事项调用摄像头拍照；
在mui框架中调用手机摄像头进行拍照可以直接使用原声的HTML5: 以下是HTML代码 <video id="video" width="640" hei ...
Cordova - 使用Cordova开发iOS应用实战4（调用摄像头拍照，并编辑）
使用Cordova可以很方便的通过js代码来使用设备摄像头拍照,只需把camera插件添加进来即可. 一,添加camera插件首先我们要在“终端”中进入工程所在的目录,然后运行如下命令: 1 cor ...

随机推荐

《AndroidStudio每日一贴》3.高速切换代码风格、配色方案和键盘
<AndroidStudio每日一贴>3.高速切换代码风格.配色方案和键盘高速切换代码风格.配色方案和键盘,使用快捷键: control + ~ 很多其它有用技巧请查看<Andro ...
Java之旅--Web.xml解析
Windows的IIS,是用UI界面进行网站的配置.Linux以下的差点儿全部系统,都是使用配置文件来进行配置,Java容器(JBoss/Tomcat/Jetty/WebSphere/WebLogic ...
centos6配置固定ip地址（选择桥接模式）
1.配置ifcfg-eth0 vim /etc/sysconfig/network-scripts/ifcfg-eth0 首先把BOOTPROTO="dhcp"改成BOOTPROT ...
WEBSERVICE之JDK开发webservice
转自:https://www.cnblogs.com/w-essay/p/7357262.html 一.开发工具与环境 1. jdk1.6版本以上(jdk1.6.0_21及以上版本) 2 .eclip ...
18.QT消息链筛选机制以及组合键
mainwindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> 5 #include <Q ...
4.QList
#include "mainwindow.h" #include <QApplication> #include <QLabel> #include < ...
crawler4j多线程爬虫统计分析数据
该事例演示了如何在多线程中统计和分析数据: 首先建一个状态实体类CrawlStat: package com.demo.collectingData; /** * 爬虫状态实体类统计爬虫信息 * @ ...
比较不错的spring学习博客
http://blog.csdn.net/tangl_99/article/details/1176141
Maven 学习笔记（一）
定义 Maven 是基于项目对象模型(POM)的软件项目管理工具,它采用纯 java 编写,用于管理项目的构建,最早在 Jakata Turbine 项目中开始被使用.它包含了一个项目对象模型(Pro ...
ROS常用知识指南
前言:介绍一些基础常用的知识. 一.标准单位二.坐标表现方式三.默认安装位置通过apt-get安装的软件包, 默认安装位置为:/opt/ros/kinetic/share 四.软件包安装流程 4 ...

html5中调用摄像头拍照

html5中调用摄像头拍照的更多相关文章

随机推荐

热门专题