videoRecorder

论坛示例

为帮助用户更好更快的使用插件，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。

概述

videoRecorder 插件封装了原生录像机的相关功能，通过本插件的 open 接口可打开摄像头的 frame ，可通过相应参数配置其位置、大小、视频质量、保存路径等信息。开发者可通过 open 一个自定义界面的 frame 覆盖在本插件上来自定义录像界面。

插件功能概览：

0，自定义录像界面

1，开始录像

2，停止录像

3，设置、获取焦距

4，设置、获取闪光灯

5，设置、获取前置后置摄像头转换

6，重新设置镜头聚焦区

7，将录制的视频保存在指定位置

插件示意截图：

插件接口

open

打开录像机

open({params}, callback(ret))

params

rect：

类型：JSON 对象
描述：（可选项）插件的位置及尺寸
内部字段：

{
    x: 0,   //（可选项）数字类型；插件左上角的 x 坐标（相对于所属的 Window 或 Frame）；默认值：0
    y: 0,   //（可选项）数字类型；插件左上角的 y 坐标（相对于所属的 Window 或 Frame）；默认值：0
    w: 80,  //（可选项）数字类型；插件的宽度；若传'auto'，页面从x位置开始自动充满所属的 Window 或 Frame 的宽度；默认：'auto'(Android平台下h要大于等于w，否则预览会拉伸)
    h: 50   //（可选项）数字类型；插件的高度；若传'auto'，页面从y位置开始自动充满所属的 Window 或 Frame 的高度；默认：'auto'(Android平台下h要大于等于w，否则预览会拉伸)
}

size：

类型：JSON 对象
描述：（可选项）录制的视频大小。暂仅支持iOS
内部字段：

{
    w: 320,  //（可选项）数字类型；宽度；默认：rect中的w
    h: 480   //（可选项）数字类型；高度；默认：rect中的h
}

fps:

类型：数字
描述：（可选项）帧率，暂仅支持iOS平台
默认：30

quality:

类型：字符串
描述：（可选项）录像视频质量
默认：medium
取值范围：
- high：超清视频
- low：普通质量视频
- 288p：352*288（CIF）
- 480p：640*480
- 720p：1280*720
- 1080p：1920* 1080
- 2160p：3840* 2160(不支持iPhone6 plus)
- medium：高清视频
- 240p：320*240（QVGA，暂仅支持 Android平台）
- 144p：176*144（QCIF，暂仅支持 Android平台）

orientation:

类型：字符串
描述：（可选项）录制的视频的方向
默认值：portrait
取值范围：
- portrait：竖屏，屏幕在 home 键的上面
- right：右横屏，屏幕在 home 键的右边
- left：左横屏，屏幕在 home 键的左边
- upsideDown：反转竖屏，屏幕在 home 键的下面

saveToAlbum:

类型：布尔
描述：（可选项）录制的视频是否自动保存到系统相册（系统媒体库）
默认值：false

save：

类型：JSON对象
描述：（可选项）录制的视频保存信息配置
内部字段：

{
   path: '',       //（可选项）字符串类型；录制的视频保存的文件夹（文件若不存在则插件自动创建）路径，仅支持 fs:// 协议，若不传则保存在临时文件夹（插件会自动删除该文件）下
   name: '',       //（可选项）字符串类型；录制的视频文件名，不需指定后缀名（插件自动添加），若不传则使用插件默认名：videoRecorder；若该目录下已存在同名文件则覆盖
   composeName: '',       //（可选项）字符串类型；compose接口合成背景音乐的视频文件名，不需指定后缀名（插件自动添加），若不传则使用插件默认名：videoRecorderCompose；若该目录下已存在同名文件则覆盖
   type: ''        //（可选项）字符串类型；保存视频的格式，取值范围如下：
                   //iOS 平台支持的类型
                   //quickTime：后缀名为mov格式的视频文件
                   //mpeg4（默认值）：后缀名为mp4格式的视频文件
                   //appleM4V：后缀名为m4v格式的视频文件
                   //appleM4A：后缀名为m4a格式的视频文件
                   //3gpp：后缀名为3gp格式的视频文件
                   //3gp2：后缀名为3g2格式的视频文件
                   //Android 平台支持的类型
                   //mpeg4（默认值）：后缀名为mp4格式的视频文件
                   //3gpp：后缀名为3gp格式的视频文件
}

camera：

类型：字符串
描述：（可选项）摄像头
默认值：back
取值范围：
- front：前置摄像头
- back：后置摄像头

fixedOn：

类型：字符串类型
描述：（可选项）插件添加到指定 frame 的名字（只指 frame，传 window 无效）
默认：插件依附于当前 window

fixed:

类型：布尔
描述：（可选项）插件是否随所属 window 或 frame 滚动
默认值：true（不随之滚动）

callback(ret)

ret：

类型：JSON 对象
内部字段：

{
   eventType: 'show',       //字符串类型；扫码事件类型
                            //取值范围：
                            //show：打开录像机并显示在屏幕上
                            //finished：录像结束
                            //fail：无访问摄像头或麦克风权限
   filePath: '',            //字符串类型；录像视频文件绝对路径，仅当 eventType 为 finished 时有值
   albumPath: '',            //字符串类型；录像视频文件在系统相册的路径，仅当 eventType 为 finished，且 saveToAlbum 为 true 时有值
   duration: 1000,           //数字类型；录像视频文件的时长，单位：毫秒，仅当eventType 为 finished 时有值。duration字段返回的总时长小于等于0时说明录制的视频是无效文件,前端根据自己需求进行处理。
   size: 1024,              //数字类型；录像视频文件的大小，单位：字节，仅当 eventType 为 finished 时有值
   errMsg:"                 //错误信息提示。仅当 eventType 为 fail 时有值。
   thumbnailPath:''         //字符串类型;录制完成视频的缩略图路径
    
}

示例代码

var videoRecorder = api.require('videoRecorder');
videoRecorder.open({
    rect: {
        x: 0,
        y: 0,
        w: api.frameWidth,
        h: api.frameWidth - 20
    },
    quality: "medium",
    saveToAlbum: false,
    save: {
        path: 'fs://videoRecorder',
        name: 'firstVideo'
    },
    fixedOn: api.frameName,
    fixed: false
}, function(ret) {
    if (ret) {
        api.alert({msg: JSON.stringify(ret)});
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setOrientation

设置摄像头方向，请在调用 start 接口之前调用

注意：

视频录制过程中涉及到两个方向： 1，录制的视频的方向； 2，open打开的视频预览区域的方向；其中1（录制的视频的方向）一般设置成当前设备的方向，开始录制（start）后便不能再改变。2（open打开的视频预览区域的方向）必须跟当前window方向（通过api.setScreenOrientation设置的方向）一致。

setOrientation({params}, callback(ret))

params

target:

类型：字符串
描述：（可选项）设置方向的对象
默认值：reecordedVideo
取值范围：
- preview：设置open接口打开的预览区域的方向（须与当前Windows方向一致）
- reecordedVideo：设置录制的视频的方向（建议与当前设备方向一致）

orientation:

类型：字符串
描述：（可选项）录制的视频的方向
默认值：portrait
取值范围：
- portrait：竖屏，屏幕在 home 键的上面
- right：右横屏，屏幕在 home 键的右边
- left：左横屏，屏幕在 home 键的左边
- upsideDown：反转竖屏，屏幕在 home 键的下面

示例代码

var videoRecorder = api.require('videoRecorder');
videoRecorder.setOrientation({
    orientation: 'right'
    target:''
});

可用性

iOS系统，Android系统

可提供的1.0.5及更高版本

start

开始录像

start({params})

params

timer:

类型：数字
描述：（可选项）视频录制倒计时计时器，单位为秒（s)，亦可通过 stop 接口停止录像
默认值：无限大

save：

类型：JSON对象
描述：（可选项）录制的视频保存信息配置，若本参数不传，则以open 接口内的 save参数为准
内部字段：

{
   path: '',       //（可选项）字符串类型；录制的视频保存的文件夹（文件若不存在则插件自动创建）路径，仅支持 fs:// 协议，若不传则保存在临时文件夹（插件会自动删除该文件）下
   name: '',       //（可选项）字符串类型；录制的视频文件名，不需指定后缀名（插件自动添加），若不传则使用插件默认名：videoRecorder；若该目录下已存在同名文件则覆盖
   type: ''        //（可选项）字符串类型；保存视频的格式，取值范围如下：
                   //iOS 平台支持的类型
                   //quickTime：后缀名为mov格式的视频文件
                   //mpeg4（默认值）：后缀名为mp4格式的视频文件
                   //appleM4V：后缀名为m4v格式的视频文件
                   //appleM4A：后缀名为m4a格式的视频文件
                   //3gpp：后缀名为3gp格式的视频文件
                   //3gp2：后缀名为3g2格式的视频文件
                   //Android 平台支持的类型
                   //mpeg4（默认值）：后缀名为mp4格式的视频文件
                   //3gpp：后缀名为3gp格式的视频文件
}

audioUrl：

类型：字符串
描述：（可选项）视频背景音乐地址，支持widget、fs
说明：传入此参数录制视频时会响起传入音乐，录制完成后需开发者自行调用compose合成，否则视频不会有背景音乐，audioUrl有值isMute自动设置为true

isMute:

类型：布尔
描述：（可选项）是否静音录制
默认：false

示例代码

var videoRecorder = api.require('videoRecorder');
videoRecorder.start({
    timer: 10
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

stop

停止录像

stop({params})

示例代码

var videoRecorder = api.require('videoRecorder');
videoRecorder.stop();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭录像机

close()

示例代码

var videoRecorder = api.require('videoRecorder');
videoRecorder.close();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示已隐藏的录像机

show()

示例代码

var videoRecorder = api.require('videoRecorder');
videoRecorder.show();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏录像机，并没有从内存里清除

hide()

示例代码

var videoRecorder = api.require('videoRecorder');
videoRecorder.hide();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setRect

重设拍摄区域的大小和位置

setRect({params})

params

rect：

类型：JSON 对象
描述：（可选项）重设插件的位置及尺寸
内部字段：

{
    x: 0,   //（可选项）数字类型；插件左上角的 x 坐标（相对于所属的 Window 或 Frame）；默认值：原值
    y: 0,   //（可选项）数字类型；插件左上角的 y 坐标（相对于所属的 Window 或 Frame）；默认值：原值
    w: 80,  //（可选项）数字类型；插件的宽度；默认：原值
    h: 50   //（可选项）数字类型；插件的高度；默认：原值
}

示例代码

var videoRecorder = api.require('videoRecorder');
videoRecorder.setRect({
    rect: {
        x: 10,
        y: 64,
        w: 300,
        h: 300
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

getZoom

获取录像机当前缩放数值

getZoom(callback(ret))

callback(ret)

ret：

类型：JSON 对象
内部字段：

{
    status: true,        //布尔型；是否获取成功
     zoom:               //数字类型；当前录像机的焦距
}

示例代码

var videoRecorder = api.require('videoRecorder');
videoRecorder.getZoom(function(ret) {
    if (ret.status) {
        api.alert({msg: JSON.stringify(ret)});
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setZoom

设置视图大小，若为 2 则表示远视图被放大一倍

setZoom({params})

params

zoom：

类型：数字类型
描述：（可选项）设置的焦距大小（视图被放大的倍数），取值范围：大于 1.0
默认：1.0

示例代码

var videoRecorder = api.require('videoRecorder');
videoRecorder.setZoom({
    zoom: 0
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

getFlashlight

获取当前闪关灯状态

getFlashlight(callback(ret))

callback(ret)

ret：

类型：JSON 对象
内部字段：

{
    status: true,            //布尔型；是否获取成功
     flashlight: 'off'        //字符串类型；当前录像机的闪光灯状态，取值范围如下：
                              //on：打开
                              //off：关闭
                              //auto：自动
}

示例代码

var videoRecorder = api.require('videoRecorder');
videoRecorder.getFlashlight(function(ret) {
    if (ret.status) {
        api.alert({msg: JSON.stringify(ret)});
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setFlashlight

设置闪关灯，在 iOS 平台上，前置摄像头打开时不支持操作闪光灯

setFlashlight({params})

params

flashlight：

类型：字符串
描述：（可选项）闪光灯类型
默认值：off
取值范围：
- on：打开闪光灯
- off：关闭闪关灯
- auto：根据当前设备所处环境的光线强度自动打开关闭闪光灯

示例代码

var videoRecorder = api.require('videoRecorder');
videoRecorder.setFlashlight({
    flashlight: 'on'
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

getCamera

获取当前占用的摄像头

getCamera(callback(ret))

callback(ret)

ret：

类型：JSON 对象
内部字段：

{
    status: true,            //布尔型；是否获取成功
     camera: 'front'          //字符串类型；当前录像机的占用的摄像头，取值范围如下：
                              //front：前置摄像头
                              //back：后置摄像头
                              //unspecified：未启用
}

示例代码

var videoRecorder = api.require('videoRecorder');
videoRecorder.getCamera(function(ret) {
    if (ret.status) {
        api.alert({msg: JSON.stringify(ret)});
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setCamera

设置前置/后置摄像头

setCamera({params})

params

camera：

类型：字符串
描述：（可选项）摄像头
默认值：back
取值范围：
- front：前置摄像头
- back：后置摄像头

animation：

类型：布尔
描述：（可选项）切换摄像头时是否带动画效果，本参数暂仅支持iOS平台
默认值：false

示例代码

var videoRecorder = api.require('videoRecorder');
videoRecorder.setCamera({
    camera: 'back'
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setFocusMode

设置当前录像机对焦模式，配合 setFocusRegion 接口使用

setFocusMode({params})

params

focusMode：

类型：字符串
描述：（可选项）对焦模式
默认值：continue
取值范围：
- auto：自动对焦
- continue：连续自动对焦
- locked：锁定对焦

示例代码

var videoRecorder = api.require('videoRecorder');
videoRecorder.setFocusMode({
    focusMode: 'auto'
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setFocusRegion

设置当前录像机对焦区域，需要跟 setFocusMode 接口同时使用。

若 setFocusBox 接口内 autoHide 参数为非 0 数字，则显示的聚焦提示框会在 autoHide 毫秒后自动隐藏。

若 setFocusBox 接口内 animation 参数为 true，则显示/隐藏聚焦提示框时会有动画。

setFocusRegion({params})

params

region：

类型：JSON对象
描述：（可选项）焦点坐标（在录像区域内的坐标，原点在该区域左上角，往右为x轴，下为y轴）
注意：从1.1.3开始，android中w和h参数作废
默认值：原焦点坐标
内部字段：

{
     x: 20,    //数字类型；聚焦区域中点 x 坐标
     y: 20,    //数字类型；聚焦区域中点 y 坐标
     w: 60,    //数字类型；聚焦区域的宽，在 iOS 平台上忽略此参数（系统自动设置）
     h: 60     //数字类型；聚焦区域的高，在 iOS 平台上忽略此参数（系统自动设置）
}

示例代码

var videoRecorder = api.require('videoRecorder');
videoRecorder.setFocusRegion({
    region: {
        x: 20,
        y: 20,
        w: 60,
        h: 60
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setFocusBox

设置当前录像机对焦提示框样式

注意：只需在需要修改对焦框样式的时候设置一次即可，不必在click事件里每次都设置

setFocusBox({params})

params

box：

类型：字符串
描述：（可选项）对焦提示框样式配置，该提示框是一个空心的正方形框。当调用setFocusRegion接口时，如果 animation 参数为 true，该提示框的显示与隐藏会有动画。
动画过程：
- 1，在焦点位置显示一个大提示框（提示框大小见内部字段 maxSize）
- 2，将此提示框缩小（提示框大小见内部字段 minSize），此缩小动画持续时长为 300 毫秒
- 3，持续一段时间（时长见 autoHide 字段）后隐藏该提示框
- 4，显示渐变淡出该提示框的动画（动画持续时长 100 毫秒），隐藏提示框
默认值：见内部字段
内部字段：

{
    width: 2.0,      //（可选项）数字类型；提示框边框粗细，icon参数有值时本参数无效；默认：2.0
    color: '#ADFF2F',//（可选项）字符串类型；提示框边框颜色，icon参数有值时本参数无效，支持rgb、rgba、#；默认：#ADFF2F
    maxSize: 80.0,   //（可选项）数字类型；提示框放大时的边长；默认：80.0
    minSize: 60.0    //（可选项）数字类型；提示框缩小时的边长；默认：60.0
}

icon:

类型：字符串
描述：（可选项）自定义的提示框图标路径，要求本地路径（支持fs://、widget://协议），图标大小为：80*80
默认：若不传该参数则显示 box 默认提示框，若传该参数使用该参数指向的图标。焦点改变时，该提示框的动画效果同 box 定义的一致

autoHide:

类型：数字
描述：（可选项）设置对焦提示框自动隐藏时间，当为 -1 时，不自动隐藏，需调用 hideFocusBox 接口手动隐藏
默认值：0

animation:

类型：布尔类型
描述：（可选项）设置对焦提示框显示和隐藏时是否使用动画
默认值：true

示例代码

var videoRecorder = api.require('videoRecorder');
videoRecorder.setFocusBox({
    box: {
        width: 1,
        color: '#ff0',
        maxSize: 100,
        minSize: 60
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hideFocusBox

隐藏对焦提示框

hideFocusBox({params})

示例代码

var videoRecorder = api.require('videoRecorder');
videoRecorder.hideFocusBox();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

addEventListener

事件监听

addEventListener({params}, callback(ret))

params

name：

类型：字符串
描述：监听的事件类型
取值范围： - click：单击摄像区域事件 - doubleClick：双击摄像区域事件

callback(ret)

ret：

类型：JSON 对象
内部字段：

{
    x: 100,      //数字类型；触发点的 x 坐标
    y: 100       //数字类型；触发点的 y 坐标
}

示例代码

var videoRecorder = api.require('videoRecorder');
videoRecorder.addEventListener({
    name: 'click'
}, function(ret) {
    if (ret) {
        api.alert({msg: JSON.stringify(ret)});
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

startCallback

开始录像后的监听，此接口只适用于android；

startCallback(callback(ret))

callback(ret)

ret：

类型：JSON 对象
内部字段：

{
    status: true,      //布尔类型；录像是否在进行
}

示例代码

var videoRecorder = api.require('videoRecorder');
videoRecorder.startCallback(function(ret) {
    if (ret) {
        api.alert({msg: JSON.stringify(ret)});
    }
});

可用性

Android系统

可提供的1.0.5及更高版本

takePhoto

拍照

takePhoto({params}, callback(ret))

params

album:

类型：布尔
描述：（可选项）照片是否保存到相册，需要申请相关权限
默认值：false

path：

类型：字符串
描述：（可选项）拍照保存地址，需要写明后缀名jpg，如：fs://abc.jpg

quality:

类型：数值
描述：（可选项）照片质量，取值 0-1.0
默认值：1.0

callback(ret)

ret：

类型：JSON 对象
内部字段：

{
   status: true,       //布尔类型；是否拍照并保存成功（保存到相册或保存到指定路径都视为保存成功）
   path: '',            //字符串类型；拍摄照片存在本地的绝对路径	
}

示例代码

var videoRecorder = api.require('videoRecorder');
videoRecorder.takePhoto({
    album: false,
   path: 'fs://videoRecorder'
}, function(ret) {
    if (ret.status) {
        api.alert({msg: JSON.stringify(ret)});
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

videoShot

对录制视频截图，本接口暂仅支持iOS端

videoShot({params}, callback(ret))

params

album:

类型：布尔
描述：（可选项）照片是否保存到相册，需要申请相关权限
默认值：false

path：

类型：字符串
描述：（可选项）拍照保存地址，需要写明后缀名jpg，如：fs://abc.jpg

callback(ret)

ret：

类型：JSON 对象
内部字段：

{
   status: true,       //布尔类型；是否截图并保存成功（保存到相册或保存到指定路径都视为保存成功）
   path: '',            //字符串类型；拍摄截图存在本地的绝对路径	
}

示例代码

var videoRecorder = api.require('videoRecorder');
videoRecorder.videoShot({
    album: false,
   path: 'fs://videoRecorder'
}, function(ret) {
    if (ret.status) {
        api.alert({msg: JSON.stringify(ret)});
    }
});

可用性

iOS系统

可提供的1.0.0及更高版本

getDeviceOrientation

获取当前设备方向

callback(ret)

ret：

类型：JSON 对象
内部字段：

{
     orientation: 'unknown'   //字符串类型；当前设备方向，取值范围如下：
                              //unknown：未知
                              //portrait：竖直，home键在下面
                              //portraitUpsideDown：竖直，home键在上面
                              //left：水平，home键在右边
                              //right：水平，home键在左边
                              //faceUp：平放，屏幕朝上，iOS端暂不支持
                              //faceDown：平放，屏幕朝下，iOS端暂不支持
}

示例代码

var videoRecorder = api.require('videoRecorder');
videoRecorder.getDeviceOrientation(function(ret) {
    api.alert({msg: JSON.stringify(ret)});
});

可用性

iOS系统，Android系统

可提供的1.0.6及更高版本

compose

视频音频合成，本接口仅支持iOS端

compose({params}, callback(ret))

params

videoUrl：

类型：字符串
描述：（可选项）视频路径，支持widget、fs

audioUrl：

类型：字符串
描述：（可选项）视频背景音乐地址，支持widget、fs

callback(ret)

ret：

类型：JSON 对象
内部字段：

{
   status: true,       //布尔类型；是否成功
   path: '',           //字符串类型；视频存在本地的绝对路径	
}

示例代码

var videoRecorder = api.require('videoRecorder');
videoRecorder.compose({
   videoUrl:'',
   audioUrl: 'fs://videoRecorder'
}, function(ret) {
    if (ret.status) {
        api.alert({msg: JSON.stringify(ret)});
    }
});

可用性

iOS系统

可提供的1.1.7及更高版本

论坛示例

为帮助用户更好更快的使用插件，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。

是否仍需要帮助？请保持联络！

最后更新于 2024/07/22