vue项目基于WebRTC实现一对一音视频通话_vue实战 1-1 webrtc点对点语音视频通话

效果

前端代码

<template>
  <div class="flex items-center flex-col text-center p-12 h-screen">
    <div class="relative h-full mb-4 fBox">
      <video id="localVideo"></video>
      <video id="remoteVideo"></video>
      <div v-if="caller && calling">
        <p class="mb-4 text-white">等待对方接听...</p>
        <img style="width: 60px;" @click="hangUp" src="@/assets/guaDuang.png" alt="">
      </div>
      <div v-if="called && calling">
        <p>收到视频邀请...</p>
        <div class="flex">
          <img style="width: 60px" @click="hangUp" src="@/assets/guaDuang.png" alt="">
          <img style="width: 60px" @click="acceptCall" src="@/assets/jieTing.png" alt="">
        </div>
      </div>
    </div>
    <div>
      <button @click="callRemote" style="margin-right: 10px">发起视频</button>
      <button @click="hangUp" style="margin-left: 10px">挂断视频</button>
    </div>
  </div>
</template>

<script>
import { io, Socket } from "socket.io-client";
let roomId = '001';
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return{
      wsSocket:null,//实例
      called:false,// 是否是接收方
      caller:false,// 是否是发起方
      calling:false,// 呼叫中
      communicating:false,// 视频通话中
      localVideo:null,// video标签实例，播放本人的视频
      remoteVideo:null,// video标签实例，播放对方的视频
      peer:null,
      localStream:null,
    }
  },
  methods:{
    // 发起方发起视频请求
    async callRemote(){
      let that = this;
      console.log('发起视频');
      that.caller = true;
      that.calling = true;
      // await getLocalStream()
      // 向信令服务器发送发起请求的事件
      await that.getLocalStream();
      that.wsSocket.emit('callRemote', roomId)
    },
 
    // 接收方同意视频请求
    acceptCall(){
      console.log('同意视频邀请');
      this.wsSocket.emit('acceptCall', roomId)
    },
 
    // 挂断视频
    hangUp(){
      this.wsSocket.emit('hangUp', roomId)
    },
 
    reset(){
      this.called = false;
      this.caller = false;
      this.calling = false;
      this.communicating = false;
      this.peer = null;
      this.localVideo.srcObject = null;
      this.remoteVideo.srcObject = null;
      this.localStream = undefined;
      console.log('挂断结束视频-------')
    },
 
    // 获取本地音视频流
    async getLocalStream(){
      let that = this;
      let obj = { audio: true, video: true };
      const stream = await navigator.mediaDevices.getUserMedia(obj); // 获取音视频流
      that.localVideo.srcObject = stream;
      that.localVideo.play();
      that.localStream = stream;
      return stream;
    }
  },
  mounted() {
    let that = this;
    that.$nextTick(()=>{
      that.localVideo = document.getElementById('localVideo');
      that.remoteVideo = document.getElementById('remoteVideo');
    })
    let sock = io('localhost:3000'); // 对应服务的端口
    // 连接成功
    sock.on('connectionSuccess', (sock) => {
      console.log('连接成功:');
    });
    sock.emit('joinRoom', roomId) // 前端发送加入房间事件
 
    sock.on('callRemote', (sock) => {
      // 如果是发送方自己收到这个事件就不用管
      if (!that.caller){ // 不是发送方(用户A)
        that.called = true; // 接听方
        that.calling = true; // 视频通话中
      }
    });
 
    sock.on('acceptCall',async ()=>{
      if (that.caller){
        // 用户A收到用户B同意视频的请求
        that.peer = new RTCPeerConnection();
        // 添加本地音视频流
        that.peer.addStream && that.peer.addStream(that.localStream);
 
        // 通过监听onicecandidate事件获取candidate信息
        that.peer.onicecandidate = (event) => {
          if (event.candidate) {
            console.log('用户A获取candidate信息', event.candidate);
            // 通过信令服务器发送candidate信息给用户B
            sock.emit('sendCandidate', {roomId, candidate: event.candidate})
          }
        }
 
        // 接下来用户A和用户B就可以进行P2P通信流
        // 监听onaddstream来获取对方的音视频流
        that.peer.onaddstream = (event) => {
          console.log('用户A收到用户B的stream',event.stream);
          that.calling = false;
          that.communicating = true;
          that.remoteVideo.srcObject = event.stream;
          that.remoteVideo.play();
        }
 
 
        // 生成offer
        let offer = await that.peer.createOffer({
          offerToReceiveAudio: 1,
          offerToReceiveVideo: 1
        })
        console.log('offer', offer);
        // 设置本地描述的offer
        await that.peer.setLocalDescription(offer);
        // 通过信令服务器将offer发送给用户B
        sock.emit('sendOffer', { offer, roomId })
      }
    })
 
    // 收到offer
    sock.on('sendOffer',async (offer) => {
      if (that.called){ // 接收方 - 用户B
        console.log('收到offer',offer);
        // 创建自己的RTCPeerConnection
        that.peer = new RTCPeerConnection();
        // 添加本地音视频流
        const stream = await that.getLocalStream();
        that.peer.addStream && that.peer.addStream(stream);
 
        // 通过监听onicecandidate事件获取candidate信息
        that.peer.onicecandidate = (event) => {
          if (event.candidate) {
            console.log('用户B获取candidate信息', event.candidate);
            // 通过信令服务器发送candidate信息给用户A
            sock.emit('sendCandidate', {roomId, candidate: event.candidate})
          }
        }
 
        // 接下来用户A和用户B就可以进行P2P通信流
        // 监听onaddstream来获取对方的音视频流
        that.peer.onaddstream = (event) => {
          console.log('用户B收到用户A的stream',event.stream);
          that.calling = false;
          that.communicating = true;
          that.remoteVideo.srcObject = event.stream;
          that.remoteVideo.play();
        }
 
        // 设置远端描述信息
        await that.peer.setRemoteDescription(offer);
        let answer = await that.peer.createAnswer();
        console.log('用户B生成answer',answer);
        await that.peer.setLocalDescription(answer);
        // 发送answer给信令服务器
        sock.emit('sendAnswer', { answer, roomId })
      }
    })
 
    // 用户A收到answer
    sock.on('sendAnswer',async (answer) => {
      if (that.caller){ // 接收方 - 用户A   判断是否是发送方
        // console.log('用户A收到answer',answer);
        await that.peer.setRemoteDescription(answer);
      }
    })
 
    // 收到candidate信息
    sock.on('sendCandidate',async (candidate) => {
      console.log('收到candidate信息',candidate);
      // await that.peer.addIceCandidate(candidate) // 用户A和用户B分别收到candidate后，都添加到自己的peer对象上
      // await that.peer.addCandidate(candidate)
      await that.peer.addIceCandidate(candidate)
    })
 
    // 挂断
    sock.on('hangUp',()=>{
      that.reset()
    })
 
 
    that.wsSocket = sock;
  }
}
</script>

服务端代码

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('连接成功...')
    // 向客户端发送连接成功的消息
    sock.emit('connectionSuccess');
 
    sock.on('joinRoom',(roomId)=>{
        sock.join(roomId);
        console.log('joinRoom-房间ID：'+roomId);
    })
 
    // 广播有人加入到房间
    sock.on('callRemote',(roomId)=>{
        io.to(roomId).emit('callRemote')
    })
 
    // 广播同意接听视频
    sock.on('acceptCall',(roomId)=>{
        io.to(roomId).emit('acceptCall')
    })
 
    // 接收offer
    sock.on('sendOffer',({offer,roomId})=>{
        io.to(roomId).emit('sendOffer',offer)
    })
 
    // 接收answer
    sock.on('sendAnswer',({answer,roomId})=>{
        io.to(roomId).emit('sendAnswer',answer)
    })
 
    // 收到candidate
    sock.on('sendCandidate',({candidate,roomId})=>{
        io.to(roomId).emit('sendCandidate',candidate)
    })
 
    // 挂断结束视频
    sock.on('hangUp',(roomId)=>{
        io.to(roomId).emit('hangUp')
    })
})
 
server.listen(3000, () => {
    console.log('服务器启动成功');
});

完整代码gitee地址： https://gitee.com/wade-nian/wdn-webrtc.git

参考文章：基于WebRTC实现音视频通话_npm create vite@latest webrtc-client -- --template-CSDN博客y

要是在拨打电话过程中，无法打开摄像头或者麦克风，浏览器也没有弹出获取摄像头及麦克风的权限运行，这是需要进行浏览器安全源的设置，步骤如下：

1、在 chrome 中 输入 chrome://flags/#unsafely-treat-insecure-origin-as-secure

2、找到Insecure origins treated as secure

3、添加你服务器的地址 例如：http://192.168.1.10:8080

4、选择Enabled属性

5、点击右下角的Relaunch即可