webrtc学习----前端推流拉流，单网页版

最新推荐文章于 2025-03-03 09:55:09 发布

longlongago~~

最新推荐文章于 2025-03-03 09:55:09 发布

阅读量1.3k

点赞数 3

分类专栏： webrtc推流拉流文章标签： webrtc 前端

本文链接：https://blog.csdn.net/weixin_44434938/article/details/144398573

版权

提示：webrtc单网页版

文章目录

@[TOC](文章目录)

前言

一、教程

二、webrtc工作流程

三、代码

四、效果

总结

前言

‌‌‌‌‌WebRTC（Web Real-Time Communication）‌是一种实时通讯技术，允许网络应用或站点在不借助中间媒介的情况下，建立浏览器之间的点对点（Peer-to-Peer）连接，实现视频流、音频流或其他任意数据的传输。WebRTC的核心功能包括音视频的采集、编解码、网络传输和显示等‌

WebRTC的技术特点
‌1、实时通信‌：WebRTC专注于实时通信，包括音频、视频和其他数据传输‌。
‌2、点对点通信‌：WebRTC支持点对点通信，即两个浏览器之间直接建立连接，无需通过中间服务器‌。
‌3、多媒体引擎‌：WebRTC包含一个多媒体引擎，处理音频和视频流，并提供丰富的API和协议‌。
4‌、NAT穿越‌：WebRTC提供机制，使得在NAT（Network Address Translation）和防火墙等网络设备背后进行通信更为容易‌。
‌5、TURN服务器‌：当P2P连接无法建立时，WebRTC会利用TURN服务器进行数据中转，确保通信的稳定性‌

一、教程

webrtc文档

二、webrtc工作流程

// 推流拉流过程
/**
  * 推流端获取视频stream
  * 推流端生成offer  
  * 推流端通过offer设置推流LocalDescription
  * 推流端发送offer给(拉)流端
  * (拉)流端接收offer
  * (拉)流端通过offer设置(拉)流端RemoteDescription
  * (拉)流端生成answer
  * (拉)流端通过answer设置(拉)流端LocalDescription
  * (拉)流端发送answer给推流端
  * 推流端接收answer设置推流端RemoteDescription
  * 推流端发送candidate(video,audio各一次)
  * (拉)流端接收candidate
  * (拉)流端发送candidate(video,audio各一次)
  * 推流端接收candidate
  * **/

三、代码

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>推拉流</title>
</head>
<body>
    <video id="pushVideo" src="" playsinline autoplay muted height="300" width="400"></video>
    <video id=