// 獲取本地音視頻流
const getLocalStream = async () => {
  const stream = await navigator.mediaDevices.getUserMedia({ // 獲取音視頻流
    audio: true,
    video: true
  })
  localVideo.value!.srcObject = stream
  localVideo.value!.play()
  return stream
}

const peer = new RTCPeerConnection({
  // iceServers: [
  //   { url: "stun:stun.l.google.com:19302" }, // 谷歌的公共服務(wù)
  //   {
  //     urls: "turn:***",
  //     credential: "***",
  //     username: "***",
  //   },
  // ],
});

npm create vite@latest webrtc-client -- --template vue-ts

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

@tailwind base;
@tailwind components;
@tailwind utilities;

<script lang="ts" setup>
import { ref } from 'vue'
const called = ref<boolean>(false) // 是否是接收方
const caller = ref<boolean>(false) // 是否是發(fā)起方
const calling = ref<boolean>(false) // 呼叫中
const communicating = ref<boolean>(false) // 視頻通話中
const localVideo = ref<HTMLVideoElement>() // video標(biāo)簽實(shí)例，播放本人的視頻
const remoteVideo = ref<HTMLVideoElement>() // video標(biāo)簽實(shí)例，播放對(duì)方的視頻
// 發(fā)起方發(fā)起視頻請(qǐng)求
const callRemote = () => {
  console.log('發(fā)起視頻');
}
// 接收方同意視頻請(qǐng)求
const acceptCall = () => {
  console.log('同意視頻邀請(qǐng)');
}
// 掛斷視頻
const hangUp = () => {
  console.log('掛斷視頻');
}
</script>
<template>
  <div class="flex items-center flex-col text-center p-12 h-screen">
    <div class="relative h-full mb-4">
      <video
        ref="localVideo" 
        class="w-96 h-full bg-gray-200 mb-4 object-cover"
      ></video>
      <video
        ref="remoteVideo"
        class="w-32 h-48 absolute bottom-0 right-0 object-cover"
      ></video>
      <div v-if="caller && calling" class="absolute top-2/3 left-36 flex flex-col items-center">
        <p class="mb-4 text-white">等待對(duì)方接聽(tīng)...</p>
        <img @click="hangUp" src="/refuse.svg" class="w-16 cursor-pointer" alt="">
      </div>
      <div v-if="called && calling" class="absolute top-2/3 left-32 flex flex-col items-center">
        <p class="mb-4 text-white">收到視頻邀請(qǐng)...</p>
        <div class="flex">
          <img @click="hangUp" src="/refuse.svg" class="w-16 cursor-pointer mr-4" alt="">
          <img @click="acceptCall" src="/accept.svg" class="w-16 cursor-pointer" alt="">
        </div>
      </div>
    </div>
    <div class="flex gap-2 mb-4">
      <button 
        class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white" 
        @click="callRemote"
      >發(fā)起視頻</button>
      <button 
        class="rounded-md bg-red-600 px-4 py-2 text-sm font-semibold text-white" 
        @click="hangUp"
      >掛斷視頻</button>
    </div>
  </div>
</template>

npm install socket.io nodemon

const socket = require('socket.io');
const http = require('http');
const server = http.createServer()
const io = socket(server, {
  cors: {
    origin: '*' // 配置跨域
  }
});
io.on('connection', sock => {
  console.log('連接成功...')
  // 向客戶端發(fā)送連接成功的消息
  sock.emit('connectionSuccess');
})
server.listen(3000, () => {
  console.log('服務(wù)器啟動(dòng)成功');
});

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "nodemon index.js"
},

<script setup lang="ts">
  // App.vue
  import { ref, onMounted, onUnmounted } from 'vue'
	import { io, Socket } from "socket.io-client";
  // ...
  const socket = ref<Socket>() // Socket實(shí)例
  onMounted(() => {
    const sock = io('localhost:3000'); // 對(duì)應(yīng)服務(wù)的端口
    // 連接成功
    sock.on('connectionSuccess', () => {
      console.log('連接成功')
    });
    socket.value = sock;
  })
  // ...
</script>

// 前端代碼
const roomId = '001'
sock.on('connectionSuccess', () => {
  console.log('連接服務(wù)器成功...');
  sock.emit('joinRoom', roomId) // 前端發(fā)送加入房間事件
})
// 服務(wù)端代碼
sock.on('joinRoom', (roomId) => {
  sock.join(roomId) // 加入房間
})

// 發(fā)起方發(fā)起視頻請(qǐng)求
const callRemote = async () => {
  console.log('發(fā)起視頻');
  caller.value = true;
  calling.value = true;
  await getLocalStream()
	// 向信令服務(wù)器發(fā)送發(fā)起請(qǐng)求的事件
  socket.value?.emit('callRemote', roomId)
}

// 接收方同意視頻請(qǐng)求
const acceptCall = () => {
  console.log('同意視頻邀請(qǐng)');
  socket.value?.emit('acceptCall', roomId)
}

// 創(chuàng)建RTCPeerConnection
peer.value = new RTCPeerConnection()
// 添加本地音視頻流
peer.value.addStream(localStream.value)
// 生成offer
const offer = await peer.value.createOffer({
  offerToReceiveAudio: 1,
  offerToReceiveVideo: 1
})
console.log('offer', offer);
// 設(shè)置本地描述的offer
await peer.value.setLocalDescription(offer);
// 通過(guò)信令服務(wù)器將offer發(fā)送給用戶B
socket.value?.emit('sendOffer', { offer, roomId })

sock.on('sendOffer', (offer) => {
  if (called.value) { // 判斷接收方
    console.log('收到offer', offer);
  }
})

// 創(chuàng)建RTCPeerConnection
peer.value = new RTCPeerConnection()
// 添加本地音視頻流
peer.value.addStream(localStream.value)
// 生成offer
const offer = await peer.value.createOffer({
  offerToReceiveAudio: 1,
  offerToReceiveVideo: 1
})
console.log('offer', offer);
// 設(shè)置本地描述的offer
await peer.value.setLocalDescription(offer);
// 通過(guò)信令服務(wù)器將offer發(fā)送給用戶B
socket.value?.emit('sendOffer', { offer, roomId })

sock.on('sendAnswer', (answer) => {
  if (caller.value) { // 判斷是否是發(fā)送方
    // 設(shè)置遠(yuǎn)端answer信息
    peer.value.setRemoteDescription(answer);
  }
})

// 通過(guò)監(jiān)聽(tīng)onicecandidate事件獲取candidate信息
peer.value.onicecandidate = (event: any) => {
  if (event.candidate) {
    console.log('用戶A獲取candidate信息', event.candidate);
    // 通過(guò)信令服務(wù)器發(fā)送candidate信息給用戶B
    socket.value?.emit('sendCandidate', {
      roomId,
      candidate: event.candidate
    })
  }
}

// 添加candidate信息
sock.on('sendCandidate', async (candidate) => {
  await peer.value.addIceCandidate(candidate);
})

peer.value.onicecandidate = (event: any) => {
  if (event.candidate) {
    console.log('用戶B獲取candidate信息', event.candidate);
    // 通過(guò)信令服務(wù)器發(fā)送candidate信息給用戶A
    socket.value?.emit('sendCandidate', {
      roomId,
      candidate: event.candidate
    })
  }
}

// 添加candidate信息
sock.on('sendCandidate', async (candidate) => {
  await peer.value.addIceCandidate(candidate);
})

// 監(jiān)聽(tīng)onaddstream來(lái)獲取對(duì)方的音視頻流
peer.value.onaddstream = (event: any) => {
  calling.value = false;
  communicating.value = true;
  remoteVideo.value!.srcObject = event.stream
  remoteVideo.value!.play()
}

// 掛斷視頻
const hangUp = () => {
  console.log('掛斷視頻');
  socket.value?.emit('hangUp', roomId)
}
// 狀態(tài)復(fù)原
const reset = () => {
  called.value = false
  caller.value = false
  calling.value = false
  communicating.value = false
  peer.value = null
  localVideo.value!.srcObject = null
  remoteVideo.value!.srcObject = null
  localStream.value = undefined
}

// 使用peer搭建信令服務(wù)器
const { PeerServer } = require('peer');
const peerServer = PeerServer({ port: 3001, path: '/myPeerServer' });

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Peer } from "peerjs";
const url = ref<string>()
const localVideo = ref<HTMLVideoElement>()
const remoteVideo = ref<HTMLVideoElement>()
const peerId = ref<string>()
const remoteId = ref<string>()
const peer = ref<any>()
const caller = ref<boolean>(false)
const called = ref<boolean>(false)
const callObj = ref<any>(false)
onMounted(() => {
  // 
  peer.value = new Peer({ // 連接信令服務(wù)器
    host: 'localhost',
    port: 3001,
    path: '/myPeerServer'
  });
  peer.value.on('open', (id: string) => {
    peerId.value = id
  })
  // 接收視頻請(qǐng)求
  peer.value.on('call', async (call: any) => {
    called.value = true
    callObj.value = call
  });
})
// 獲取本地音視頻流
async function getLocalStream(constraints: MediaStreamConstraints) {
  // 獲取媒體流
  const stream = await navigator.mediaDevices.getUserMedia(constraints)
  // 將媒體流設(shè)置到 video 標(biāo)簽上播放
  localVideo.value!.srcObject = stream;
  localVideo.value!.play();
  return stream
}
const acceptCalled = async () => {
  // 接收視頻
  const stream = await getLocalStream({ video: true, audio: true })
  callObj.value.answer(stream);
  callObj.value.on('stream', (remoteStream: any) => {
    called.value = false
    // 將遠(yuǎn)程媒體流添加到 video 元素中
    remoteVideo.value!.srcObject = remoteStream;
    remoteVideo.value!.play();
  });
}
// 開(kāi)啟視頻
const callRemote = async () => {
  if (!remoteId.value) {
    alert('請(qǐng)輸入對(duì)方ID')
    return
  }
  const stream = await getLocalStream({ video: true, audio: true })
  // 將本地媒體流發(fā)送給遠(yuǎn)程 Peer
  const call = peer.value.call(remoteId.value, stream);
  caller.value = true
  call.on('stream', (remoteStream: any) => {
    caller.value = false
    // 將遠(yuǎn)程媒體流添加到 video 元素中
    remoteVideo.value!.srcObject = remoteStream;
    remoteVideo.value!.play();
  });
}
</script>