更新记录

1.0.0（2026-02-13）

• 新版发布

平台兼容性

uni-app(4.81)

uni-app x(4.81)

yt-custom-camera

特别提醒

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

插件主要功能

• 自定义预览窗口大小（iOS、Android）
• 拍照、录制（iOS、Android）
• 切换摄像头、手电筒切换（iOS、Android）
• 录制时间回调（iOS、Android）
• 支持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"></yt-camera>

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

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 recordAudio = true;
this.$refs["ytcamera"].toggleRecordingAction(saveToAlbum, recordAudio)

uniapp调用切换摄像头：

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

uniapp调用开关手电筒：

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

uniapp完整示例

<template>
    <view class="content">
        <yt-camera ref="ytcamera" style="width: 750rpx;height: 400rpx;" @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>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello',
                path: "",
                light_on: false,
                isRecording: false,
                recordingTime: "00:00:00",
            }
        },
        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);
            }

        }
    }
</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;
    }
</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 recordAudio = true;
(this.$refs["ytcamera"] as YtCameraElement).toggleRecordingAction(saveToAlbum, recordAudio)

uniapp-x调用切换摄像头：

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

uniapp-x调用开关手电筒：

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

uniapp-x完整示例

<template>
    <view class="content">
        <yt-camera ref="ytcamera" style="width: 750rpx;height: 1000rpx;margin-top: 200rpx;"
            @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/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>
        <!-- <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",
            }
        },
        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)
            }

        }
    }
</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;
    }
</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