论坛 › 前端开发 › vue项目基于WebRTC实现一对一音视频通话

熊熊出没 发表于 2024-7-10 22:18:41

vue项目基于WebRTC实现一对一音视频通话

效果

https://img-blog.csdnimg.cn/direct/1f27740ae86248dc9e5f9256b02a0305.png
前端代码

<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属性
https://img-blog.csdnimg.cn/direct/331fda5d955d4c649811e0c156e1fcae.png
5、点击右下角的Relaunch即可
https://img-blog.csdnimg.cn/direct/a5546286e00b41b6b0d408ccaeabfcc6.png

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

查看完整版本: vue项目基于WebRTC实现一对一音视频通话