更新记录

1.0.8（2026-09-24）

• iOS、Android 新增拍照后图片编辑页，支持四角自由调整裁剪框、图片拖动/缩放、旋转、还原、取消和完成
• 新增 capturePhotoWithOptions(saveToAlbum, enableEdit)，保留旧 capturePhotoAction(saveToAlbum) 方法

1.0.7（2026-09-08）

• 录制新增可设置分辨率、帧率

1.0.6（2026-09-02）

• 优化Android部分手机保存图片会旋转90度

平台兼容性

uni-app(4.81)

uni-app x(4.81)

yt-custom-camera

特别提醒

• 购买本插件前，请先试用，请先试用，请先试用，确认满足需求之后再行购买。虚拟物品一旦购买之后无法退款。
• 如有使用上的疑问、bug，可以进交流群联系作者；
• 请在合法范围内使用，若使用本插件做非法开发，本方概不负责；
• 可扫描右侧二维码安装Android示例demo，体验插件功能
• iOS使用示例demo测试时，要先修改manifest中项目名称后再打包（名称长度尽量短一点），不然会因为名称过长，导致App启动不了。
• 插件需先引入再打自定义基座后使用
• 修改插件原生代码（如 UTS / Kotlin / Swift）后，需重新制作自定义调试基座，热更新通常不生效
• uniapp兼容式组件必须在nvue、uvue中使用才有效

插件主要功能

• 自定义预览窗口大小（iOS、Android）
• 拍照、录制（iOS、Android）
• 拍照后可选图片编辑页：裁剪、拖动、双指缩放、旋转、还原（iOS、Android）
• 可设置录像分辨率并在设备不支持时自动向下降级（iOS、Android）
• 切换摄像头、手电筒切换（iOS、Android）
• 录制时间回调（iOS、Android）
• 点击屏幕对焦（iOS、Android，内置手势，开箱即用）
• 双指捏合缩放（iOS、Android，内置手势，开箱即用）
• 编程式设置焦距 / 缩放倍率（iOS、Android，对外 API）
• 支持uniapp、uniapp-x项目

插件接入

1.点击插件首页”试用“，选择项目导入插件，导入后可在项目根目录下uni_modules文件中查看是否有yt-custom-camera文件夹，有则导入成功。

2.由于uniapp与uniapp-x兼容式插件使用不太一样，本文档将uniapp与uniapp-x的使用分开介绍，使用者可选择对应文档对接。

使用插件

uniapp兼容式组件只能在nvue或者uvue中使用，通过标签引入，可通过css设置预览窗口的大小。

<yt-camera ref="ytcamera" style="width: 750rpx;height: 400rpx;"
            @capturePhotoHandle="capturePhotoHandle" @recordingHandle="recordingHandle"
            @recordingDurationUpdateHandler="recordingDurationUpdateHandler" cameraPosition="back"></yt-camera>

回调说明：uniapp-x项目的回调iOS与Android端有所不同具体请参照示例demo或者完整代码示例

对焦与缩放说明

内置手势（无需调用 API）

以下能力在预览区域默认开启，无需额外配置：

切换前后摄像头后，缩放倍率会自动重置为 1.0。

焦距 / 缩放 API

如需通过代码控制焦距，可使用以下方法（iOS、Android 双端接口一致）：

缩放倍率说明：

• 1.0：默认广角，无数字变焦
• > 1.0：放大（焦距变长，画面更近）
• 实际生效值会自动限制在当前设备支持的 [最小倍率, 最大倍率] 范围内
• 多数设备最小倍率为 1.0；部分多摄机型可能支持 0.5 等超广角倍率

uniapp 调用拍照、录制、切换摄像头、开关手电筒、设置焦距

uniapp开始预览，建议在onReady生命周期中调用：

onReady() {
//兼容iOS--uniapp端需要加延时
    setTimeout(() => {
        this.$refs["ytcamera"].startRunning()
    }, 300)
},
onShow() {
    if (this.$refs["ytcamera"] != null) {
        this.$refs["ytcamera"].startRunning()
    }
},
onHide() {
    if (this.$refs["ytcamera"] != null) {
        this.$refs["ytcamera"].stopRunning()
    }
},

uniapp调用拍照：

//拍照是否保存相册
let saveToAlbum = true;
this.$refs["ytcamera"].capturePhotoAction(saveToAlbum);

uniapp调用拍照并进入图片编辑页：

// 是否把“完成”后的最终图片保存到系统相册
let saveToAlbum = true;
// 是否显示编辑页
let enableEdit = true;
this.$refs["ytcamera"].capturePhotoWithOptions(saveToAlbum, enableEdit);

编辑页支持拖动四个角自由调整裁剪框大小；调整白色裁剪框时不会移动或缩放图片。只有在裁剪框内部单指拖动时才移动图片、双指操作时才缩放图片，并支持左旋转和还原。点击“取消”会丢弃本次照片并回到相机预览，不触发拍照成功回调；点击“完成”会通过原有 capturePhotoHandle 返回编辑后图片的路径，然后回到相机预览。返回预览后可继续拍照或录制。

为确保旧版 uni-app 和 uni-app-x 项目无需修改或重新补参数，原 capturePhotoAction(saveToAlbum) 完整保留；需要编辑页时使用新增的 capturePhotoWithOptions。

uniapp调用录制：

//拍照是否保存相册
//录制视频是否保存相册
let saveToAlbum = true;
//是否录制麦克风音频
let recordAudio = true;
this.$refs["ytcamera"].toggleRecordingAction(saveToAlbum, recordAudio)

uniapp调用录制（指定输出格式）：

toggleRecordingWithOptions 在 toggleRecordingAction 基础上增加第三个参数 outputFormat，用于指定录制视频的输出格式。调用方式与 toggleRecordingAction 相同：首次调用开始录制，再次调用停止录制，结果仍通过 recordingHandle 回调返回。

//录制视频是否保存相册
let saveToAlbum = true;
//是否录制麦克风音频
let recordAudio = true;
//输出格式："mov" 或 "mp4"（不区分大小写）
let outputFormat = "mp4";
this.$refs["ytcamera"].toggleRecordingWithOptions(saveToAlbum, recordAudio, outputFormat)

输出格式说明：

toggleRecordingAction 等价于 iOS 端以默认 mov 格式录制；Android 端始终输出 MP4。

uniapp调用录制（指定分辨率、帧率和输出格式）：

toggleRecordingWithResolution 首次调用开始录制，再次调用停止录制。旧的 toggleRecordingAction 和 toggleRecordingWithOptions 保持兼容，无需修改原有调用代码。

//录制视频是否保存相册
let saveToAlbum = true;
//是否录制麦克风音频
let recordAudio = true;
//请求分辨率："2160p"、"1080p"、"720p"、"480p"
let resolution = "1080p";
//iOS支持 "mov"、"mp4"；Android仅支持 "mp4"
let outputFormat = "mp4";
//目标帧率：0表示系统默认，常用值为30、60
let frameRate = 60;

//第一次调用开始录制，再次调用停止录制
this.$refs["ytcamera"].toggleRecordingWithResolution(
  saveToAlbum,
  recordAudio,
  resolution,
  outputFormat,
  frameRate
)

分辨率降级规则：

• 2160p：依次尝试 2160p → 1080p → 720p → 480p
• 1080p：依次尝试 1080p → 720p → 480p
• 720p：依次尝试 720p → 480p
• 480p：仅尝试 480p
• 降级会综合当前前/后摄像头和同时启用的相机功能进行判断；切换摄像头后会重新选择。
• 使用该新接口录制成功后，recordingHandle 的 detail.resolution 返回最终实际采用的分辨率档位，例如请求 2160p、实际降级到 1080p 时返回 "1080p"。
• 请求帧率时优先保留帧率并向下降低分辨率，例如 1080p60 → 720p60 → 480p60 → 1080p30 → 720p30 → 480p30 → 系统默认帧率。
• recordingHandle 的 detail.frameRate 返回最终选中的帧率；0 表示由系统选择。Android CameraX 1.3 将帧率作为目标值，最终仍可能受到设备和相机用例组合限制。
• frameRate 位于参数列表末尾；如需系统默认帧率，请明确传入 0。
• 同时兼容 4k/uhd、fhd、hd、sd 和 3840x2160/1920x1080/1280x720/640x480 等别名，建议业务统一使用上表中的标准值。

删除本地资源

通过插件导出的 deleteFile 方法删除指定路径的文件。该方法会尝试删除传入路径对应的资源；请确保文件后续不再需要使用。

import { deleteFile } from '@/uni_modules/yt-custom-camera'

// 可传入录制结束回调中的 res.detail.path，或其他需要删除的本地文件绝对路径
const path = '/完整文件路径/video.mp4'

deleteFile({
  path,
  success: (result) => {
    console.log(`删除成功：${result.path}`)
  },
  fail: (error) => {
    console.error(`删除失败：${error.errMsg}`)
  },
  complete: (result) => {
    console.log('删除流程结束', result)
  }
})

删除方法不会限制文件目录，请谨慎传入路径。iOS 和 Android 均受系统沙盒及文件访问权限限制。

uniapp调用切换摄像头：

this.$refs["ytcamera"].switchCameraAction();

uniapp调用开关手电筒：

this.$refs["ytcamera"].toggleTorchAction();

uniapp设置焦距（缩放倍率）：

// 设置 2 倍缩放（带动画）
this.$refs["ytcamera"].setZoomFactorAction(2.0, true);

// 重置为 1.0（无缩放）
this.$refs["ytcamera"].resetZoomFactorAction(true);

uniapp按步进放大 / 缩小焦距（推荐在页面维护当前倍率）：

data() {
  return {
    currentZoom: 1.0
  }
},
methods: {
  // 放大：每次 +0.5，最大 5.0（可按需调整上限）
  zoomIn() {
    this.currentZoom = Math.min(this.currentZoom + 0.5, 5.0);
    this.$refs["ytcamera"].setZoomFactorAction(this.currentZoom, true);
  },
  // 缩小：每次 -0.5，最小 1.0
  zoomOut() {
    this.currentZoom = Math.max(this.currentZoom - 0.5, 1.0);
    this.$refs["ytcamera"].setZoomFactorAction(this.currentZoom, true);
  },
  // 重置
  zoomReset() {
    this.currentZoom = 1.0;
    this.$refs["ytcamera"].resetZoomFactorAction(true);
  }
}

uniapp完整示例

<template>
    <view class="content">
        <yt-camera ref="ytcamera" style="width: 750rpx;position: absolute;top: 0;bottom: 0;left: 0;"
            @capturePhotoHandle="capturePhotoHandle" @recordingHandle="recordingHandle"
            @recordingDurationUpdateHandler="recordingDurationUpdateHandler"></yt-camera>
        <view class="time_view" v-if="isRecording">
            <text class="title">{{recordingTime}}</text>
        </view>
        <view class="btn_bg">
            <view class="btn" @click="switchCameraAction">
                <image src="/static/carema_switch.png" class="img"></image>
            </view>
            <view class="btn" @click="capturePhotoAction">
                <image src="/static/camera_capture.png" class="img"></image>
            </view>
            <view class="btn" @click="toggleTorchAction">
                <image :src="light_on?'/static/light_on.png':'/static/light_off.png'" class="img"></image>
            </view>
            <view class="btn" @click="toggleRecordingAction">
                <image :src="isRecording?'/static/luzhi_on.png':'/static/luzhi_off.png'" class="img"></image>
            </view>
        </view>
        <view class="focal-length">
            <view class="focal-length-item" @click="amplification"><text>放大</text></view>
            <view class="focal-length-item" @click="reduce"><text>缩小</text></view>
            <view class="focal-length-item" @click="reset"><text>重置</text></view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello',
                path: "",
                light_on: false,
                isRecording: false,
                recordingTime: "00:00:00",
                currentZoom: 1.0,
            }
        },
        onLoad() {

        },
        onReady() {
            //兼容iOS--uniapp端需要加延时
            setTimeout(() => {
                this.$refs["ytcamera"].startRunning()
            }, 300)
        },
        onShow() {
            if (this.$refs["ytcamera"] != null) {
                this.$refs["ytcamera"].startRunning()
            }
        },
        onHide() {
            if (this.$refs["ytcamera"] != null) {
                this.$refs["ytcamera"].stopRunning()
            }
        },
        methods: {
            //拍照回调
            capturePhotoHandle(res) {
                let path = `${res.detail.path}`;
                console.log(`拍照回调：${path}`)
            },
            //录制结束回调
            recordingHandle(res) {
                this.isRecording = false;
                let path = `${res.detail.path}`;
                console.log(`录制结束：${path}`)
            },
            //录制时间回调时间格式“00:00:10”
            recordingDurationUpdateHandler(res) {
                let durationString = res.detail.durationString ?? "00:00:00";
                this.recordingTime = `${durationString}`;
            },
            //切换摄像头
            switchCameraAction() {
                this.$refs["ytcamera"].switchCameraAction();
            },
            //开始结束录制
            toggleRecordingAction() {
                if (this.isRecording == false) {
                    this.isRecording = true;
                }
                //录制视频是否保存相册
                let saveToAlbum = true;
                //是否录制麦克风音频
                let recordAudio = true;
                this.$refs["ytcamera"].toggleRecordingAction(saveToAlbum, recordAudio)
            },
            //开关手电筒
            toggleTorchAction() {
                this.$refs["ytcamera"].toggleTorchAction();
                this.light_on = !this.light_on;
            },
            //拍照
            capturePhotoAction() {
                //拍照是否保存相册
                let saveToAlbum = true;
                this.$refs["ytcamera"].capturePhotoAction(saveToAlbum);
            },
            //放大焦距
            amplification() {
                if (this.$refs["ytcamera"] == null) return;
                this.currentZoom = Math.min(this.currentZoom + 0.5, 5.0);
                this.$refs["ytcamera"].setZoomFactorAction(this.currentZoom, true);
            },
            //缩小焦距
            reduce() {
                if (this.$refs["ytcamera"] == null) return;
                this.currentZoom = Math.max(this.currentZoom - 0.5, 1.0);
                this.$refs["ytcamera"].setZoomFactorAction(this.currentZoom, true);
            },
            //重置焦距
            reset() {
                if (this.$refs["ytcamera"] == null) return;
                this.currentZoom = 1.0;
                this.$refs["ytcamera"].resetZoomFactorAction(true);
            }

        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        width: 750rpx;
        flex: 1;
        background-color: antiquewhite;
        position: relative;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }

    .btn_bg {
        width: 750rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 40rpx;
        position: absolute;
        bottom: 40;
        left: 0;
        justify-content: space-around;
    }

    .btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .title {
        font-size: 32rpx;
        color: white;
    }

    .img {
        width: 70rpx;
        height: 70rpx;
    }

    .time_view {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 200rpx;
        padding: 10rpx 0;
        left: 275rpx;
        top: 40rpx;
        background-color: rgba(0, 0, 0, 0.6);
        border-radius: 10rpx;
        position: absolute;
    }

    .focal-length {
        flex-direction: row;
        display: flex;
        position: absolute;
        bottom: 200rpx;
        width: 750rpx;
        left: 0;
        align-items: center;
        justify-content: space-between;
        padding: 0 50rpx;
    }

    .focal-length-item {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12rpx 20rpx;
        border-radius: 5rpx;
        background-color: azure;
    }
</style>

uniapp-x 调用拍照、录制、切换摄像头、开关手电筒、设置焦距

uniapp-x开始预览，建议在onReady生命周期中调用：

onShow() {
 if (this.$refs["ytcamera"] != null) {
    (this.$refs["ytcamera"] as YtCameraElement).startRunning()
}
},
onReady() {
    (this.$refs["ytcamera"] as YtCameraElement).startRunning()
},
onHide() {
    (this.$refs["ytcamera"] as YtCameraElement).stopRunning()
},

uniapp-x调用拍照：

//拍照是否保存相册
let saveToAlbum = true;
(this.$refs["ytcamera"] as YtCameraElement).capturePhotoAction(saveToAlbum);

uniapp-x调用拍照并进入图片编辑页：

let saveToAlbum = true;
let enableEdit = true;
(this.$refs["ytcamera"] as YtCameraElement).capturePhotoWithOptions(saveToAlbum, enableEdit);

取消、还原、完成按钮及回调规则与上方 uniapp 说明一致；完成后仍通过 capturePhotoHandle 返回 detail.path。

uniapp-x调用录制：

//拍照是否保存相册
//录制视频是否保存相册
let saveToAlbum = true;
//是否录制麦克风音频
let recordAudio = true;
(this.$refs["ytcamera"] as YtCameraElement).toggleRecordingAction(saveToAlbum, recordAudio)

uniapp-x调用录制（指定输出格式）：

//录制视频是否保存相册
let saveToAlbum = true;
//是否录制麦克风音频
let recordAudio = true;
//输出格式："mov" 或 "mp4"（不区分大小写）
let outputFormat = "mp4";
(this.$refs["ytcamera"] as YtCameraElement).toggleRecordingWithOptions(saveToAlbum, recordAudio, outputFormat)

输出格式说明：

uniapp-x调用录制（指定分辨率、帧率和输出格式）：

let saveToAlbum = true;
let recordAudio = true;
//可选："2160p"、"1080p"、"720p"、"480p"
let resolution = "1080p";
//iOS支持 "mov"、"mp4"；Android仅支持 "mp4"
let outputFormat = "mp4";
//0表示系统默认；示例请求60fps
let frameRate = 60;

//第一次调用开始录制，再次调用停止录制
(this.$refs["ytcamera"] as YtCameraElement).toggleRecordingWithResolution(
  saveToAlbum,
  recordAudio,
  resolution,
  outputFormat,
  frameRate
)

分辨率和帧率会按可用组合自动降级。录制成功后可通过 recordingHandle 的 res.detail.resolution、res.detail.frameRate 获取最终选中值。帧率参数位于末尾，传 0 表示系统默认。原有 toggleRecordingAction、toggleRecordingWithOptions 调用保持兼容。

uniapp-x调用切换摄像头：

(this.$refs["ytcamera"] as YtCameraElement).switchCameraAction();

uniapp-x调用开关手电筒：

(this.$refs["ytcamera"] as YtCameraElement).toggleTorchAction();

uniapp-x设置焦距（缩放倍率）：

// 设置 2 倍缩放（带动画）
(this.$refs["ytcamera"] as YtCameraElement).setZoomFactorAction(2.0, true);

// 重置为 1.0（无缩放）
(this.$refs["ytcamera"] as YtCameraElement).resetZoomFactorAction(true);

uniapp-x按步进放大 / 缩小焦距（推荐在页面维护当前倍率）：

data() {
  return {
    currentZoom: 1.0
  }
},
methods: {
  zoomIn() {
    this.currentZoom = Math.min(this.currentZoom + 0.5, 5.0);
    (this.$refs["ytcamera"] as YtCameraElement).setZoomFactorAction(this.currentZoom, true);
  },
  zoomOut() {
    this.currentZoom = Math.max(this.currentZoom - 0.5, 1.0);
    (this.$refs["ytcamera"] as YtCameraElement).setZoomFactorAction(this.currentZoom, true);
  },
  zoomReset() {
    this.currentZoom = 1.0;
    (this.$refs["ytcamera"] as YtCameraElement).resetZoomFactorAction(true);
  }
}

uniapp-x完整示例

<template>
    <view class="content">
        <yt-camera ref="ytcamera" style="width: 750rpx;height: 1000rpx;margin-top: 200rpx;" cameraPosition="back"
            @capturePhotoHandle="capturePhotoHandle" @recordingHandle="recordingHandle"
            @recordingDurationUpdateHandler="recordingDurationUpdateHandler"></yt-camera>
        <view class="time_view" v-show="isRecording">
            <text class="title">{{recordingTime}}</text>
        </view>
        <view class="btn_bg">
            <view class="btn" @click="switchCameraAction">
                <image src="/static/camera_switch.png" class="img"></image>
            </view>
            <view class="btn" @click="capturePhotoAction">
                <image src="/static/camera_capture.png" class="img"></image>
            </view>
            <view class="btn" @click="toggleTorchAction">
                <view style="display: flex;align-items: center;justify-content: center;padding: 10rpx;"><text>{{light_on?'关手电筒':'开手电筒'}}</text></view>
            </view>
            <view class="btn" @click="toggleRecordingAction">
                <view style="display: flex;align-items: center;justify-content: center;padding: 10rpx;"><text>{{isRecording?'停止录制':'录制'}}</text></view>
            </view>
        </view>
        <view class="focal-length">
            <view class="focal-length-item" @click="amplification"><text>放大</text></view>
            <view class="focal-length-item" @click="reduce"><text>缩小</text></view>
            <view class="focal-length-item" @click="reset"><text>重置</text></view>
        </view>
        <!-- <image :src="path"
            style="width: 750rpx;height: 300rpx; position: absolute;left: 0;bottom: 150rpx;background-color: aqua;"
            mode="aspectFill"></image> -->
    </view>
</template>

<script>
    export default {
        data() {
            return {
                path: "",
                light_on: false,
                isRecording: false,
                recordingTime: "00:00:00",
                currentZoom: 1.0,
            }
        },
        onLoad() {

        },
        onShow() {
            if (this.$refs["ytcamera"] != null) {
                (this.$refs["ytcamera"] as YtCameraElement).startRunning()
            }
        },
        onReady() {
            (this.$refs["ytcamera"] as YtCameraElement).startRunning()
        },
        onHide() {
            (this.$refs["ytcamera"] as YtCameraElement).stopRunning()
        },
        methods: {
            //拍照回调
            // #ifdef APP-IOS
            capturePhotoHandle(res) {
                console.log(res.detail)
                let status = res.detail.status ?? "1";
                let error = res.detail.msg ?? "";
                let path = res.detail.path ?? "";
                uni.showToast({
                    title: error,
                    icon: status == "0" ? 'success' : 'error'
                })
                if (path != '') {
                    this.path = `file://${path}`;
                }
            },
            recordingHandle(res) {
                console.log(res.detail)
                let status = res.detail.status ?? "1";
                let error = res.detail.msg ?? "";
                let path = res.detail.path ?? "";
                uni.showToast({
                    title: error,
                    icon: status == "0" ? 'success' : 'error'
                })
                this.isRecording = false;
            },
            //视频录制时间回调
            recordingDurationUpdateHandler(res) {
                let durationString = res.detail.durationString ?? "00:00:00";
                this.recordingTime = durationString;
            },
            // #endif
            // #ifdef APP-ANDROID
            capturePhotoHandle(res : Map<string, any>) {
                console.log(res);
                let path = `${res.get("path")}`;
                this.path = path;
            },
            recordingHandle(res : Map<string, any>) {
                this.isRecording = false;
                let path = `${res.get("path")}`;
                console.log(`录制结束：${path}`)
            },
            //视频录制时间回调
            recordingDurationUpdateHandler(res : Map<string, any>) {
                let durationString = res.get("durationString") ?? "00:00:00";
                this.recordingTime = `${durationString}`;
            },
            // #endif
            //视频录制结果回调

            //拍照
            capturePhotoAction() {
                //拍照是否保存相册
                let saveToAlbum = true;
                (this.$refs["ytcamera"] as YtCameraElement).capturePhotoAction(saveToAlbum)
            },
            //开关手电筒
            toggleTorchAction() {
                (this.$refs["ytcamera"] as YtCameraElement).toggleTorchAction()
                this.light_on = !this.light_on;
            },
            //切换摄像头
            switchCameraAction() {
                (this.$refs["ytcamera"] as YtCameraElement).switchCameraAction()
            },
            //开始结束录制
            toggleRecordingAction() {
                if (this.isRecording == false) {
                    this.isRecording = true;
                }
                //录制视频是否保存相册
                let saveToAlbum = true;
                //是否录制麦克风音频
                let recordAudio = true;
                (this.$refs["ytcamera"] as YtCameraElement).toggleRecordingAction(saveToAlbum, recordAudio)
            },
            //放大焦距
            amplification() {
                if ((this.$refs["ytcamera"] as YtCameraElement) == null) return;
                this.currentZoom = Math.min(this.currentZoom + 0.5, 5.0);
                (this.$refs["ytcamera"] as YtCameraElement).setZoomFactorAction(this.currentZoom, true);
            },
            //缩小焦距
            reduce() {
                if ((this.$refs["ytcamera"] as YtCameraElement) == null) return;
                this.currentZoom = Math.max(this.currentZoom - 0.5, 1.0);
                (this.$refs["ytcamera"] as YtCameraElement).setZoomFactorAction(this.currentZoom, true);
            },
            //重置焦距
            reset() {
                if ((this.$refs["ytcamera"] as YtCameraElement) == null) return;
                this.currentZoom = 1.0;
                (this.$refs["ytcamera"] as YtCameraElement).resetZoomFactorAction(true);
            }

        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        width: 750rpx;
        height: 100%;
        background-color: antiquewhite;
        position: relative;
    }

    .btn_bg {
        width: 750rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 40rpx;
        position: absolute;
        bottom: 40;
        left: 0;
        justify-content: space-around;
    }

    .btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .title {
        font-size: 32rpx;
        color: white;
    }

    .img {
        width: 70rpx;
        height: 70rpx;
    }

    .time_view {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 200rpx;
        padding: 10rpx 0;
        left: 275rpx;
        top: 40rpx;
        background-color: rgba(0, 0, 0, 0.6);
        border-radius: 10rpx;
        position: absolute;
    }

    .focal-length {
        flex-direction: row;
        display: flex;
        position: absolute;
        bottom: 200rpx;
        width: 750rpx;
        left: 0;
        align-items: center;
        justify-content: space-between;
        padding: 0 50rpx;
    }

    .focal-length-item {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12rpx 20rpx;
        border-radius: 5rpx;
        background-color: azure;
    }
</style>

更多好用实惠插件

• 高德定位连续定位后台定位保活定位
• 百度汽车摩托车导航插件
• 百度鹰眼轨迹插件支持后台采集、保活
• 百度定位插件、连续定位、保活、坐标系转换、支持双端
• 计步器插件，支持Android、iOS双端
• uts经典蓝牙插件、蓝牙电子秤
• 获取唯一标识、ServiceID、卸载更新不变iOS+Android
• Android经典蓝牙
• 华为ScanKit统一扫码插件支持iOS+Android原生插件
• 【华为扫码】统一扫码插件支持多码连续扫码支持半屏扫码uts插件iOS+Android+HarmonyOS
• 截屏、录屏、防截屏、录屏iOS、Android
• 人脸采集插件 最新百度SDK 离线人脸采集、活体检测
• 页面截长图、截取WebView内容，生成长截图Android+iOS
• 百度OCR识别插件
• Android无预览拍照、录制、静默拍照、静默录制、抓拍插件支持
• uni高德地图功能拓展地图截图
• 科大讯飞离线合成插件支持iOS、android
• iOS保活Android保活鸿蒙保活定位插件系统定位
• 高德定位、猎鹰轨迹插件
• 海康威视综合安防平台视频播放插件
• 支持NFC读写功能检测支持Android iOS HarmonyOS