uni-app集成原生摄像头拍照与视频流图片获取

在uni-app中集成原生摄像头拍照与视频流图片获取，可以通过uni-app提供的API来实现。下面是一个示例代码，展示了如何实现这两个功能。

拍照功能

首先，你需要使用uni.chooseImage方法来调用原生摄像头进行拍照。以下是一个简单的示例：

// 拍照功能
function takePhoto() {
    uni.chooseImage({
        count: 1, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['camera'], // 从相机选择
        success: function (res) {
            const tempFilePaths = res.tempFilePaths;
            console.log('拍照成功，图片路径：', tempFilePaths[0]);
            // 可以在这里将图片路径显示在页面上或进行其他处理
        },
        fail: function (err) {
            console.error('拍照失败：', err);
        }
    });
}

视频流图片获取

对于视频流图片获取，你可以使用uni.createCameraContext来访问摄像头的实时视频流，并截取某一帧作为图片。以下是一个示例：

// 获取视频流图片
let cameraContext;

function initCamera() {
    cameraContext = uni.createCameraContext();
}

function captureImage() {
    cameraContext.takePhoto({
        quality: 'high',
        success: function (res) {
            const tempFilePaths = res.tempImagePath;
            console.log('视频流截图成功，图片路径：', tempFilePaths);
            // 可以在这里将图片路径显示在页面上或进行其他处理
        },
        fail: function (err) {
            console.error('视频流截图失败：', err);
        }
    });
}

// 在页面加载时初始化摄像头
onLoad: function () {
    initCamera();
}

页面布局示例

在页面的.vue文件中，你可以添加按钮来触发上述功能：

<template>
    <view>
        <button @click="takePhoto">拍照</button>
        <button @click="captureImage">视频流截图</button>
        <image v-if="photoPath" :src="photoPath" style="width: 100%; height: auto;"></image>
    </view>
</template>

<script>
export default {
    data() {
        return {
            photoPath: ''
        };
    },
    methods: {
        takePhoto, // 引入拍照功能
        initCamera,
        captureImage, // 引入视频流截图功能
        // 可以在截图成功后将图片路径赋值给photoPath
        captureImage() {
            // 原有代码...
            success: function (res) {
                this.photoPath = res.tempImagePath; // 保存截图路径
            }.bind(this), // 注意这里使用.bind(this)来确保this指向正确
            // 原有代码...
        }
    },
    onLoad() {
        initCamera();
    }
};
</script>

这个示例展示了如何在uni-app中实现拍照和视频流截图的功能。你可以根据实际需求进一步扩展和优化代码。