webrtc学习----前端推流拉流，单网页版
提示：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工作流程
// 推流拉流过程
/**
* 推流端获取视频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（推流）执行addIceCandidate
pullRtcCon.addEventListener('icecandidate',async (event)=>{
if(event.candidate) await pushRtcCon.addIceCandidate(event.candidate);
});
// pushRtcCon接收到pullRtcCon（拉流）传递的icecandidate，pullRtcCon（拉流）执行addIceCandidate
pushRtcCon.addEventListener('icecandidate',async (event)=>{
if(event.candidate) await pullRtcCon.addIceCandidate(event.candidate);
});
// 拉流监听track数据
pullRtcCon.addEventListener('track', (event)=>{
pullVideo.srcObject = event.streams[0];//必须得点第二下才播放
});
// 推流添加track
pushStream.getTracks().forEach(async (track)=>{
await pushRtcCon.addTrack(track,pushStream)
});
// 推流创建offer
let offer = await pushRtcCon.createOffer({offerToReceiveAudio: 0,offerToReceiveVideo: 1});
// 推流端设置LocalDescription
await pushRtcCon.setLocalDescription(offer);
// 拉流端设置RemoteDescription
await pullRtcCon.setRemoteDescription({type: 'offer', sdp: offer.sdp});
// 拉流端创建answer
let answer = await pullRtcCon.createAnswer();
// 拉流端设置LocalDescription
await pullRtcCon.setLocalDescription(answer);
// 推流端设置RemoteDescription
await pushRtcCon.setRemoteDescription(answer);
}
pushBtn.addEventListener('click',getStream);
pullBtn.addEventListener('click',startPull);
</script>
</body>
</html>
四、效果
初始化
点击推流
点击拉流
总结
踩坑路漫漫长@~@
原文地址：https://blog.csdn.net/weixin_44434938/article/details/144398573
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！