txCameraRecord

论坛示例

为帮助用户更好更快的使用插件,论坛维护了一个示例,示例中包含示例代码供您参考。

概述

短视频 UGSV 简介

短视频 ( User Generated Short Video,UGSV ),基于腾讯云强大的上传、存储、转码、分发的云点播能力,提供集成了采集、剪辑、拼接、特效、分享、播放等功能的客户端 SDK,并整合腾讯的 IM、社交、用户画像数据以及最顶尖的 AI 人脸识别和图像检测技术,帮助用户聚焦业务本身,快速轻松实现基于移动端的短视频应用。

txCameraRecord 插件概述

本插件封装了腾讯短视频SDK中的录制、编辑、美颜、特效等功能。

##注意: 插件从1.1.0版本开始需要和 UIListView 插件一起使用来处理音乐列表加载逻辑,使用的是开源UIListView插件版本,UIListView插件开源地址:https://github.com/apicloudcom/UIListView

固件要求

Android:4.1及以上 iOS:8.0及以上

插件接口

setLicence

设置授权

setLicence({params}, callback(ret, err))

params

ugcLicenceUrl:

ugcKey:

callback(ret, err)

ret:

  • 类型:JSON对象
  • 内部字段:
{
    status: true,   //布尔型;true||false
}

err:

  • 类型:JSON对象
  • 内部字段:
{
    msg: "",
}

示例代码

var demo = api.require('txCameraRecord');
demo.setLicence({
    ugcLicenceUrl : 'http://license.vod2.myqcloud.com/license/v1/TXUgcSDK.licence',
    ugcKey : '0a8ee791929052b2dce775c308e'
},function(ret, err){
    alert(JSON.stringify(ret) +" "+ JSON.stringify(err));
});

可用性

iOS、Android系统

可提供的1.0.0及更高版本

getLicenceInfo

获取授权信息

setLicence(callback(ret))

callback(ret)

ret:

  • 类型:JSON对象
  • 内部字段:
{
    status: true,   //布尔型;true
    licence : '',  //sdk返回的授权信息字符串
}

示例代码

var demo = api.require('txCameraRecord');
demo.getLicenceInfo(function(ret, err){
    api.alert({msg: JSON.stringify(ret)});
});

可用性

iOS、Android系统

可提供的1.0.0及更高版本

startVideoRecordActivity

短视频录制

startVideoRecordActivity({params}, callback(ret))

params

aspectRatio:

  • 类型:数字型
  • 描述:(可选项)录制视频比例 (0 > 1:1 1 > 4:3 2 > 16:9)。
  • 默认值:0

recordResolution:

  • 类型:数字型
  • 描述:(可选项)录制分辨率 (0 > 360_640 1 > 540_960 2 > 720_1280)。
  • 默认值:0

biteRate:

  • 类型:数字型
  • 描述:(可选项)码率 (范围:600-4800)。
  • 默认值:2400

fps:

  • 类型:数字型
  • 描述:(可选项)帧率 (范围:15-30)。
  • 默认值:20

gop:

  • 类型:数字型
  • 描述:(可选项)关键帧间隔 (范围:1-10)。
  • 默认值:3

logo:

  • 类型:字符串
  • 描述:(可选项)视频尾部水印logo(支持fs:// widget://路径)。

minDuration:

  • 类型:数字型
  • 描述:(可选项)视频最短时长(秒)。
  • 默认值:5

maxDuration:

  • 类型:数字型
  • 描述:(可选项)视频最长时间(秒)。
  • 默认值:60

isFront:

  • 类型:布尔型
  • 描述:(可选项)是否前置摄像头 (true 前置 fasle 后置)
  • 默认值:true

isBeauty:

  • 类型:布尔型
  • 描述:(可选项)是否显示美颜按钮 (true 显示 false 隐藏)
  • 默认值:true

isMusic:

  • 类型:布尔型
  • 描述:(可选项)是否显示音乐按钮 (true 显示 false 隐藏)
  • 默认值:false

isCustomMusic:

  • 类型:布尔型
  • 描述:(可选项)是否自定义音乐 (true 显示插件自带音乐列表 false 点击音乐按钮返回事件并关闭录制界面**[使用该模式缺点:编辑视频时无法选择音乐]**)
  • 默认值:false

musicPath:

  • 类型:字符串
  • 描述:(可选项)录制时播放音乐,(支持fs:// widget://路径,安卓不支持widget路径)【备注:安卓设置音乐时会覆盖麦克风的语音】

isUploadPic:

  • 类型:布尔型
  • 描述:(可选项)下载按钮对应图片是否显示上传图片样式 (true 显示上传按钮样式 false 显示下载按钮样式)
  • 默认值:false

data:

  • 类型:数组
  • 描述:音乐列表的数据源,
  • 内部字段:
[{
    imgPath: '',            //(可选项)字符串类型;列表项的配图路径,支持http://、https://、widget://、fs://等协议,网络图片会被缓存到本地,若不传则标题和子标题靠最左侧显示
    title: '',              //(可选项)字符串类型;标题,若不传或为空则 subTitle 上下位置居中显示
    subTitle: '',           //(可选项)字符串类型;子标题,若不传或为空则 title 上下位置居中显示
    remark: '',             //(可选项)字符串类型;右边备注文字
    icon: '',               //(可选项)字符串类型;右侧备注的图标路径(本地路径,支持fs://、widget://)
    forbidden: false,       //(可选项)布尔类型;是否屏蔽本条数据的点击事件和侧滑露出按钮功能,屏蔽后的样式可通过 styles->forbidden参数配置
    filePath: ''           //(必填项)字符串类型;在线音乐URL地址,(可支持fs://)
}]

styles:

  • 类型:JSON 对象
  • 描述:(可选项)插件各部分的样式
  • 内部字段:
{
    borderColor: '#696969',             //(可选项)字符串类型;列表分割线的颜色,支持 rgb、rgba、#;默认:'#696969'
    item: {                             //(可选项)JSON对象;列表项的样式
        bgColor: '#AFEEEE',             //(可选项)字符串类型;列表项的背景色,支持 rgb、rgba、#;默认:'#AFEEEE'
        activeBgColor: '#F5F5F5',       //(可选项)字符串类型;列表项按下时的背景色,支持 rgb、rgba、#;默认:'#F5F5F5'
        height: 55,                     //(可选项)数字类型;列表项的高度;默认:55
        imgWidth: 40,                   //(可选项)数字类型;列表项配图的宽度;默认:列表项的高度减去10px
        imgHeight: 40,                  //(可选项)数字类型;列表项配图的高度;默认:列表项的高度减去10px
        imgCorner: 4,                   //(可选项)数字类型;列表项配图的圆角大小;默认:0
        placeholderImg: '',             //(可选项)字符串类型;列表项配图的占位图路径(本地路径,fs://、widget://),默认:YonBuilder移动开发 图标
        titleSize: 12,                  //(可选项)数字类型;列表项标题文字大小;默认:12
        titleColor: '#000',             //(可选项)字符串类型;列表项标题文字颜色,支持 rgb,rgba,#;默认:'#000000'
        subTitleSize: 12,               //(可选项)数字类型;列表项子标题文字大小;默认:12
        subTitleColor: '#000',          //(可选项)字符串类型:列表项子标题文字颜色,支持 rgb、rgba、#;默认:'#000000' 
        remarkColor: '#000',            //(可选项)字符串类型;备注的文字颜色,支持 rgb、rgba、#;默认:'#000000'
        remarkSize: 16,                 //(可选项)数字类型;备注的文字大小;默认:16
        remarkIconWidth: 30              //(可选项)数字类型;当备注是图片时,图片的宽度,图片为正方形;默认:30
    },
    forbidden: {                        //(可选项)JSON对象;屏蔽点击事件的列表项的样式配置
        bgColor: '#B0C4DE',             //(可选项)字符串类型;列表项背景色,支持rgb、#、rgba;默认:#C0C0C0
        titleColor: '800000',           //(可选项)字符串类型;列表项标题色,支持rgb、#、rgba;默认:#808080
        subTitleColor: '#696969',       //(可选项)字符串类型;列表项子标题色,支持rgb、#、rgba;默认:#808080
        remarkColor: '#FFDEAD',         //(可选项)字符串类型;列表项备注色,支持rgb、#、rgba;默认:#808080
        sideslip: false                 //(可选项)布尔类型;是否只屏蔽侧滑;默认:false(侧滑和点击事件都屏蔽)
    }
}

refreshHeader:

  • 类型:JSON 对象
  • 描述:(可选项)下拉刷新样式
  • 内部字段:
{
    loadingImg: '', //(可选项) 字符串 下拉刷新时显示的小箭头图标的本地路径,要求本地路径(fs://、widget://)
    bgColor: '', //(可选项) 字符串 下拉刷新区域的背景色,支持 rgb、rgba、# 默认值:'#f5f5f5'
    textColor:'',//(可选项)字符串 提示文字颜色,支持 rgb、rgba、# 默认值:'#8e8e8e'
    textDown:'',//(可选项)字符串 下拉提示文字 默认值:下拉可以刷新...
    textUp:'',//(可选项)字符串 松开提示文字 默认值:松开开始刷新...
    loadingText: '',//(可选项)字符串 提示文字 默认值:正在加载...
    lastUpdateText: '',//(可选项)字符串 提示文字  默认值:上次更新时间:
    showTime:'',//(可选项)布尔值 是否显示刷新时间  默认值:true
}

refreshFooter:

  • 类型:JSON 对象
  • 描述:(可选项)上拉加载更多样式
  • 内部字段:
{
    loadingImg:'',//(可选项)字符串 上拉加载时显示的小箭头图标的本地路径,要求本地路径(fs://、widget://)
    bgColor:'',//(可选项)字符串 上拉加载区域的背景色,支持 rgb、rgba、#  默认值:'#f5f5f5'
    textColor:'',//(可选项)字符串 提示文字颜色,支持 rgb、rgba、# 默认值:'#8e8e8e'
    textUp:'',//(可选项)字符串 上拉提示文字 默认值:'上拉加载更多...'
    textDown:'',//(可选项)字符串 松开提示文字  默认值:'松开开始加载...'
    loadingText: '',//(可选项)字符串 提示文字 默认值:正在加载...
    lastUpdateText: '',//(可选项)字符串 提示文字  默认值:上次更新时间: 
    showTime:'',//(可选项)布尔值 是否显示刷新时间  默认值:true
}

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    status: true,      //布尔型;true
    evenType : 'musicBtn', //isCustomMusic 为false时点击音乐按钮事件返回
    data : {
        filePath : '' ,
        imagePath : '',
        duration : 0,
    }
}

示例代码

var demo = api.require('txCameraRecord');
demo.startVideoRecordActivity({
    aspectRatio : 2,
    recordResolution : 1,
    biteRate : 3000,
    fps : 25,
    gop : 5,
    logo : 'widget://image/tcloud_logo.png',
    minDuration : 5,
    maxDuration : 10,
    isFront : true,
    isBeauty : true,
    musicPath : 'widget://res/Athena.mp3',
    //一下是音乐列表设置
    isMusic: true, //是否显示音乐按钮 true 显示 false 隐藏 默认 false
    isCustomMusic: true, //是否自定义音乐 true 显示 false 隐藏 默认 false
    data: [{
        imgPath: 'http://img1.3lian.com/gif/more/11/201206/a5194ba8c27b17def4a7c5495aba5e32.jpg',
        title: 'bandari(在线测试)',
        subTitle: 'bandari',
        //remark: '新备注',
        //icon: '',
        filePath: 'http://7z2dc9.com1.z0.glb.clouddn.com/apicloud/be59ba6f9527382d655abc50f720871e.mp3',
    }],
    rightBtns: [{
        bgColor: '#388e8e',
        activeBgColor: '',
        width: 70,
        title: '选取',
        titleSize: 12,
        titleColor: '#fff',
        icon: '',
        iconWidth: 20
    }],
    styles: {
        borderColor: '#696969',
        item: {
            bgColor: '#FFFFFF',
            activeBgColor: '#F5F5F5',
            height: 80.0,
            imgWidth: 60,
            imgHeight: 60,
            imgCorner: 4,
            placeholderImg: 'widget://image/musiclist_img_item_music_bg.png',
        }
    },
    refreshHeader: {
        loadingImg: 'widget://res/UIListView_arrow.png',
        bgColor: '#F5F5F5',
        textColor: '#8E8E8E',
        textDown: '下拉可以刷新...',
        textUp: '松开开始刷新...',
        showTime: true
    },
    refreshFooter: {
        loadingImg: 'widget://res/UIListView_arrow.png',
        bgColor: '#F5F5F5',
        textColor: '#8E8E8E',
        textUp: '上拉加载更多...',
        textDown: '松开开始加载...',
        showTime: true
    }
}, function(ret, err) {
    api.alert({msg: JSON.stringify(ret)});
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

musicListEventListener

音乐列表事件监听

musicListEventListener(callback(ret))

callback(ret)

ret:

  • 类型:JSON对象
  • 内部字段:
{
    status: true,   //布尔型;true
    eventType: 'show',  //字符串类型;交互事件类型
                        //取值范围如下:
                        //show(插件加载成功)
                        //refreshHead(下拉刷新事件)
                        //refreshFooter(上啦加载事件)
                        //clickImg(点击列表项的配图)
                        //clickRemark(点击列表项右侧备注)
                        //clickContent(点击列表项的内容,除了配图和备注以外的区域,处罚这个事件时会自动播放音乐,同时下载本音乐到本地,以供录制视频使用)
    index: 0,           //数字类型;列表项的索引
}

示例代码

var demo = api.require('txCameraRecord');
demo.musicListEventListener(function(ret, err){
    if (ret.eventType == 'show') {
            
    } else if (ret.eventType == 'refreshHead') {
            reloadData();
    } else if (ret.eventType == 'refreshFooter') {
            appendData();
    }
});

可用性

iOS、Android系统

可提供的1.0.0及更高版本

reloadData

刷新音乐列表数据

reloadData({params}, callback(ret))

params

data:

  • 类型:数组
  • 描述:(可选项)音乐列表的数据源,若不传或传空,仅收起下拉刷新组件
  • 内部字段:
[{
    imgPath: '',            //(可选项)字符串类型;列表项的配图路径,支持http://、https://、widget://、fs://等协议,网络图片会被缓存到本地,若不传则标题和子标题靠最左侧显示
    title: '',              //(可选项)字符串类型;标题,若不传或为空则 subTitle 上下位置居中显示
    subTitle: '',           //(可选项)字符串类型;子标题,若不传或为空则 title 上下位置居中显示
    remark: '',             //(可选项)字符串类型;右边备注文字
    icon: '',               //(可选项)字符串类型;右侧备注的图标路径(本地路径,支持fs://、widget://)
    forbidden: false,       //(可选项)布尔类型;是否屏蔽本条数据的点击事件,屏蔽后的样式可通过 open->styles->forbidden参数配置
    filePath: ''           //(必填项)字符串类型;在线音乐URL地址,(可支持fs://)
}]

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    status: true        //布尔型;true||false     
}

示例代码

var demo = api.require('txCameraRecord');
demo.reloadData({
    data: [{
        imgPath: 'http://img1.3lian.com/gif/more/11/201206/a5194ba8c27b17def4a7c5495aba5e32.jpg',
        title: '新标题',
        subTitle: '新子标题',
        remark: '新备注',
        icon: '',
        filePath: 'http://7z2dc9.com1.z0.glb.clouddn.com/apicloud/be59ba6f9527382d655abc50f720871e.mp3',
    }]
}, function(ret) {
    if (ret) {
        api.alert({msg: JSON.stringify(ret)});
    } else {
        api.alert({msg: JSON.stringify(err)});
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

appendData

向音乐列表末端追加数据

appendData({params}, callback(ret))

params

data:

  • 类型:数组对象
  • 描述:音乐列表的数据源,若不传或传空,仅收起上拉加载组件
  • 内部字段:
[{
    imgPath: '',            //(可选项)字符串类型;列表项的附图路径,支持http://、https://、widget://、fs://等协议,网络图片会被缓存到本地,若不传则标题和子标题靠最左侧显示
    title: '',              //(可选项)字符串类型;标题,若不传或为空则 subTitle 上下位置居中显示
    subTitle: '',           //(可选项)字符串类型;子标题,若不传或为空则 title 上下位置居中显示
    remark: '',             //(可选项)字符串类型;右边备注文字
    icon: '',               //(可选项)字符串类型;右侧备注的图标路径(本地路径,支持fs://、widget://)
    forbidden: false,       //(可选项)布尔类型;是否屏蔽本条数据的点击事件,屏蔽后的样式可通过 open->styles->forbidden参数配置
    filePath: ''           //(必填项)字符串类型;在线音乐URL地址,(可支持fs://)
}]

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    status: true        //布尔型;true||false
}

示例代码

var demo = api.require('txCameraRecord');
demo.appendData({
    data: [{
        imgPath: 'http://d.hiphotos.baidu.com/image/pic/item/4d086e061d950a7b29a788c209d162d9f2d3c922.jpg',
        title: '新增标题',
        subTitle: '新增子标题',
        remark: '新增备注',
        filePath: 'http://7z2dc9.com1.z0.glb.clouddn.com/apicloud/be59ba6f9527382d655abc50f720871e.mp3',
    }]
}, function(ret, err) {
    if (ret) {
        api.alert({msg: JSON.stringify(ret)});
    } else {
        api.alert({msg: JSON.stringify(err)});
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

是否仍需要帮助? 请保持联络!
最后更新于 2024/07/31