更新记录

1.0.0（2026-03-04）

自定义原生拍照录像插件组件，支持安卓，苹果，鸿蒙以及小程序和web

平台兼容性

uni-app(3.95)

其他

自定义原生拍照录像uts插件组件，支持安卓，苹果，鸿蒙以及小程序和web

简介 xr-camera-view 是一款自定义拍照录像uts插件组件，可自定义预览界面大小，嵌入到任意页面中。

支持设置放缩zoom

支持自定义权限使用说明

有任何问题或疑问以及有需要开发更多的插件请联系作者 QQ号：517480919

使用方法（示例）

在 script 中引入组件

// 引入uts组件 xr-camera-view
<xr-camera-view id="uni-camera" style="width: auto; height: 200px; margin-left: 10px; margin-right: 10px;"></xr-camera-view>

//在<script>中引入
import { XrCameraContextStopRecordResult, XrCameraContextFail, XrCameraContextTakePhotoResult ,createCameraContext, CameraContext, XrCameraContextTakePhotoOptions, XrCameraContextSetZoomOptions, XrCameraContextStartRecordOptions, XrCameraContextStopRecordOptions } from "../../uni_modules/xr-camera-view";
// 调用
<template>
    <view>
        <text class="title">{{title}}</text>
        <xr-camera-view id="uni-camera" style="width: auto; height: 200px; margin-left: 10px; margin-right: 10px;"></xr-camera-view>
        <button style="margin-top: 20px; margin-left: 20px; margin-right: 20px;" @tap="switchCamera">切换摄像头</button>
        <button style="margin-top: 10px; margin-left: 20px; margin-right: 20px;" @tap="takePhoto">拍照</button>
        <button style="margin-top: 10px; margin-left: 20px; margin-right: 20px;" @tap="setZoom">设置缩放级别为3</button>
        <view style="margin-top: 10px; margin-left: 20px; margin-right: 60px; text-align: center;" class="container">
            <button  @tap="getCurrentZoom">获取当前缩放级别</button>
            <text style="text-align: center; margin-left: 20px; margin-top: 10px;">{{zoom}}</text>
        </view>
        <button style="margin-top: 10px; margin-left: 20px; margin-right: 20px;" @tap="startRecord">开始录像</button>
        <button style="margin-top: 10px; margin-left: 20px; margin-right: 20px;" @tap="stopRecord">结束录像</button>
    </view>
</template>

<script>
    import { XrCameraContextStopRecordResult, XrCameraContextFail, XrCameraContextTakePhotoResult ,createCameraContext, CameraContext, XrCameraContextTakePhotoOptions, XrCameraContextSetZoomOptions, XrCameraContextStartRecordOptions, XrCameraContextStopRecordOptions } from "../../uni_modules/xr-camera-view";

    export default {
        data() {
            return {
                title: '拍照组件',
                zoom: 0
            }
        },
        onLoad() {

        },
        methods: {
        //切换摄像头：context.switchCamera("back")     参数：back，后摄像头   front：前摄像头
            switchCamera: function () {
                let context = createCameraContext()
                if (context != null) {
                    context.switchCamera("back")
                }
            } ,
            //拍照
            takePhoto: function () {
                let context = createCameraContext()
                if (context != null) {
                    context.takePhoto({
                        quality: "normal",
                        success: (res: XrCameraContextTakePhotoResult) => {
                        //拍照成功，路径回返回到res里面
                            console.log("拍照成功", res)
                        },
                        fail: (err: XrCameraContextFail) => {
                            console.log("拍照失败", err)
                        },
                        complete: (res: any) => {
                            console.log("拍照完成")
                        }
                    } as XrCameraContextTakePhotoOptions)
                }
            } ,
            //获取当前缩放级别
            getCurrentZoom: function () {
                let context = createCameraContext()
                if (context != null) {
                    this.zoom = context.getCurrentZoom();
                }
            },
            //设置当前缩放级别
            setZoom: function () {
                let context = createCameraContext()
                if (context != null) {
                    context.setZoom({
                        zoom: 3,
                        success: (res: any) => {
                            console.log("设置成功")
                        },
                        fail: (err: any) => {
                            console.log("设置失败")
                        },
                        complete: (res: any) => {
                            console.log("设置完成")
                        }
                    } as XrCameraContextSetZoomOptions);
                }
            },
            //开始录像
            startRecord: function () {
                let context = createCameraContext()
                if (context != null) {
                    context.startRecord({
                        timeoutCallback: (result: any) => {
                            console.log("timeoutCallback" + result)
                        },
                        timeout: 60,
                        success: (result : any) => {
                            console.log("开始录像成功" + result)
                        },
                        fail: (error : XrCameraContextFail) => {
                            console.log("开始录像失败" + error)
                        },
                        complete: (res: any) => {
                            console.log("开始录像完成")
                        }
                    } as XrCameraContextStartRecordOptions);
                }
            },
            //结束录像
            stopRecord: function () {
                let context = createCameraContext()
                if (context != null) {
                    context.stopRecord({
                        success: (res: XrCameraContextStopRecordResult) => {
                        //录像成功，mp4视频地址回返回在res里面
                            console.log("结束录像成功", res)
                        },
                        fail: (err: XrCameraContextFail) => {
                            console.log("结束录像失败", err)
                        },
                        complete: (res: any) => {
                            console.log("结束录像完成")
                        }
                    } as XrCameraContextStopRecordOptions);
                }
            },
        }
    }

</script>

<style>
    .logo {
        height: 100px;
        width: 100px;
        margin: 100px auto 25px auto;
    }

    .title {
        font-size: 18px;
        color: #8f8f94;
    text-align: center;
    }

    .container {
        flex-flow: row;
        justify-content: flex-start;
        display: flex;
    }

</style>