vue webrtc

// Vue + WebRTC 示例代码

<template>
  <div>
    <button @click="startCall">Start Call</button>
    <video ref="localVideo" autoplay muted></video>
    <video ref="remoteVideo" autoplay></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      localStream: null,
      peerConnection: null,
      configuration: {
        iceServers: [
          { urls: 'stun:stun.l.google.com:19302' }
        ]
      }
    };
  },
  methods: {
    async startCall() {
      try {
        // 获取本地媒体流
        this.localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
        this.$refs.localVideo.srcObject = this.localStream;

        // 创建 RTCPeerConnection
        this.peerConnection = new RTCPeerConnection(this.configuration);

        // 添加本地流到 RTCPeerConnection
        this.localStream.getTracks().forEach(track => {
          this.peerConnection.addTrack(track, this.localStream);
        });

        // 监听远程流
        this.peerConnection.ontrack = event => {
          if (event.streams && event.streams[0]) {
            this.$refs.remoteVideo.srcObject = event.streams[0];
          }
        };

        // 处理 ICE 候选
        this.peerConnection.onicecandidate = event => {
          if (event.candidate) {
            console.log('ICE candidate:', event.candidate);
          }
        };

        // 创建 offer 并设置本地描述
        const offer = await this.peerConnection.createOffer();
        await this.peerConnection.setLocalDescription(offer);

        // 模拟接收方设置远端描述（实际应用中应通过信令服务器传输）
        setTimeout(async () => {
          await this.peerConnection.setRemoteDescription(new RTCSessionDescription({
            type: 'answer',
            sdp: '...' // 远端的 SDP 答案，实际应用中从信令服务器获取
          }));
        }, 1000);
      } catch (error) {
        console.error('Error starting call:', error);
      }
    }
  }
};
</script>

<style scoped>
video {
  width: 40%;
  margin: 10px;
}
</style>

解释说明：

1. 模板部分 (<template>):

   • 包含两个视频元素 (<video>)，一个用于显示本地视频流，另一个用于显示远程视频流。
   • 一个按钮用于触发 startCall 方法。

2. 脚本部分 (<script>):

   • data() 中定义了 localStream 和 peerConnection 变量，分别用于存储本地媒体流和 WebRTC 对等连接。
   • configuration 定义了 STUN 服务器配置，用于 NAT 穿透。
   • startCall 方法：
     • 使用 navigator.mediaDevices.getUserMedia 获取本地媒体流，并将其绑定到本地视频元素。
     • 创建一个新的 RTCPeerConnection 实例，并添加本地流到连接中。
     • 监听远程流并将其绑定到远程视频元素。
     • 处理 ICE 候选，以便在不同网络环境下建立连接。
     • 创建并设置本地描述（offer），模拟接收方设置远端描述（实际应用中应通过信令服务器传输）。

3. 样式部分 (<style scoped>):

   • 设置视频元素的宽度和外边距，确保布局合理。