uni.chooseImage 和 uni.chooseVideo

可以使用 uni.chooseImage 和 uni.chooseVideo 拍照/选择图片文件或录像/选择视频文件, 使用方法如下：

uni.chooseImage

  1. uni.chooseImage({
  2.   count: 1,
  3.   sizeType: ['original', 'compressed'],
  4.   sourceType: ['camera', 'album'],
  5.   success: function (res) {
  6.     console.log(JSON.stringify(res.tempFilePaths));
  7.   }
  8. });

uni.chooseVideo

  1. uni.chooseVideo({
  2.   count: 1,
  3.   compressed: true,
  4.   maxDuration: 60,
  5.   sourceType: ['camera', 'album'],
  6.   success: function (res) {
  7.     console.log(JSON.stringify(res.tempFilePaths));
  8.   }
  9. });

选项

  • count Number 选择的最大数量, chooseImage 和 chooseVideo 均支持
  • sizeType Array original 原图，compressed 压缩图，默认二者都有, chooseImage 支持
  • sourceType Array album 从相册选图，camera 使用相机，默认二者都有, chooseImage 支持
  • compressed Boolean 是否压缩所选的视频源文件，默认值为 true，需要压缩, chooseVideo 支持
  • maxDuration Number 拍摄视频最长拍摄时间，单位秒。最长支持 60 秒, chooseVideo 支持

回调

  • success 成功的回调，返回视频文件的临时文件路径
  • fail 失败的回调
  • complete 接口调用结束的回调

通过 plus.camera.getCamera 获取摄像头

以下示例演示通过摄像头进行视频录制并上传到OSS, 先上代码:

  1. <template>
  2. <view class="content">
  3.   <view class="">
  4.     <button type="primary" @click="captureImage">拍照</button>
  5.     <button type="primary" @click="captureVideo">摄像</button>
  6.   </view>
  7.   <view>
  8.     <image v-if="source1" :src="source1"></image>
  9.     <video v-if="source2" :src="source2" controls></video>
  10.   </view>
  11. </view>
  12. </template>
  14. <script>
  15. export default {
  16.   data() {
  17.     return {
  18.       source1: '',
  19.       source2: ''
  20.     }
  21.   },
  22.   methods: {
  23.     captureImage () {
  24.       var cmr = plus.camera.getCamera();
  25.       var res = cmr.supportedImageResolutions[0];
  26.       var fmt = cmr.supportedImageFormats[0];
  27.       console.log("Resolution: "+res+", Format: "+fmt);
  28.       let vm = this
  29.       cmr.captureImage(path => {
  30.           console.log("Capture image success: " + path)
  31.           // 上传的处理...
  32.           // 上传成功后拿到上传后的地址, 并赋值给 this.source1, 不能直接将 this.source1 赋值为 path, 这样的话会拿不到临时文件的路径
  33.         }, error => {
  34.           console.log("Capture image failed: " + error.message)
  35.         }, {
  36.           resolution:res,
  37.           format:fmt
  38.         }
  39.       );
  40.     },
  41.     captureVideo () {
  42.       var cmr = plus.camera.getCamera();
  43.       var res = cmr.supportedVideoResolutions[0];
  44.       var fmt = cmr.supportedVideoFormats[0];
  45.       console.log("Resolution: "+res+", Format: "+fmt);
  46.       cmr.startVideoCapture(path => {
  47.           console.log("Capture video success: " + path)
  48.           // 上传的处理...
  49.           // 上传成功后拿到上传后的地址, 并赋值给 this.source2, 不能直接将 this.source2 赋值为 path, 这样的话会拿不到临时文件的路径
  50.         }, error => {
  51.           console.log("Capture video failed: " + error.message)
  52.         }, {
  53.           resolution:res,
  54.           format:fmt
  55.         }
  56.       );
  57.     }
  58.   }
  59. }
  60. </script>

获取摄像头管理对象

语法格式：

  1. Camera plus.camera.getCamera(index);

通过 getCamera 获取摄像头, 可接收一个参数 index, 用于设置调用哪个摄像头, 1表示主摄像头, 2表示辅摄像头, 默认为1

Camera对象

  1. interface Camera {
  2.     readonly attribute String[] supportedImageResolutions;
  3.     readonly attribute String[] supportedVideoResolutions;
  4.     readonly attribute String[] supportedImageFormats;
  5.     readonly attribute String[] supportedVideoFormats;
  6.     function void captureImage(successCB, errorCB, option);
  7.     function void startVideoCapture(successCB, errorCB, option);
  8.     function void stopVideoCapture();
  9. }

属性：

  • supportedImageResolutions: 字符串数组，摄像头支持的拍照分辨率, 摄像头支持的拍照图片分辨率字符串形式 WIDTH*Height，如 400*800；如果支持任意自定义分辨率则*
  • supportedVideoResolutions: 字符串数组，摄像头支持的摄像分辨率, 摄像头支持的视频分辨率字符串形式为 WIDTH*Height，如 400*800；如果支持任意自定义分辨率则*。
  • supportedImageFormats: 字符串数组，摄像头支持的拍照文件格式, 摄像头支持的图片文件格式字符串形式为文件格式后缀名，如 jpg、png、bmp。
  • supportedVideoFormats: 字符串数组，摄像头支持的摄像文件格式, 摄像头支持的视频文件格式字符串形式为文件格式后缀名，如 3gp、mp4、avi。

方法：

  • captureImage: 进行拍照操作
  • startVideoCapture: 调用摄像头进行摄像操作
  • stopVideoCapture: 结束摄像操作

拍照

通过 captureImage 方法进行拍照操作, 拍照操作成功将通过successCB返回拍照获取的图片路径。 可通过option设置摄像头的各种属性参数。

语法格式：

  1. cmr.captureImage(successCB, errorCB, options);

摄像

通过 startVideoCapture 方法进行摄像操作

语法格式：

  1. cmr.startVideoCapture(successCB, errorCB, option);

停止摄像：

  1. cmr.stopVideoCapture();

回调

  • successCB: (CameraSuccessCallback) 必选 拍摄操作成功的回调函数, 接收一个参数 capturedFile, 为拍摄成功后的文件临时路径
  • errorCB: (CameraErrorCallback) 可选 拍摄操作失败的回调函数, 接收一个参数 error, 为拍摄失败后的错误

:::warning 摄像头资源为独占资源，如果其它程序或页面已经占用摄像头，再次操作则失败。 :::

:::warning capturedFile 只在成功的回调中可以进行操作, 在外部无法获取 :::

选项

  • options: (CameraOptions) 必选 摄像头拍照参数

JSON对象，调用摄像头的参数

  1. interface CameraOptions {
  2.     attribute String filename;
  3.     attribute String format;
  4.     attribute String index;
  5.     attribute Boolean optimize;
  6.     attribute String resolution;
  7.   attribute Number videoMaximumDuration;
  8.   attribute PopPosition popover;
  9. }

选项详解：
filename
文件名称, 可设置具体文件名（如 “_doc/camera/a.jpg”）；也可只设置路径，以”/“结尾则表明是路径

format
文件格式, 可通过Camera对象的supportedImageFormats或supportedVideoFormats获取，如果设置的参数无效则使用系统默认值

index
拍照或摄像界面默认使用的摄像头编号，1表示主摄像头，2表示辅摄像头。

平台支持

  • Android - 2.2+ (不支持): 暂不支持设置默认使用的摄像头，忽略此属性值。打开拍摄界面后可操作切换。
  • iOS - 4.3+ (支持)

optimize
是否优化图片, 自动调整图片的方向，在部分设备上可能出现图片方向不正确的问题，此参数将配置是否自动调整图片方向。 可取值：

  • true - 自动调整图片方向, 默认值
  • false - 不调整

自动调整图片方向将消耗部分系统资源，可能会导致拍照后回调触发时机延迟，将此值设置为false则可避免延迟问题。

平台支持

  • Android - ALL (支持)
  • iOS - ALL (不支持): 忽略此属性。

resolution
拍照或摄像使用的分辨率, 可通过Camera对象的supportedImageResolutions或supportedVideoResolutions获取，如果设置的参数无效则使用系统默认值。

平台支持

  • Android - 2.2+ (不支持): 忽略此属性。
  • iOS - 4.3+ (支持): 设置摄像的分辨率，分辨率越高越清晰，文件也越大。

videoMaximumDuration
Number 类型, 视频长度, 单位为秒（s），小于等于0表示不限定视频长度。 默认值为0（不限定视频长度）。 注意：仅在调用拍摄视频（startVideoCapture）时有效。

平台支持

  • Android - ALL (不支持): 忽略此属性。
  • iOS - ALL (支持)

popover
拍照或摄像界面弹出指示区域, 对于大屏幕设备如iPad，拍照或摄像界面为弹出窗口，此时可通过此参数设置弹出窗口位置，其为JSON对象，格式如 {top:"10px",left:"10px",width:"200px",height:"200px"}，默认弹出位置为屏幕居中。

popover 为 PopPosition 类型, 支持像素值（如”100px”）和百分比（如”50%”）, 属性包括:

  • top: (String 类型) 弹出拍照或摄像窗口指示区域距离容器顶部的距离
  • left: (String 类型) 弹出拍照或摄像窗口指示区域距离容器左侧的距离
  • width: (String 类型) 弹出拍照或摄像窗口指示区域的宽度
  • height: (String 类型) 弹出拍照或摄像窗口指示区域的高度

平台支持

  • Android - ALL (不支持): 忽略此属性值
  • iOS - 5.0+ (支持): 仅iPad设备支持此属性，iPhone/iTouch上忽略此属性值

video 组件

  1. <video src="http://img.cdn.qiniu.dcloud.net.cn/wap2appvsnative.mp4" controls></video>

属性包括：

  • src String 要播放视频的资源地址
  • initial-time Number 指定视频初始播放位置，单位为秒（s）。
  • duration Number 指定视频时长，单位为秒（s）。
  • controls Boolean 默认为true，是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
  • danmu-list Object | Array 弹幕列表
  • danmu-btn Boolean 默认为false，是否显示弹幕按钮，只在初始化时有效，不能动态变更
  • enable-danmu Boolean 默认为false，是否展示弹幕，只在初始化时有效，不能动态变更
  • autoplay Boolean 默认为false，是否自动播放
  • loop Boolean 默认为false，是否循环播放
  • muted Boolean 默认为false，是否静音播放
  • page-gesture Boolean 默认为false，在非全屏模式下，是否开启亮度与音量调节手势
  • direction Number 设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度）
  • show-progress Boolean 默认为true，若不设置，宽度大于240时才会显示
  • show-fullscreen-btn Boolean 默认为true，是否显示全屏按钮
  • show-play-btn Boolean 默认为true，是否显示视频底部控制栏的播放按钮
  • show-center-play-btn Boolean 默认为true，是否显示视频中间的播放按钮
  • enable-progress-gesture Boolean 默认为true，是否开启控制进度的手势
  • objectFit String contain 当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖
  • poster String 视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效

事件包括：

  • play 当开始/继续播放时触发play事件
  • pause 当暂停播放时触发 pause 事件
  • ended 当播放到末尾时触发 ended 事件
  • timeupdate 播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次
  • fullscreenchange 当视频进入和退出全屏是触发，event.detail = {fullScreen, direction}，direction取为 vertical 或 horizontal
  • waiting 视频出现缓冲时触发
  • error 视频播放出错时触发

提示：

  • video 默认宽度 300px、高度 225px，可通过 css 设置宽高。
  • video 组件是原生组件，它的层级是最高的，不能通过 z-index 控制层级。
  • 请勿在 scroll-view、swiper 中使用 video 组件。
  • css 动画对 video 组件无效。

camera 组件

支持程度较小，只有 微信小程序 和 百度小程序 支持，不予考虑

参考资料