提示：webrtc单网页版
文章目录
- @[TOC](文章目录)
- 前言
- 一、教程
- 二、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="pullVideo" playsinline autoplay muted height="300" width="400"></video><div id="pushBtn">推流</div><div id="pullBtn">拉流</div><script>const pushVideo = document.getElementById('pushVideo');const pullVideo = document.getElementById('pullVideo');const pushBtn = document.getElementById('pushBtn');const pullBtn = document.getElementById('pullBtn');let pushStream;// 开启摄像头，video播放视频流const getStream = async() =>{if(!navigator.mediaDevices||!navigator.mediaDevices.getUserMedia)console.log('不支持：getUserMedia');pushStream = await navigator.mediaDevices.getUserMedia({video:true});pushVideo.srcObject = pushStream;}// 开启推流拉流const startPull = async () => {const pushRtcCon = new RTCPeerConnection();const pullRtcCon = new RTCPeerConnection();// pullRtcCon接收到pushRtcCon（推流）传递的icecandidate，pushRtcCon（推流）执行addIceCandidatepullRtcCon.addEventListener('icecandidate',async (event)=>{if(event.candidate) await pushRtcCon.addIceCandidate(event.candidate);});// pushRtcCon接收到pullRtcCon（拉流）传递的icecandidate，pullRtcCon（拉流）执行addIceCandidatepushRtcCon.addEventListener('icecandidate',async (event)=>{if(event.candidate) await pullRtcCon.addIceCandidate(event.candidate);});// 拉流监听track数据pullRtcCon.addEventListener('track', (event)=>{pullVideo.srcObject = event.streams[0];//必须得点第二下才播放});// 推流添加trackpushStream.getTracks().forEach(async (track)=>{await pushRtcCon.addTrack(track,pushStream)});// 推流创建offerlet offer = await pushRtcCon.createOffer({offerToReceiveAudio: 0,offerToReceiveVideo: 1});// 推流端设置LocalDescriptionawait pushRtcCon.setLocalDescription(offer);// 拉流端设置RemoteDescriptionawait pullRtcCon.setRemoteDescription({type: 'offer', sdp: offer.sdp});// 拉流端创建answerlet answer = await pullRtcCon.createAnswer();// 拉流端设置LocalDescriptionawait pullRtcCon.setLocalDescription(answer);// 推流端设置RemoteDescription await pushRtcCon.setRemoteDescription(answer);}pushBtn.addEventListener('click',getStream);pullBtn.addEventListener('click',startPull);</script>
</body>
</html>
四、效果
初始化
点击推流
点击拉流
总结
踩坑路漫漫长@~@