vue3使用JSWebrtc播放webrtc视频流

### 在 Vue3 中通过 JavaScript 实现 WebRTC 视频流播放

#### 组件模板结构
为了在 Vue3 应用程序中实现 WebRTC 流的播放，HTML 结构应包含用于展示视频流的 `<video>` 元素。

<template>
  <div>
    <!-- 使用 ref 属性关联 DOM 节点 -->
    <video ref="remoteVideo" autoplay playsinline></video>
  </div>
</template>

#### 初始化 Peer Connection 和设置事件监听器
在脚本部分定义 `mounted` 生命周期钩子函数内初始化 RTCPeerConnection 对象，并配置当媒体轨道可用时更新视频源对象的行为。

<script setup>
import { onMounted, ref } from 'vue';

// 创建对 video 元素的引用
const remoteVideo = ref(null);

onMounted(() => {
  let configuration = null;
  const peerConnection = new RTCPeerConnection(configuration);
  
  // 当接收到新的媒体轨道时触发此回调
  peerConnection.ontrack = function(event) {
    if (event.streams.length > 0) {
      remoteVideo.value.srcObject = event.streams[0];
    }
  };
});
</script>

上述代码片段展示了如何利用 Vue 的组合式 API 来操作 DOM 及管理生命周期方法[^1]。需要注意的是，在真实场景下还需要完成 SDP 协商过程、ICE 候选收集等工作以确保两端能够成功建立连接并交换音视频数据[^2]。