uni-app【多媒体API】

白茶一清欢

于 2024-05-14 02:42:20 发布

阅读量1.3k

点赞数 9

分类专栏：程序员文章标签： uni-app

本文链接：https://blog.csdn.net/dgayuiafahf/article/details/138828974

版权

程序员专栏收录该内容

179 篇文章

订阅专栏

success 返回参数说明

| 参数 | 类型 | 说明 |

| :-- | :-- | :-- |

| tempFilePaths | Array | 图片的本地文件路径列表 |

| tempFiles | Array、Array | 图片的本地文件列表，每一项是一个 File 对象 |

File 对象结构如下

| 参数 | 类型 | 说明 |

| :-- | :-- | :-- |

| path | String | 本地文件路径 |

| size | Number | 本地文件大小，单位：B |

| name | String | 包含扩展名的文件名称，仅H5支持 |

| type | String | 文件类型，仅H5支持 |

示例

uni.chooseImage({

sizeType: [‘original’, ‘compressed’], //可以指定是原图还是压缩图，默认二者都有

sourceType: [‘album’], //从相册选择

success: function (res) {

console.log(JSON.stringify(res.tempFilePaths));

}

});

uni.previewImage(OBJECT) @unipreviewimageobject

预览图片。

OBJECT 参数说明

| 参数名 | 类型 | 必填 | 说明 | 平台差异说明 |

| :-- | :-- | :-- | :-- | :-- |

current 参数说明

1.9.5+ 支持传图片在 urls 中的索引值

current 为当前显示图片的链接/索引值，不填或填写的值无效则为 urls 的第一张。App平台在 1.9.5至1.9.8之间，current为必填。不填会报错

注意，当 urls 中有重复的图片链接时：

传链接，预览结果始终显示该链接在 urls 中第一次出现的位置。
传索引值，在微信/百度/字节跳动小程序平台，会过滤掉传入的 urls 中该索引值之前与其对应图片链接重复的值。其它平台会保留原始的 urls 不会做去重处理。

举例说明：

一组图片 [A, B1, C, B2, D]，其中 B1 与 B2 的图片链接是一样的。

传 B2 的链接，预览的结果是 B1，前一张是 A，下一张是 C。
传 B2 的索引值 3，预览的结果是 B2，前一张是 C，下一张是 D。此时在微信/百度/字节跳动小程序平台，最终传入的 urls 是 [A, C, B2, D]，过滤掉了与 B2 重复的 B1。

longPressActions 参数说明

| 参数 | 类型 | 必填 | 说明 |

| :-- | :-- | :-- | :-- |

success 返回参数说明

| 参数 | 类型 | 说明 |

| :-- | :-- | :-- |

| index | Number | 用户长按图片的索引值 |

| tapIndex | Number | 用户点击按钮列表的索引值 |

示例

// 从相册选择6张图

uni.chooseImage({

sizeType: [‘original’, ‘compressed’],

sourceType: [‘album’],

success: function(res) {

// 预览图片

uni.previewImage({

urls: res.tempFilePaths,

longPressActions: {

itemList: [‘发送给朋友’, ‘保存图片’, ‘收藏’],

success: function(data) {

console.log(‘选中了第’ + (data.tapIndex + 1) + ‘个按钮,第’ + (data.index + 1) + ‘张图片’);

fail: function(err) {

console.log(err.errMsg);

}

});

}

});

TIPS

在非H5端，previewImage是原生实现的，界面自定义灵活度较低。
插件市场有前端实现的previewImage，性能低于原生实现，但界面可随意定义；插件市场也有适于App端的previewImage原生插件，提供了更多功能。

uni.closePreviewImage(OBJECT)

关闭预览图片。

| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |

| √ (3.2.15+) | √ (3.2.15+) | x | x | x | x | x | x | x |

OBJECT 参数说明

| 参数名 | 类型 | 必填 | 说明 |

| :-- | :-- | :-- | :-- |

uni.getImageInfo(OBJECT)

获取图片信息。

小程序下获取网络图片信息需先配置download域名白名单才能生效。

平台差异说明

| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |

| √ | √ | √ | √ | √ | √ | √ | √ |

OBJECT 参数说明

| 参数名 | 类型 | 必填 | 说明 |

| :-- | :-- | :-- | :-- |

| src | String | 是 | 图片的路径，可以是相对路径，临时文件路径，存储文件路径，网络图片路径 |

success 返回参数说明

| 参数名 | 类型 | 说明 | 平台差异说明 |

| :-- | :-- | :-- | :-- |

orientation 参数说明

| 枚举值 | 说明 |

| :-- | :-- |

| up | 默认 |

| down | 180度旋转 |

| left | 逆时针旋转90度 |

| right | 顺时针旋转90度 |

| up-mirrored | 同up，但水平翻转 |

| down-mirrored | 同down，但水平翻转 |

| left-mirrored | 同left，但垂直翻转 |

| right-mirrored | 同right，但垂直翻转 |

示例

uni.chooseImage({

sourceType: [‘album’],

success: function (res) {

uni.getImageInfo({

src: res.tempFilePaths[0],

success: function (image) {

console.log(image.width);

console.log(image.height);

}

});

}

});

uni.saveImageToPhotosAlbum(OBJECT)

保存图片到系统相册。

平台差异说明

| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |

| √ | x | √ | √ | √ | √ | √ | √ |

OBJECT 参数说明

| 参数名 | 类型 | 必填 | 说明 |

| :-- | :-- | :-- | :-- |

success 返回参数说明

| 参数名 | 类型 | 说明 |

| :-- | :-- | :-- |

| path | String | 保存到相册的图片路径，仅 App 3.0.5+ 支持 |

| errMsg | String | 调用结果 |

注意

可以通过用户授权API来判断用户是否给应用授予相册的访问权限https://uniapp.dcloud.io/api/other/authorize
H5没有API可触发保存到相册行为，下载图片时浏览器会询问图片存放地址。

示例代码：

uni.chooseImage({

sourceType: [‘camera’],

success: function (res) {

uni.saveImageToPhotosAlbum({

filePath: res.tempFilePaths[0],

success: function () {

console.log(‘save success’);

}

});

}

});

uni.compressImage(OBJECT)

压缩图片接口，可选压缩质量

平台差异说明

| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |

| √ | x | √ | √ | √(基础库版本>=3.110.3) | √ | √ | √ |

OBJECT 参数说明

| 属性 | 类型 | 默认值 | 必填 | 说明 | 平台差异说明 |

| :-- | :-- | :-- | :-- | :-- | :-- |

| src | String | | 是 | 图片路径，图片的路径，可以是相对路径、临时文件路径、存储文件路径 | |

| rotate | Number | 0 | 否 | 旋转度数，范围0～360 | App 3.0.0+ |

success 返回参数说明

| 属性 | 类型 | 说明 |

| :-- | :-- | :-- |

| tempFilePath | String | 压缩后图片的临时文件路径 |

示例代码：

uni.compressImage({

src: ‘/static/logo.jpg’,

quality: 80,

success: res => {

console.log(res.tempFilePath)

}

})

文件

uni.chooseFile(OBJECT)

从本地选择文件。

本API主要用于选择非媒体文件，如果选择的文件是媒体文件，另有3个专用API：

平台差异说明

| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |

| x | √(HBuilder X2.9.9+) | x(可使用wx.chooseMessageFile) | x | x | x | x | x |

App端如需选择非媒体文件，可在插件市场搜索文件选择，其中Android端可以使用Native.js，无需原生插件，而iOS端需要原生插件。
App端如果想选择下载到_doc、_downloads、_documents等plus.io控制的目录下的文件，可通过plus.io Api，自己做选择框。
选择文件大多为了上传，uni ui封装了更完善的uni-file-picker组件，文件选择、上传到uniCloud的免费存储和cdn中，一站式集成。强烈推荐使用。

OBJECT 参数说明

| 参数名 | 类型 | 默认值 | 必填 | 说明 | 平台差异说明 |

| :-- | :-- | :-- | :-- | :-- | :-- |

Tips

count 值在 H5 平台的表现，基于浏览器本身的规范。目前测试的结果来看，只能限制单选/多选，并不能限制数量。并且，在实际的手机浏览器很少有能够支持多选的。
sourceType 在H5端对应input的capture属性，设置为['album']无效，依然可以使用相机。
extension暂只支持文件后缀名，例如['.zip','.exe','.js']，不支持application/msword等类似值

注：文件的临时路径，在应用本次启动期间可以正常使用，如需持久保存，需在主动调用 uni.saveFile，在应用下次启动时才能访问得到。

OBJECT.type 的合法值

| 值 | 说明 |

| :-- | :-- |

| all | 从所有文件选择 |

| video | 只能选择视频文件 |

| image | 只能选择图片文件 |

Tips

如果type属性和extension同时存在，例如{type:'image',extension:['.png','.jpg']}，则会选择image/png,image/jpg文件
如果只配置extension属性，例如{extension:['.doc','.xlsx','.docx']}，则会选择.doc,.xlsx,.docx文件，详情见accept属性
在微信环境中，如果type="all"，则extension属性失效

success 返回参数说明

| 参数 | 类型 | 说明 |

| :-- | :-- | :-- |

| tempFilePaths | Array | 文件的本地文件路径列表 |

| tempFiles | Array、Array | 文件的本地文件列表，每一项是一个 File 对象 |

File 对象结构如下

| 参数 | 类型 | 说明 |

| :-- | :-- | :-- |

| path | String | 本地文件路径 |

| size | Number | 本地文件大小，单位：B |

| name | String | 包含扩展名的文件名称，仅H5支持 |

| type | String | 文件类型，仅H5支持 |

示例

uni.chooseFile({

extension:[‘.zip’,‘.doc’],

success: function (res) {

console.log(JSON.stringify(res.tempFilePaths));

}

});

// 选择图片文件

uni.chooseFile({

type: ‘image’,

success (res) {

// tempFilePath可以作为img标签的src属性显示图片

const tempFilePaths = res.tempFiles

}

})

wx.chooseMessageFile(OBJECT)

从微信聊天会话中选择文件。

平台差异说明

| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |

| x | x | √(基础库2.5.0+) | x | x | x | √(基础库1.18.0+) | x |

录音管理

uni.getRecorderManager()

获取全局唯一的录音管理器 recorderManager。

平台差异说明

| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |

| √ | x | √ | x | √ | √ | √ | x |

recorderManager 对象的方法列表

| 方法 | 参数 | 说明 | 平台差异说明 |

| :-- | :-- | :-- | :-- |

start(options) 说明

| 属性 | 类型 | 必填 | 说明 | 平台差异说明 |

| :-- | :-- | :-- | :-- | :-- |

其中，采样率和码率有一定要求，具体有效值如下：

| 采样率 | 编码码率 |

| :-- | :-- |

| 8000 | 16000 ~ 48000 |

| 11025 | 16000 ~ 48000 |

| 12000 | 24000 ~ 64000 |

| 16000 | 24000 ~ 96000 |

| 22050 | 32000 ~ 128000 |

| 24000 | 32000 ~ 128000 |

| 32000 | 48000 ~ 192000 |

| 44100 | 64000 ~ 320000 |

| 48000 | 64000 ~ 320000 |

onStop(callback) 回调结果说明

| 属性 | 类型 | 说明 |

| :-- | :-- | :-- |

| tempFilePath | String | 录音文件的临时路径 |

onFrameRecorded(callback) 回调结果说明

| 属性 | 类型 | 说明 |

| :-- | :-- | :-- |

| frameBuffer | ArrayBuffer | 录音分片结果数据 |

| isLastFrame | Boolean | 当前帧是否正常录音结束前的最后一帧 |

onError(callback) 回调结果说明

| 属性 | 类型 | 说明 |

| :-- | :-- | :-- |

| errMsg | String | 错误信息 |

注意

可以通过用户授权API来判断用户是否给应用授予麦克风的访问权限https://uniapp.dcloud.io/api/other/authorize

示例

<button @tap=“startRecord”>开始录音

<button @tap=“endRecord”>停止录音

<button @tap=“playVoice”>播放录音

const recorderManager = uni.getRecorderManager();

const innerAudioContext = uni.createInnerAudioContext();

innerAudioContext.autoplay = true;

export default {

data() {

return {

text: ‘uni-app’,

voicePath: ‘’

}

onLoad() {

let self = this;

recorderManager.onStop(function (res) {

console.log(‘recorder stop’ + JSON.stringify(res));

self.voicePath = res.tempFilePath;

});

methods: {

startRecord() {

console.log(‘开始录音’);

recorderManager.start();

endRecord() {

console.log(‘录音结束’);

recorderManager.stop();

playVoice() {

console.log(‘播放录音’);

if (this.voicePath) {

innerAudioContext.src = this.voicePath;

innerAudioContext.play();

}

背景音频播放管理

uni.getBackgroundAudioManager()

获取全局唯一的背景音频管理器 backgroundAudioManager。

背景音频，不是游戏的背景音乐，而是类似QQ音乐那样，App在后台时，仍然在播放音乐。如果你不需要在App切后台时继续播放，那么不应该使用本API，而应该使用普通音频APIuni.createInnerAudioContext。

平台差异说明

| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |

| √ | x | √ | x | √ | √ | x | √ | x |

backgroundAudioManager 对象的属性列表

| 属性 | 类型 | 说明 | 只读 |

| :-- | :-- | :-- | :-- |

| src | String | 音频的数据源，默认为空字符串，**当设置了新的 src 时，会自动开始播放，**目前支持的格式有 m4a, aac, mp3, wav | 否 |

backgroundAudioManager 对象的方法列表

| 方法 | 参数 | 说明 |

| :-- | :-- | :-- |

| play | | 播放 |

| pause | | 暂停 |

| stop | | 停止 |

| seek | position | 跳转到指定位置，单位 s |

| onCanplay | callback | 背景音频进入可以播放状态，但不保证后面可以流畅播放 |

| onPlay | callback | 背景音频播放事件 |

| onPause | callback | 背景音频暂停事件 |

| onStop | callback | 背景音频停止事件 |

| onEnded | callback | 背景音频自然播放结束事件 |

| onTimeUpdate | callback | 背景音频播放进度更新事件 |

| onPrev | callback | 用户在系统音乐播放面板点击上一曲事件（iOS only） |

| onNext | callback | 用户在系统音乐播放面板点击下一曲事件（iOS only） |

| onError | callback | 背景音频播放错误事件 |

| onWaiting | callback | 音频加载中事件，当音频因为数据不足，需要停下来加载时会触发 |

errCode 说明

| errCode | 说明 |

| :-- | :-- |

| 10001 | 系统错误 |

| 10002 | 网络错误 |

| 10003 | 文件错误 |

| 10004 | 格式错误 |

| -1 | 未知错误 |

示例

const bgAudioManager = uni.getBackgroundAudioManager();

bgAudioManager.title = ‘致爱丽丝’;

bgAudioManager.singer = ‘暂无’;

bgAudioManager.coverImgUrl = ‘https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png’;

bgAudioManager.src = ‘https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3’;

注意

因为背景音频播放耗费手机电量，所以平台都有管控，需在manifest中填写申请。

ios App平台，背景播放需在manifest.json -> app-plus -> distribute -> ios 节点添加 "UIBackgroundModes":["audio"] 才能保证音乐可以后台播放（打包成ipa生效）
小程序平台，需在manifest.json 对应的小程序节点下，填写"requiredBackgroundModes": [“audio”]。发布小程序时平台会审核
Android App端默认不会在通知栏出现音量控制，如需此功能，需要在插件市场单独下载原生插件，详见

音频组件控制

uni.createInnerAudioContext()

创建并返回内部 audio 上下文 innerAudioContext 对象。

平台差异说明

| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |

| √ | √ | √ | 1.23.4+ | √ | √ | √ | √ |

innerAudioContext 对象的属性列表

| 属性 | 类型 | 说明 | 只读 | 平台差异说明 |

| :-- | :-- | :-- | :-- | :-- |

innerAudioContext 对象的方法列表

| 方法 | 参数 | 说明 | 平台差异说明 |

| :-- | :-- | :-- | :-- |

| pause | | 暂停 | |

| stop | | 停止 | |

errCode 说明

| errCode | 说明 |

| :-- | :-- |

| 10001 | 系统错误 |

| 10002 | 网络错误 |

| 10003 | 文件错误 |

| 10004 | 格式错误 |

| -1 | 未知错误 |

支持格式

| 格式 | iOS | Android |

| :-- | :-- | :-- |

| flac | x | √ |

| m4a | √ | √ |

| ogg | x | √ |

| ape | x | √ |

| amr | x | √ |

| wma | x | √ |

| wav | √ | √ |

| mp3 | √ | √ |

| mp4 | x | √ |

| aac | √ | √ |

| aiff | √ | x |

| caf | √ | x |

示例

const innerAudioContext = uni.createInnerAudioContext();

innerAudioContext.autoplay = true;

innerAudioContext.src = ‘https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3’;

innerAudioContext.onPlay(() => {

console.log(‘开始播放’);

});

innerAudioContext.onError((res) => {

console.log(res.errMsg);

console.log(res.errCode);

});

tips

如需音频的倍速播放，可通过video的倍速播放替代实现。插件市场有封装好的插件音频倍速播放
如果需要带ui的音频播放器样式，可以在插件市场搜索相关插件
Android 4.1 及更高版本对 PCM/WAVE 支持范围是 8 位和 16 位线性 PCM（比特率最高可达到硬件上限）。以 8000、16000 和 44100 Hz 录制原始 PCM 所需的采样率。

视频

uni.chooseVideo(OBJECT)

拍摄视频或从手机相册中选视频，返回视频的临时文件路径。

若选择和上传非图像、视频文件，另行参考：https://uniapp.dcloud.io/api/media/file。

平台差异说明

| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |

| √ | √ | √ | √ | √ | √ | √ | √ |

OBJECT 参数说明

| 参数名 | 类型 | 必填 | 说明 | 平台差异说明 |

| :-- | :-- | :-- | :-- | :-- |

success 返回参数说明

| 参数 | 类型 | 说明 | 平台差异 |

| :-- | :-- | :-- | :-- |

注意：

app安卓端选择的视频最大只支持180MB，如需突破该限制请使用原生插件https://ext.dcloud.net.cn/search?q=%E6%96%87%E4%BB%B6%E9%80%89%E6%8B%A9
文件的临时路径，在应用本次启动期间可以正常使用，如需持久保存，需在主动调用 uni.saveFile，在应用下次启动时才能访问得到。
camera 部分 Android 手机下由于系统 ROM 不支持无法生效，打开拍摄界面后可操作切换
可以通过用户授权API来判断用户是否给应用授予相册或摄像头的访问权限https://uniapp.dcloud.io/api/other/authorize
App下如需进一步压缩视频大小，可以在插件市场搜索视频压缩插件
如需上传到cdn，可使用uniCloud.uploadFile API，uniCloud提供了免费cdn给开发者使用，详见https://uniapp.dcloud.io/uniCloud/storage?id=uploadfile
选择视频大多为了上传，uni ui封装了更完善的uni-file-picker组件，文件选择、上传到uniCloud的免费存储和cdn中，一站式集成。强烈推荐使用。
部分浏览器中无法获取视频信息。

示例

hello

<button @tap=“test”>click me

export default {

data() {

return {

src: ‘’

}

methods: {

test: function () {

var self = this;

uni.chooseVideo({

sourceType: [‘camera’, ‘album’],

success: function (res) {

self.src = res.tempFilePath;

}

});

}

uni.chooseMedia(OBJECT)

拍摄或从手机相册中选择图片或视频。

若选择和上传非图像、视频文件，另行参考：https://uniapp.dcloud.io/api/media/file。

平台差异说明

| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |

| x | x | 2.10.0+ | x | x | x | x | x |

OBJECT 参数说明

| 参数名 | 类型 | 默认值 | 必填 | 说明 |

| :-- | :-- | :-- | :-- | :-- |

OBJECT.mediaType 合法值

| 值 | 说明 |

| :-- | :-- |

| image | 只能拍摄图片或从相册选择图片 |

| video | 只能拍摄视频或从相册选择视频 |

OBJECT.sourceType 合法值

| 值 | 说明 |

| :-- | :-- |

| album | 从相册选择 |

| camera | 使用相机拍摄 |

OBJECT.camera 合法值

| 值 | 说明 |

| :-- | :-- |

| back | 使用后置摄像头 |

| front | 使用前置摄像头 |

success 返回参数说明

| 参数名 | 类型 | 说明 |

| :-- | :-- | :-- |

| tempFiles | Array. | 本地临时文件列表 |

| type | String | 文件类型，有效值有 image 、video |

res.tempFiles 的结构

| 参数名 | 类型 | 说明 |

| :-- | :-- | :-- |

| tempFilePath | String | 本地临时文件路径 (本地路径) |

| size | Number | 本地临时文件大小，单位 B |

| duration | Number | 视频的时间长度 |

| height | Number | 视频的高度 |

| width | Number | 视频的宽度 |

| thumbTempFilePath | String | 视频缩略图临时文件路径 |

示例

uni.chooseMedia({

mediaType: [‘image’,‘video’],

sourceType: [‘album’, ‘camera’],

maxDuration: 30,

camera: ‘back’,

success(res) {

console.log(res.tempFilest)

}

})

Tips

如需上传到cdn，可使用uniCloud.uploadFile API，uniCloud提供了免费cdn给开发者使用，详见https://uniapp.dcloud.io/uniCloud/storage?id=uploadfile
选择文件大多为了上传，uni ui封装了更完善的uni-file-picker组件，文件选择、上传到uniCloud的免费存储和cdn中，一站式集成。强烈推荐使用。
经开发者提醒，微信小程序ios真机可以选择的文件个数不能大于9，详见帖子https://ask.dcloud.net.cn/question/115561

uni.saveVideoToPhotosAlbum(OBJECT)

保存视频到系统相册。

平台差异说明

| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |

| √ | x | √ | √ | √ | √ | √ | √ |

OBJECT 参数说明

| 参数名 | 类型 | 必填 | 说明 |

| :-- | :-- | :-- | :-- |

success 返回参数说明

| 参数名 | 类型 | 说明 |

| :-- | :-- | :-- |

| errMsg | String | 调用结果 |

注意

可以通过用户授权API来判断用户是否给应用授予相册写入权限https://uniapp.dcloud.io/api/other/authorize

示例

hello

<button @tap=“test”>click me

export default {

data() {

return {

src: ‘’

}

methods: {

test: function () {

var self = this;

uni.chooseVideo({

sourceType: [‘camera’],

success: function (res) {

self.src = res.tempFilePath;

uni.saveVideoToPhotosAlbum({

filePath: res.tempFilePath,

success: function () {

console.log(‘save success’);

}

});

}

});

}

uni.getVideoInfo(OBJECT)

获取视频详细信息

平台差异说明

| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |

| 3.1.10+ | 3.1.10+ | 2.11.0+ | x | x | x | x | √ |

OBJECT 参数说明

| 属性 | 类型 | 默认值 | 必填 | 说明 |

| :-: | :-: | :-: | :-: | :-: |

| src | string | - | 是 | 视频文件路径，可以是临时文件路径也可以是永久文件路径（不支持网络地址） |

success 返回参数说明

|参数名 |类型 |说明 |平台差异说明|

|:- |:- |:- ||

res.orientation参数说明

| 值 | 说明 |

| :-- | :-- |

| up | 默认 |

| down | 180度旋转 |

| left | 逆时针旋转90度 |

| right | 顺时针旋转90度 |

| up-mirrored | 同up，但水平翻转 |

| down-mirrored | 同down，但水平翻转 |

| left-mirrored | 同left，但垂直翻转 |

| right-mirrored | 同right，但垂直翻转 |

uni.compressVideo(OBJECT)

压缩视频接口。开发者可指定压缩质量 quality 进行压缩。当需要更精细的控制时，可指定 bitrate、fps、和 resolution，当 quality 传入时，这三个参数将被忽略。原视频的相关信息可通过 getVideoInfo 获取。

平台差异说明

| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |

| 3.1.10+ | x | 2.11.0+ | x | x | x | x | x |

App端有很多插件支持视频压缩，详见插件市场

压缩完毕后如需上传到cdn，可使用uniCloud.uploadFile API，uniCloud提供了免费cdn给开发者使用，详见https://uniapp.dcloud.io/uniCloud/storage?id=uploadfile

OBJECT 参数说明

| 属性 | 类型 | 默认值 | 必填 | 说明 |

| :-: | :-: | :-: | :-: | :-: |

| src | string | | 是 | 视频文件路径，可以是临时文件路径也可以是永久文件路径 |

| fps | number | | 是 | 帧率 |

quality可取值

| 值 | 说明 |

| :-- | :-- |

| low | 低 |

| medium | 中 |

| high | 高 |

success 返回参数说明

| 参数名 | 类型 | 说明 |

| :-- | :-- | :-- |

| tempFilePath | string | 压缩后的临时文件地址 |

| size | string | 压缩后的大小，单位 kB |

uni.openVideoEditor(OBJECT)

打开视频编辑器

平台差异说明

| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |

| x | x | 2.12.0+ | x | x | x | x | x |

OBJECT 参数说明

| 属性 | 类型 | 默认值 | 必填 | 说明 |

| :-: | :-: | :-: | :-: | :-: |

success 返回参数说明

| 参数名 | 类型 | 说明 |

| :-- | :-- | :-- |

| duration | number | 剪辑后生成的视频文件的时长，单位毫秒（ms） |

| size | number | 剪辑后生成的视频文件大小，单位字节数（byte） |

| tempFilePath | string | 编辑后生成的视频文件的临时路径 |

| tempThumbPath | string | 编辑后生成的缩略图文件的临时路径 |

视频组件控制

uni.createVideoContext(videoId, this)

创建并返回 video 上下文 videoContext 对象。在自定义组件下，第二个参数传入组件实例this，以操作组件内 <video> 组件。

平台差异说明

| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |

| √ | √ | √ | 基础库版本>=1.10.0 | √ | √ | √ | √ |

videoContext 对象的方法列表

| 方法 | 参数 | 说明 | 平台差异说明 |

| :-- | :-- | :-- | :-- |

| play | 无 | 播放 | |

| pause | 无 | 暂停 | |

| requestFullScreen | 无 | 进入全屏，可传入{direction}参数，详见 video 组件文档 | H5和字节跳动小程序不支持{direction}参数 |

注意：

app-nvue 平台 2.2.5以下使用本API，需同时设置组件属性id和ref <video id="video1" ref="video1"></video>，或者直接使用 ref，例如 this.$refs.video1，2.2.5+ 支持直接使用 uni.createVideoContext(videoId, this)

示例

<video id=“myVideo” src=“https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/360e4b20-4f4b-11eb-8a36-ebb87efcf8c0.mp4” @error=“videoErrorCallback” :danmu-list=“danmuList”

enable-danmu danmu-btn controls>

弹幕内容

<button @tap=“bindSendDanmu” class=“page-body-button” formType=“submit”>发送弹幕

export default {

data() {

return {

title: ‘video’,

src: ‘’,

inputValue: ‘’,

danmuList: [{

text: ‘第 1s 出现的弹幕’,

color: ‘#ff0000’,

time: 1

{

text: ‘第 3s 出现的弹幕’,

color: ‘#ff00ff’,

time: 3

}

]

}

onReady: function (res) {

this.videoContext = uni.createVideoContext(‘myVideo’)

methods: {

bindInputBlur: function (e) {

this.inputValue = e.target.value

bindButtonTap: function () {

var that = this

uni.chooseVideo({

sourceType: [‘album’, ‘camera’],

maxDuration: 60,

camera: [‘front’, ‘back’],

success: function (res) {

this.src = res.tempFilePath

}

})

bindSendDanmu: function () {

this.videoContext.sendDanmu({

text: this.inputValue,

color: this.getRandomColor()

})

videoErrorCallback: function (e) {

console.log(‘视频错误信息:’)

console.log(e.target.errMsg)

getRandomColor: function () {

const rgb = []

for (let i = 0; i < 3; ++i) {

let color = Math.floor(Math.random() * 256).toString(16)

color = color.length == 1 ? ‘0’ + color : color

rgb.push(color)

}

return ‘#’ + rgb.join(‘’)

}

相机组件控制

uni.createCameraContext()

创建并返回 camera 组件的上下文 cameraContext 对象。

平台差异说明

| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |

| x | x | √ | x | √ | x | √ | √ |

本API为 camera 组件配套的js API，与 camera 组件的平台兼容性相同，可实现非全屏摄像头。App端可通过plus.camera实现全屏摄像头。

cameraContext 对象的方法列表

| 方法 | 参数 | 说明 |

| :-- | :-- | :-- |

| takePhoto | Object | 拍照，可指定质量，成功则返回图片路径。 |

| setZoom | Object | 设置缩放级别 微信小程序 2.10.0+ 支持 |

| startRecord | Object | 开始录像 |

| stopRecord | Object | 结束录像，成功则返回封面与视频。 |

| onCameraFrame | Function | 获取 Camera 实时帧数据。仅微信小程序平台支持，规范详情 |

cameraContext.takePhoto

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
幕’,

color: ‘#ff00ff’,

time: 3

}

]

}

onReady: function (res) {

this.videoContext = uni.createVideoContext(‘myVideo’)

methods: {

bindInputBlur: function (e) {

this.inputValue = e.target.value

bindButtonTap: function () {

var that = this

uni.chooseVideo({

sourceType: [‘album’, ‘camera’],

maxDuration: 60,

camera: [‘front’, ‘back’],

success: function (res) {

this.src = res.tempFilePath

}

})

bindSendDanmu: function () {

this.videoContext.sendDanmu({

text: this.inputValue,

color: this.getRandomColor()

})

videoErrorCallback: function (e) {

console.log(‘视频错误信息:’)

console.log(e.target.errMsg)

getRandomColor: function () {

const rgb = []

for (let i = 0; i < 3; ++i) {

let color = Math.floor(Math.random() * 256).toString(16)

color = color.length == 1 ? ‘0’ + color : color

rgb.push(color)

}

return ‘#’ + rgb.join(‘’)

}

相机组件控制

uni.createCameraContext()

创建并返回 camera 组件的上下文 cameraContext 对象。

平台差异说明

| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |

| x | x | √ | x | √ | x | √ | √ |

本API为 camera 组件配套的js API，与 camera 组件的平台兼容性相同，可实现非全屏摄像头。App端可通过plus.camera实现全屏摄像头。

cameraContext 对象的方法列表

| 方法 | 参数 | 说明 |

| :-- | :-- | :-- |

| takePhoto | Object | 拍照，可指定质量，成功则返回图片路径。 |

| setZoom | Object | 设置缩放级别 微信小程序 2.10.0+ 支持 |

| startRecord | Object | 开始录像 |

| stopRecord | Object | 结束录像，成功则返回封面与视频。 |

| onCameraFrame | Function | 获取 Camera 实时帧数据。仅微信小程序平台支持，规范详情 |

cameraContext.takePhoto

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

[外链图片转存中…(img-e2Jrv68z-1715625728433)]

[外链图片转存中…(img-zvqqSbFB-1715625728434)]

[外链图片转存中…(img-VwXD1r8x-1715625728434)]

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！