Vue实现摄像头视频分屏, 使用flv.js接收rtmp/flv视频流

要在Vue中实现摄像头视频分屏显示，并使用flv.js接收RTMP/FLV视频流，你需要做以下几步：

1. 引入flv.js库。
2. 设置video标签用于显示视频。
3. 使用Vue的生命周期钩子来初始化flv.js并播放视频流。
4. 使用WebRTC获取摄像头视频流，并将其分屏显示。

以下是一个简化的代码示例：

<template>
  <div>
    <video ref="videoEl" controls autoplay></video>
    <video ref="cameraVideoEl" width="320" height="240" autoplay></video>
  </div>
</template>
 
<script>
import flvjs from 'flv.js';
 
export default {
  name: 'VideoStream',
  mounted() {
    this.initVideo();
    this.initCameraVideo();
    this.initFlvPlayer();
  },
  methods: {
    initVideo() {
      if (flvjs.isSupported()) {
        const videoElement = this.$refs.videoEl;
        const flvPlayer = flvjs.createPlayer({
          type: 'flv',
          url: '你的flv视频流地址'
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
      }
    },
    initCameraVideo() {
      const constraints = {
        video: true,
        audio: true
      };
      let videoElement = this.$refs.cameraVideoEl;
      navigator.mediaDevices.getUserMedia(constraints)
        .then(function(stream) {
          videoElement.srcObject = stream;
        })
        .catch(function(err) {
          console.log("getUserMedia error: " + err);
        });
    },
    initFlvPlayer() {
      // 这里可以添加flv.js的相关配置
    }
  }
};
</script>
 
<style>
/* 你的样式代码，比如分屏布局 */
</style>

确保你已经安装了flv.js库，并正确地引入到你的项目中。这个代码示例提供了一个简单的方法来同时显示来自RTMP/FLV视频流和摄像头视频，你可能需要根据你的具体布局和需求来调整样式。