vue3实现WebRTC实战1v1通话

已于 2024-01-09 09:51:33 修改
阅读量1.8k 收藏 5
点赞数
文章标签： webrtc
于 2023-09-01 10:19:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42385482/article/details/131413386
版权
本文介绍了如何使用WebRTC进行1对1视频通话，包括创建RTCPeerConnection、配置Coturn服务器、使用WebSocket和ICE协议，以及前端Vue实现的代码示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

webRTC

利用webrtc进行1对1视频通话，也就是p2p点对点连接。

核心技术点包括：websocket、webRTC、coturn服务器等
前端io库为socket.io-client

客户端

创建RTCPeerConnection对象加入coturn服务器地址，STUN服务器用于获取公网IP地址，TURN服务器用于穿透防火墙

pc.value = new RTCPeerConnection({
        iceTransportPolicy: "relay", //all: 将使用所有网络接口类型，包括relay(中继)和srflx(对称NAT)
        iceServers: [
          {
            urls: "stun:1.15.14.164:3478",
          },
          {
            urls: [
              "turn:1.15.14.164:3478?transport=udp",
              "turn:1.15.14.164:3478?transport=tcp",
            ],
            username: "webrtc",
            credential: "webrtc666",
          },
        ],
      });

coturn服务器配置

安装coturn

yum install coturn
cd /etc/coturn/
vi turnserver.conf

加入配置

listening-ip=1.15.14.164
listening-port=3478
user=webrtc:webrtc666
realm=car-service.lichees.top

查看状态

systemctl start coturn # 启动
systemctl stop coturn # 停止
systemctl status coturn # 查看状态

测试是否能连通

点击前往

前端代码

index.vue

<template>
  <div>
    <div class="videos">
      <div class="local-video">
        <video ref="localVideo" autoplay muted playsinline="">本地窗口</video>
      </div>
      <div class="remote-video">
        <video ref="remoteVideo" autoplay playsinline="">远程窗口</video>
      </div>
    </div>
    <div class="setting">
      <van-icon name="wap-nav" color="#fff" @click="show = !show" />
    </div>

    <van-popup v-model:show="show">
      <div class="room">
        <van-field v-model="roomId" label="房间号" placeholder="请输入房间号" />
        <div class="buttons">
          <van-button type="primary" @click="remove">离开</van-button>
          <van-button type="success" @click="join">加入</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { onMounted, onUnmounted, ref } from "vue";
import { io } from "socket.io-client";
import { Toast } from "vant";

export default {
  setup() {
    const show = ref(false); // 是否显示弹窗
    const roomId = ref("");
    const localVideo = ref(null);
    const remoteVideo = ref(null);
    const localStream = ref(null); // 本地流
    const remoteStream = ref(null); // 远程流
    const socket = io("wss://car-service.lichees.top/");
    // const socket = io("ws://localhost:8989/");
    const pc = ref(null); // RTCPeerConnection实例

    const join = async () => {
      show.value = false;
      if (!roomId.value) {
        Toast("请输入房间号");
        return;
      }
      try {
        const stream = await navigator.mediaDevices.getUserMedia({
          audio: true,
          video: true,
        });
        localVideo.value.srcObject = stream; // 将视频流设置为video元素的源
        localStream.value = stream;
        localVideo.value.play(); // 播放视频
        doJoin(roomId.value);
      } catch (err) {
        Toast("无法访问用户媒体设备");
        console.error(err); // 无法访问用户媒体设备
      }
    };
    const remove = () => {
      show.value = false;
      try {
        localStream.value.getTracks().forEach((track) => track.stop());
        localVideo.value.srcObject = null;
        doLeave(roomId.value);
      } catch (err) {
        console.error("localStream错误", err);
      }
    };

    // 信令
    const SIGNAL_TYPE_JOIN = "join"; // 加入房间
    const SIGNAL_TYPE_RESP_JOIN = "resp_join"; // 加入房间响应
    const SIGNAL_TYPE_LEAVE = "leave"; // 离开房间
    const SIGNAL_TYPE_NEW_PEER = "new_peer"; // 新用户加入房间
    const SIGNAL_TYPE_PEER_LEAVE = "peer_leave"; // 用户离开房间
    const SIGNAL_TYPE_OFFER = "offer";
    const SIGNAL_TYPE_ANSWER = "answer";
    const SIGNAL_TYPE_CANDIDATE = "candidate";
    const loaclUid = ref(Math.random().toString(36).substr(2));
    const remoteUid = ref("");
    const intervalId = ref(null); // 心跳包定时器

    const doJoin = (roomId) => {
      const jsonMsg = {
        cmd: SIGNAL_TYPE_JOIN,
        roomId: roomId,
        uid: loaclUid.value,
      };
      socket.emit("text", JSON.stringify(jsonMsg));
      console.log(new Date().toLocaleTimeString(), "发送加入房间请求", jsonMsg);
    };
    const doLeave = (roomId) => {
      const jsonMsg = {
        cmd: SIGNAL_TYPE_LEAVE,
        roomId: roomId,
        uid: loaclUid.value,
      };
      socket.emit("text", JSON.stringify(jsonMsg));
      console.log(new Date().toLocaleTimeString(), "发送离开房间请求", jsonMsg);
    };

    // 创建对等连接
    const createPeerConnection = (data) => {
      console.log(
        new Date().toLocaleTimeString(),
        "执行createPeerConnection",
        data
      );
      remoteUid.value = data;
      pc.value = new RTCPeerConnection({
        iceTransportPolicy: "relay", //all: 将使用所有网络接口类型，包括relay(中继)和srflx(对称NAT)
        iceServers: [
          {
            urls: "stun:1.15.14.164:3478",
          },
          {
            urls: [
              "turn:1.15.14.164:3478?transport=udp",
              "turn:1.15.14.164:3478?transport=tcp",
            ],
            username: "webrtc",
            credential: "webrtc666",
          },
        ],
      });

      //  ICE协商时收集本地网络接口的信息，并将其打包成一个或多个 "候选者"
      pc.value.onicecandidate = (event) => {
        if (event.candidate) {
          const jsonMsg = {
            cmd: SIGNAL_TYPE_CANDIDATE,
            roomId: roomId.value,
            uid: loaclUid.value,
            remoteUid: remoteUid.value,
            msg: JSON.stringify(event.candidate),
          };
          socket.emit("text", JSON.stringify(jsonMsg));
          console.log(
            new Date().toLocaleTimeString(),
            "发送ICE候选者",
            jsonMsg
          );
        } else {
          console.warn("没有ICE候选者");
        }
      };

      // 一旦远程流到达RTCPeerConnection，将触发此事件
      pc.value.ontrack = (event) => {
        remoteStream.value = event.streams[0];
        remoteVideo.value.srcObject = remoteStream.value;
      };
      // 一旦本地流到达RTCPeerConnection，将触发此事件
      localStream.value.getTracks().forEach((track) => {
        pc.value.addTrack(track, localStream.value);
      });

      // 创建数据通道（心跳）
      const channel = pc.value.createDataChannel("heartbeat", {
        ordered: false, // 不保证数据包顺序
        maxRetransmits: 0, // 不限制重传次数
      }); // 创建数据通道

      channel.onopen = () => {
        intervalId.value = setInterval(() => {
          channel.send(new Uint8Array([0]));
        }, 5000); //定时发送心跳
      };
      channel.onclose = () => {
        if (intervalId.value) clearInterval(intervalId.value);
      };
    };

    const doOffer = (data) => {
      console.log(new Date().toLocaleTimeString(), "执行doOffer", data);
      remoteUid.value = data;
      //创建RTCPeerConnection对象
      if (pc.value == null) {
        createPeerConnection(remoteUid.value);
      }
      pc.value
        .createOffer()
        .then((desc) => {
          pc.value
            .setLocalDescription(desc)
            .then(() => {
              const jsonMsg = {
                cmd: SIGNAL_TYPE_OFFER,
                roomId: roomId.value,
                uid: loaclUid.value,
                remoteUid: remoteUid.value,
                msg: JSON.stringify(desc),
              };
              socket.emit("text", JSON.stringify(jsonMsg));
              console.log(
                new Date().toLocaleTimeString(),
                "发送OFFER",
                jsonMsg
              );
            })
            .catch((err) => {
              console.error("setLocalDescription报错", err);
            });
        })
        .catch((err) => {
          console.error("createOffer报错", err);
        });
    };

    const doAnswer = (data) => {
      console.log(new Date().toLocaleTimeString(), "执行doAnswer", data);
      remoteUid.value = data;
      if (pc.value == null) {
        createPeerConnection(remoteUid.value);
      }
      pc.value
        .createAnswer()
        .then((desc) => {
          pc.value
            .setLocalDescription(desc)
            .then(() => {
              const jsonMsg = {
                cmd: SIGNAL_TYPE_ANSWER,
                roomId: roomId.value,
                uid: loaclUid.value,
                remoteUid: remoteUid.value,
                msg: JSON.stringify(desc),
              };
              socket.emit("text", JSON.stringify(jsonMsg));
              console.log(
                new Date().toLocaleTimeString(),
                "发送ANSWER",
                jsonMsg
              );
            })
            .catch((err) => {
              console.error("setLocalDescription报错", err);
            });
        })
        .catch((err) => {
          console.error("createAnswer报错", err);
        });
    };

    const handleRemoteOffer = (message) => {
      console.log(new Date().toLocaleTimeString(), "处理远程offer", message);
      if (pc.value == null) {
        createPeerConnection(message.remoteUid);
      }
      const desc = new RTCSessionDescription(JSON.parse(message.msg));
      pc.value.setRemoteDescription(desc).then(() => {
        console.info("处理远程setRemoteDescription成功");
      });
      doAnswer(message.uid);
    };

    const handleRemoteAnswer = (message) => {
      console.log(new Date().toLocaleTimeString(), "处理远程answer", message);
      if (pc.value == null) {
        createPeerConnection(message.remoteUid);
      }
      const desc = new RTCSessionDescription(JSON.parse(message.msg));
      pc.value.setRemoteDescription(desc).then(() => {
        console.info("处理远程回答setRemoteDescription成功");
      });
    };

    const handleCandidate = (message) => {
      console.log(
        new Date().toLocaleTimeString(),
        "处理远程ICE候选者",
        message
      );
      const candidate = JSON.parse(message.msg);
      pc.value.addIceCandidate(candidate).catch((err) => {
        console.error("添加ICE失败", err);
      });
    };

    onMounted(() => {
      // 设置全屏
      // document.documentElement.requestFullscreen();
      socket.on("text", (data) => {
        const jsonMsg = JSON.parse(data);
        switch (jsonMsg.cmd) {
          case SIGNAL_TYPE_RESP_JOIN:
            if (jsonMsg.result == "fail") {
              Toast("加入房间失败");
              return;
            } else {
              Toast("加入房间成功");
            }
            console.log(
              new Date().toLocaleTimeString(),
              "发送加入房间请求响应结果",
              jsonMsg.result
            );
            break;
          case SIGNAL_TYPE_NEW_PEER:
            remoteUid.value = jsonMsg.remoteUid;
            console.log(
              new Date().toLocaleTimeString(),
              "有人加入房间",
              jsonMsg
            );
            doOffer(jsonMsg.remoteUid);
            break;

          case SIGNAL_TYPE_LEAVE:
            console.log(
              new Date().toLocaleTimeString(),
              "离开房间响应结果",
              jsonMsg
            );
            if (jsonMsg.result == "fail") {
              Toast(jsonMsg.msg);
              return;
            } else {
              Toast("离开房间成功");
              // 离开成功后断开连接
              pc.value.close();
              pc.value = null;
              remoteVideo.value.srcObject = null; // 关闭远程视频
            }
            break;
          case SIGNAL_TYPE_PEER_LEAVE:
            console.log(
              new Date().toLocaleTimeString(),
              "有人离开房间",
              jsonMsg
            );
            remoteVideo.value.srcObject = null;
            Toast(`用户${jsonMsg.remoteUid}离开房间`);
            pc.value.close();
            pc.value = null;
            remoteVideo.value.srcObject = null;
            break;

          case SIGNAL_TYPE_OFFER:
            handleRemoteOffer(jsonMsg);
            break;
          case SIGNAL_TYPE_ANSWER:
            handleRemoteAnswer(jsonMsg);
            break;
          case SIGNAL_TYPE_CANDIDATE:
            handleCandidate(jsonMsg);
            break;

          default:
            break;
        }
      });
    });

    onUnmounted(() => {
      remove();
    });
    return {
      show,
      roomId,
      localVideo,
      remoteVideo,
      join,
      remove,
    };
  },
};
</script>
<style lang="less" scoped>
.setting {
  position: fixed;
  padding: 8px;
  border-radius: 50%;
  background: var(--brown);
  top: 32px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.room {
  padding: 8px;
  min-width: 300px;
  .buttons {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 16px;
  }
}
.videos {
  video {
    width: 100%;
    transform: rotateY(180deg);
  }
  .local-video {
    max-width: 100%;
    border: 2px solid #15ff00;
    position: relative;
  }
  .local-video::before {
    position: absolute;
    content: "本地视频";
    top: 0;
    left: 0;
    color: #15ff00;
    width: 100%;
    height: 14px;
  }
  .remote-video {
    max-width: 100%;
    border: 2px solid #ff0000;
    position: relative;
  }
  .remote-video::before {
    position: absolute;
    content: "远程视频";
    top: 0;
    left: 0;
    color: #ff0000;
    width: 100%;
    height: 14px;
  }
}
</style>

后端代码

下载资源后查看

Vue3 - 详解WebRTC实时通信技术做客户端1对1视频语音通话及挂断示例，全流程1v1双端音视频聊天源码，node服务端使用Socket.io搭建信令服务器处理通信双端进行媒体协商和ICE候选！
王二红
12-25 1万+
vue3，WebRTC，视频通话，一对一音视频聊天，webrtc在vue3中的使用，信令服务器，vue3移动端H5实现1v1视频聊天，基于WebRTC在Vue3中实现机内1v1机内视频通话，web实时语音视频通话，使用VUE3+WebRTC实现音视频通话教程，vue3如何搭建WebRTC双端聊天，node.js服务器，socket.io搭建信令服务器详细说明，WebRTC实现双端音视频聊天(Vue3+Node)，搭建1对1视频聊天，多人语音聊天，连接不上怎么办，不显示画面，听不到声音，无音频，黑白屏没反应，
Vue2 - 详解WebRTC实时通信技术做客户端1对1视频语音通话及挂断示例，node服务端使用Socket.io搭建信令服务器处理通信双端进行媒体协商和ICE候选（全流程1v1双端音视频聊天源码）
王二红
12-26 5595
vue2，WebRTC，视频通话，一对一音视频聊天，webrtc在vue2中的使用，信令服务器，vue移动端H5实现1v1视频聊天，基于WebRTC在Vue中实现机内1v1机内视频通话，web实时语音视频通话，node.js服务器，socket.io搭建信令服务器详细说明，WebRTC实现双端音视频聊天(Vue2+Node)，搭建1对1视频聊天，多人语音聊天，连接不上怎么办，不显示画面，听不到声音，无音频，黑白屏没反应，使用WebRTC技术实现一对一音视频通话，使用VUE+WebRTC实现音视频通话教程，v
vue+node(socket.io)+webRTC一对一视频通讯demo
12-30
webRTC一对一视频通讯测试完整demo,包括webRTC基本api测试demo(音视频录制，屏幕共享，截图)，后台采用socket.io作为信令服务器，开发语言为node,前台框架使用vue
vue项目基于WebRTC实现一对一音视频通话
qq_920189602的博客
05-08 5424
vue项目基于WebRTC实现一对一音视频通话。完整代码gitee地址： https://gitee.com/wade-nian/wdn-webrtc.git。
WebRTC实现双端音视频聊天（Vue3 + SpringBoot）
最新发布
m0_74824002的博客
03-22 1383
文章描述使用WebRTC技术实现一对一音视频通话。由于设备摄像头限制（一台电脑作测试无法在开启的双端同时获取摄像头数据流），导致一台电脑无法同时测试双端，因此文章使用mp4音视频文件模拟摄像头音视频数据流输入。使用技术前端：Vue3，WebRTC相关API，axios后端信令服务器实现：SpringBoot，WebSocket在大致知道了上面介绍的WebRTC基本概念之后，我们以双端音视频互联的整体过程。假设存在A端（发起端）和B端（接收端）。1.
使用VUE+WebRTC快速实现简单的音视频通话
ZEGO即构科技
01-29 4474
本文将介绍如何快速使用 Vue 实现一个简单的实时音视频通话。ZEGO Express SDK：由 ZEGO 提供的实时音视频 SDK，能够为开发者提供便捷接入、高清流畅、多平台互通、低延迟、高并发的音视频服务。推流：把采集阶段封包好的音视频数据流传输到 ZEGO 实时音视频云的过程。拉流：从 ZEGO 实时音视频云将已有音视频数据流进行拉取的过程。
vue3+WebRTC拉流（正确姿势）
yasuo56的博客
06-02 5748
vue3+WebRTC拉流（正确姿势）
vue-webRTC:vue-webRTC演示
05-08
<<<<<<< HEAD vue-webRTC vue-webRTC演示 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 有关工作原理的详细说明，请查看的和。 npm因赛尔 npm run dev ef1e8890ae5ddbd1951437dc29499e0a07ffee25
vue3+vite+ts 使用webrtc-streamer播放海康rtsp监控视频
敲厉害的燕宝的博客
06-12 6334
webrtc-streamer 是一个使用简单机制通过 WebRTC 流式传输视频捕获设备和 RTSP 源的项目，它内置了一个小型的 HTTP server 来对 WebRTC需要的相关接口提供支持。相对于ffmpeg+flv.js的方案，延迟降低到了0.4秒左右，画面的加载速度也变快了，切换浏览器标签后也不会暂停画面，并且解决了http1.1的同域名中的并发限制(在谷歌浏览器中可以同时播放6个以上的video)。
vue-peerjs:在Vue应用中使用PeerJS实现WebRTC
03-27
vue_webrtc 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 自定义配置 请参阅。
vue3实现WebRTC实战1v1通话-后端代码(nestjs)
01-09
以上就是使用Vue3和NestJS实现1v1视频通话系统的相关知识点，涵盖了前端UI、WebRTC技术、后端处理、信令流程、数据库交互以及性能和兼容性等多个方面。通过理解这些概念和技术，开发者可以构建出稳定、安全且高效的...
Vue3与WebRTC技术实现的1v1视频通话后端教程
资源摘要信息:"在本资源中，我们将详细介绍如何使用Vue.js框架和WebRTC技术实现一个1对1的视频通话应用。同时，后端部分使用了NestJS框架进行代码实现，提供了必要的服务器支持和逻辑处理。该示例不仅仅是一个基础的...
VUE3 播放RTSP实时、回放(NVR录像机)视频流（使用WebRTC）
热门推荐
weixin_45540431的博客
03-12 1万+
播放RTSP视频流；实时摄像机及回放NVR录像机
Vue3+Node中使用webrtc推流至mediamtx
gzy886i的博客
10-22 3104
为Vue3+Node实现推流目标，提供了俩种方案。用实际代码实现了Web端与mediamtx流媒体服务器建立WebRTC连接和传输媒体流。
在vue中使用webrtcstreamer解析播放rtsp流
zero_er的博客
09-12 2912
adapter.min.js文件位置：webrtc-streamer-v0.8.6-dirty-Windows-AMD64-Debug\html\libs中。webrtcstreamer.js文件位置：webrtc-streamer-v0.8.6-dirty-Windows-AMD64-Debug\html中。测试输入流是否可以播放（这里可以播放，但有些原因嵌入到页面里也无法播放）启动完成后可以在浏览器中输入设置的ip和端口打开，看看是否启动成功。播放成功了，右键，打开编码器信息，查看是否是h264编码。
关于webrtc在vue中的使用
weixin_42613871的博客
07-29 9929
基本的两个API RTCPeerConnection 视频/音频通信的基础 var self = this; self.pc = new RTCPeerConnection(iceServer); MediaStream 访问本地相机和麦克风的媒体流 navigator.mediaDevices .getUserMedia({ audio: true, video: false })//音频通话，如果为视频通信把video后面的false改为.
【无标题】vue webrtc 播放rtsp视频流
超级无敌小地主
05-04 1700
3、首选运行　webrtc-streamer.exe　有的说不加参数CPU高，我的电脑上没加参数也不高，懒，没测试。不过运行　webrtc-streamer.exe 后有个黑框，我是自己写了个服务，如果webrtc没启动，就定时启动一下，这样播放的电脑上就没有黑框了。winows下下载：webrtc-streamer-v0.8.5-dirty-Windows-AMD64-Release.tar.gz。可能出现此问题的原因是　音视频在同一个流中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sea_lichee

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值