vue 播放webrtc视频

要在Vue中播放WebRTC视频，需要使用WebRTC API来连接到远程视频源并将视频流渲染到HTML5 video元素中。以下是一个简单的示例，显示如何在Vue中使用WebRTC API播放视频：

1. 在Vue组件中添加一个video元素，用于渲染视频流：

<template>
  <div>
    <video ref="video" autoplay></video>
  </div>
</template>

2. 在Vue组件的mounted生命周期函数中，使用WebRTC API连接到远程视频源，并将视频流渲染到video元素中：

<script>
export default {
  mounted() {
    // 获取video元素
    const video = this.$refs.video;

    // 获取MediaStream
    navigator.mediaDevices.getUserMedia({ video: true, audio: false })
      .then(stream => {
        // 将MediaStream附加到video元素
        video.srcObject = stream;
      })
      .catch(error => {
        console.log('获取视频流失败：', error)
      });
  }
}
</script>

这个例子会使用getUserMedia方法从用户的摄像头中捕获视频流，并将其渲染到video元素中。如果你想连接到远程视频源，你需要使用RTCPeerConnection对象和WebSocket通信来建立连接，并将远程视频流附加到video元素中。