使用 UniApp 实现摄像头视频流的接入并在页面上显示视频流

UniApp 是一个使用 Vue.js 开发所有前端应用的框架，它支持一次开发，多端部署（包括H5、小程序和APP）。下面我将展示如何使用 UniApp 实现摄像头视频流的接入，并在页面上显示视频流。我还会提供一些使用场景以及代码优化建议。

使用场景

1. 直播应用：用户可以实时分享自己的画面。
2. 在线教育平台：教师可以开启摄像头进行授课。
3. 远程医疗咨询：医生与患者之间通过视频通话进行交流。
4. 安全监控：用户可以查看家中的实时监控画面。

代码实现

我们将使用 navigator.mediaDevices.getUserMedia 方法来获取用户的摄像头权限，并将视频流显示在 <video> 标签中。

1. 创建页面文件 pages/camera/index.vue

<template>
  <view class="container">
    <!-- 视频播放区域 -->
    <video ref="videoElement" autoplay muted playsinline></video>
    <button @click="toggleCamera">切换摄像头</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoStream: null,
      videoFacingMod