0

0

JavaScriptWebRTC_点对点视频通话实现

紅蓮之龍

紅蓮之龍

发布时间:2025-11-22 22:30:08

|

809人浏览过

|

来源于php中文网

原创

WebRTC通过getUserMedia获取音视频流,RTCPeerConnection建立P2P连接,并借助信令服务器交换SDP与ICE候选,实现浏览器间实时音视频通信。

javascriptwebrtc_点对点视频通话实现

WebRTC(Web Real-Time Communication)是一种支持浏览器之间直接进行音视频通话和数据传输的技术,无需中间服务器转发媒体流。实现点对点视频通话的核心在于建立P2P连接,这主要依赖于 getUserMedia 获取本地媒体、RTCPeerConnection 建立连接以及信令机制交换会话描述。

获取本地音视频流

要开启视频通话,第一步是获取用户的摄像头和麦克风权限。

navigator.mediaDevices.getUserMedia 方法用于请求访问本地设备。配置对象指定需要的媒体类型:
  • video: true 请求摄像头画面
  • audio: true 请求麦克风输入

成功后返回一个 MediaStream 对象,可赋值给页面中的 video 元素进行预览:

const localVideo = document.getElementById('localVideo');
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    localVideo.srcObject = stream;
    localStream = stream; // 保存供后续使用
  })
  .catch(err => console.error('无法获取媒体设备:', err));

创建 RTCPeerConnection 实例

每个参与通话的客户端都需要创建一个 RTCPeerConnection 对象,它是 WebRTC 的核心,负责音视频流的加密传输与网络穿透。

立即学习Java免费学习笔记(深入)”;

通常需配置 STUN/TURN 服务器帮助穿越 NAT 和防火墙

const configuration = {
  iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
};
const peerConnection = new RTCPeerConnection(configuration);

将本地流添加到连接中,以便发送给对方:

localStream.getTracks().forEach(track => {
  peerConnection.addTrack(track, localStream);
});

通过信令服务交换连接信息

WebRTC 本身不提供信令机制,需借助外部方式(如 WebSocket、HTTP)传递 SDP 和 ICE 候选地址。

eSiteGroup站群管理系统1.0.4
eSiteGroup站群管理系统1.0.4

eSiteGroup站群管理系统是基于eFramework低代码开发平台构建,是一款高度灵活、可扩展的智能化站群管理解决方案,全面支持SQL Server、SQLite、MySQL、Oracle等主流数据库,适配企业级高并发、轻量级本地化、云端分布式等多种部署场景。通过可视化建模与模块化设计,系统可实现多站点的快速搭建、跨平台协同管理及数据智能分析,满足政府、企业、教育机构等组织对多站点统一管控的

下载

流程如下:

  • 调用 createOffer 生成本地提议(offer)
  • 设置本地描述并发送 offer 给对方
  • 对方收到后设置为远程描述,调用 createAnswer 生成应答(answer)
  • 将 answer 发送回发起方,双方都设置对应的远程描述

同时收集 ICE 候选地址,通过信令通道发送给对方:

peerConnection.onicecandidate = event => {
  if (event.candidate) {
    signalingChannel.send({
      type: 'candidate',
      candidate: event.candidate
    });
  }
};

对方收到候选信息后添加到自己的连接中:

peerConnection.addIceCandidate(new RTCIceCandidate(candidate));

接收远程视频流

当连接建立成功,远端媒体流会通过 ontrack 事件送达:

peerConnection.ontrack = event => {
  const remoteVideo = document.getElementById('remoteVideo');
  remoteVideo.srcObject = event.streams[0];
};

此时即可看到对方的画面,完成双向音视频通信。

基本上就这些关键步骤。虽然 WebRTC 是点对点通信,但初期必须依赖信令服务器协调连接。实际部署时还需处理错误、重连、兼容性等问题,不过现代浏览器已广泛支持该技术。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
http500解决方法
http500解决方法

http500解决方法有检查服务器日志、检查代码错误、检查服务器配置、检查文件和目录权限、检查资源不足、更新软件版本、重启服务器或寻求专业帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

402

2023.11.09

http请求415错误怎么解决
http请求415错误怎么解决

解决方法:1、检查请求头中的Content-Type;2、检查请求体中的数据格式;3、使用适当的编码格式;4、使用适当的请求方法;5、检查服务器端的支持情况。更多http请求415错误怎么解决的相关内容,可以阅读下面的文章。

418

2023.11.14

HTTP 503错误解决方法
HTTP 503错误解决方法

HTTP 503错误表示服务器暂时无法处理请求。想了解更多http错误代码的相关内容,可以阅读本专题下面的文章。

2171

2024.03.12

http与https有哪些区别
http与https有哪些区别

http与https的区别:1、协议安全性;2、连接方式;3、证书管理;4、连接状态;5、端口号;6、资源消耗;7、兼容性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2065

2024.08.16

Golang WebSocket与实时通信开发
Golang WebSocket与实时通信开发

本专题系统讲解 Golang 在 WebSocket 开发中的应用,涵盖 WebSocket 协议、连接管理、消息推送、心跳机制、群聊功能与广播系统的实现。通过构建实际的聊天应用或实时数据推送系统,帮助开发者掌握 如何使用 Golang 构建高效、可靠的实时通信系统,提高并发处理与系统的可扩展性。

22

2025.12.22

PHP WebSocket 实时通信开发
PHP WebSocket 实时通信开发

本专题系统讲解 PHP 在实时通信与长连接场景中的应用实践,涵盖 WebSocket 协议原理、服务端连接管理、消息推送机制、心跳检测、断线重连以及与前端的实时交互实现。通过聊天系统、实时通知等案例,帮助开发者掌握 使用 PHP 构建实时通信与推送服务的完整开发流程,适用于即时消息与高互动性应用场景。

63

2026.01.19

拼多多赚钱的5种方法 拼多多赚钱的5种方法
拼多多赚钱的5种方法 拼多多赚钱的5种方法

在拼多多上赚钱主要可以通过无货源模式一件代发、精细化运营特色店铺、参与官方高流量活动、利用拼团机制社交裂变,以及成为多多进宝推广员这5种方法实现。核心策略在于通过低成本、高效率的供应链管理与营销,利用平台社交电商红利实现盈利。

4

2026.01.26

edge浏览器怎样设置主页 edge浏览器自定义设置教程
edge浏览器怎样设置主页 edge浏览器自定义设置教程

在Edge浏览器中设置主页,请依次点击右上角“...”图标 > 设置 > 开始、主页和新建标签页。在“Microsoft Edge 启动时”选择“打开以下页面”,点击“添加新页面”并输入网址。若要使用主页按钮,需在“外观”设置中开启“显示主页按钮”并设定网址。

6

2026.01.26

苹果官方查询网站 苹果手机正品激活查询入口
苹果官方查询网站 苹果手机正品激活查询入口

苹果官方查询网站主要通过 checkcoverage.apple.com/cn/zh/ 进行,可用于查询序列号(SN)对应的保修状态、激活日期及技术支持服务。此外,查找丢失设备请使用 iCloud.com/find,购买信息与物流可访问 Apple (中国大陆) 订单状态页面。

16

2026.01.26

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号