找到一个Vue3开发的WebRtc视频通话示例

1,153 阅读2分钟

源码

源码传送

简述

本项目采用了以下技术栈来实现一个WebRTC视频通话的DEMO,结构简单,主要是体现WebRtc之间的协议传输。

前端: typescriptVue3Vite

后端: nodejs

信令交互: socket.io

WebRTC使用的信令服务器主要是用于建立和维护端到端通信的会话控制信息的传输。一旦会话建立成功,信令服务器就不再需要参与实时通信过程中的音视频数据传输。因此,在信令服务器关闭后,已经建立的通话仍然可以继续进行,但无法再开始新的通话或重新连接已关闭的通话。

在建立WebRTC连接时,浏览器会自动处理STUN和TURN协议,以确保可靠的通信。因此,即使信令服务器关闭,已经建立的WebRTC连接仍然可以继续运行。这种设计使得WebRTC成为一种高效可靠的实时通讯技术。

WebRtc文档传送

启动

前端

  • 下载依赖
npm i
  • 启动
# 启动端口为 3003
npm run dev

信令服务器

  • 进入服务器目录
cd .\service\
  • 下载依赖
npm i
  • 启动
npm run serve

效果

12.gif

该示例的主要目的是展示WebRtc协议传输的过程的代码。为了使通信过程更加易于理解,项目没有进行过多的深层次封装。同时,信令服务器也没有过多地处理和封装。这样做可以更清晰地了解与信令服务器之间的通信方式。

因为需要信令服务器支持,这里就不开放线上预览链接了,可以直接 clone 下来尝试哦!

在编写示例时,我经过了测试,并列出了一些WebRTC的兼容性问题以及相应的解决方式。这有助于让开发者更好地了解和处理可能出现的问题。传送