uniapp 如何调取摄像头并获取视频流

在uniapp中如何调用设备摄像头并实时获取视频流？我尝试使用<camera>组件但只能显示画面，不知道如何通过API获取视频数据流进行进一步处理。需要兼容iOS和Android平台，求具体实现方法和代码示例。

2 回复

使用uniapp的<camera>组件，或调用uni.createCameraContext()创建相机上下文，通过startRecord录制视频获取流。注意在manifest.json中配置摄像头权限。


在 UniApp 中调取摄像头并获取视频流，可以通过 <camera> 组件和 uni.createCameraContext() API 实现。以下是详细步骤和示例代码：

实现步骤

  1. 添加 <camera> 组件：在页面中放置摄像头组件用于显示预览。
  2. 创建摄像头上下文：使用 uni.createCameraContext() 控制摄像头。
  3. 调用摄像头方法：通过上下文对象启动摄像头并获取视频流。

示例代码

<template>
  <view>
    <!-- 摄像头组件 -->
    <camera ref="camera" device-position="back" flash="off" @error="error" style="width: 100%; height: 400px;"></camera>
    <button @tap="startCamera">启动摄像头</button>
    <button @tap="takePhoto">拍照</button>
    <button @tap="stopCamera">停止摄像头</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cameraContext: null
    }
  },
  onReady() {
    // 创建摄像头上下文
    this.cameraContext = uni.createCameraContext(this);
  },
  methods: {
    // 启动摄像头
    startCamera() {
      this.cameraContext.start({
        success: (res) => {
          console.log('摄像头启动成功', res);
        },
        fail: (err) => {
          console.error('摄像头启动失败', err);
        }
      });
    },
    // 拍照获取图片（视频流可通过连续拍照模拟）
    takePhoto() {
      this.cameraContext.takePhoto({
        quality: 'high',
        success: (res) => {
          console.log('拍照成功', res.tempImagePath);
          // 这里可以处理获取到的图片（视频流帧）
        },
        fail: (err) => {
          console.error('拍照失败', err);
        }
      });
    },
    // 停止摄像头
    stopCamera() {
      this.cameraContext.stop({
        success: (res) => {
          console.log('摄像头已停止');
        },
        fail: (err) => {
          console.error('停止摄像头失败', err);
        }
      });
    },
    // 错误处理
    error(e) {
      console.error('摄像头错误:', e.detail);
    }
  }
}
</script>

注意事项

  • 平台差异：部分功能在 H5 端可能受限，建议在 App 端或微信小程序测试。
  • 权限配置：在 App 端需在 manifest.json 中配置摄像头权限：
    "app-plus": {
  "permissions": {
    "camera": {}
  }
}
  • 视频流处理：UniApp 的 <camera> 组件主要支持拍照，若需连续视频流，可通过 takePhoto 循环调用或使用 uni.createLivePusher() 实现实时推流。

以上代码实现了摄像头的基本操作，可根据需求扩展视频流处理逻辑。

回到顶部