网站logo如何修改,百度h5游戏,北仑seo排名优化技术,中山短视频seo教程提示#xff1a;局域网socket版#xff0c;一对多 文章目录 [TOC](文章目录) 前言一、教程二、webrtc工作流程三、推流端四、拉流五、socket服务六、效果七、备注总结
前言 WebRTC#xff08;Web Real-Time Communication#xff09;是一种实时通讯技术#xff0c;允许网… 提示局域网socket版一对多 文章目录 [TOC](文章目录) 前言一、教程二、webrtc工作流程三、推流端四、拉流五、socket服务六、效果七、备注总结
前言 WebRTCWeb Real-Time Communication是一种实时通讯技术允许网络应用或站点在不借助中间媒介的情况下建立浏览器之间的点对点Peer-to-Peer连接实现视频流、音频流或其他任意数据的传输。WebRTC的核心功能包括音视频的采集、编解码、网络传输和显示等 WebRTC的技术特点 1、实时通信WebRTC专注于实时通信包括音频、视频和其他数据传输。 2、点对点通信WebRTC支持点对点通信即两个浏览器之间直接建立连接无需通过中间服务器。 3、多媒体引擎WebRTC包含一个多媒体引擎处理音频和视频流并提供丰富的API和协议。 4、NAT穿越WebRTC提供机制使得在NATNetwork 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* **/三、推流端 一个拉流RTCPeerConnection对应一个推流RTCPeerConnection X 个拉流RTCPeerConnection对应X 个推流RTCPeerConnection push.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title推流/title
/head
bodyvideo idwebrtcVideo autoplay/videoscriptconst video document.getElementById(webrtcVideo);// webscoketconst ws new WebSocket(ws://127.0.0.1:1990); // 可换成局域网ip地址let videoStream;// 一个拉流RTCPeerConnection对应一个推流RTCPeerConnectionxx个拉流RTCPeerConnection对应xx个推流RTCPeerConnectionconst pushPool {};// rtc connectionlet pushRtcCon;// 打开摄像头video标签播放视频流const getStream async () {if(!navigator.mediaDevices||!navigator.mediaDevices.getUserMedia)console.log(不支持getUserMedia);const stream await navigator.mediaDevices.getUserMedia({video:true});video.srcObject stream;videoStream stream;}getStream();// 开始推流const startPush (pullId) {if(!pushPool[pullId])pushPool[pullId] pushRtcCon new RTCPeerConnection();// rtc connection 添加trackvideoStream.getVideoTracks().forEach(track {pushRtcCon.addTrack(track,videoStream);});// 监听icecandidatepushRtcCon.onicecandidate (event){if(event.candidate)ws.send(JSON.stringify({type:candidate,candidate:event.candidate,id:pullId}))}// 创建offerpushRtcCon.createOffer().then(offer{console.log(offer)// 设置推流LocalDescriptionpushRtcCon.setLocalDescription(offer).then((){ console.log(推流设置LocalDescription成功);});// offer信息发送给拉流ws.send(JSON.stringify({type:offer,id:pullId,offer}))});}// 开启websocket服务ws.addEventListener(open,(){// 初始化推流通道ws.send(JSON.stringify({type:push_init}))console.log(websocket连接成功)});// 接收wenbscoket信息ws.addEventListener(message, (event) {let data JSON.parse(event.data);console.log(data)// 接收到拉流传来的answer 设置推流RemoteDescriptionif(data.type answer)pushRtcCon.setRemoteDescription(data.answer).then((){ console.log(推流设置RemoteDescription成功);});// 接收拉流candidate 推流rtc connection 添加IceCandidateif(data.type candidatedata.candidate)pushRtcCon.addIceCandidate(data.candidate).then((){ console.log(推流添加candidate成功);});// 接收拉流开启消息 开始推流if(data.type pull_start)startPush(data.id);})/script
/body
/html四、拉流
pull.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyvideo idpullVideo autoplay preload muted/videodiv idpullBtn拉流/divscriptconst pullBtn document.getElementById(pullBtn);// 开始拉流const startPll () {let ws new WebSocket(ws://127.0.0.1:1990); // 可换成局域网ip地址const pullVideo document.getElementById(pullVideo);let pullStrem;// 拉流rtc connectionconst pullRtcCon new RTCPeerConnection();const pullID new Date().getTime()ioMath.round(Math.random()*10000);// 拉流监听icecandidatepullRtcCon.onicecandidate (event){// 接收到icecandidate 发送candidate给推流端if(event.candidate)ws.send(JSON.stringify({type:candidate,candidate:event.candidate,num:1,id:pullID}))}// 监听trackpullRtcCon.addEventListener(track ,(event) {pullStrem event.streams[0];pullVideo.srcObject event.streams[0];})// 打开webscoketws.addEventListener(open,async (){await ws.send(JSON.stringify({type:pull_init,id:pullID}));// 通知推流端开始推流ws.send(JSON.stringify({type:pull_start,id:pullID}));console.log(websocket连接成功)});// 监听webscoket消息ws.addEventListener(message,(event){let data JSON.parse(event.data);// 接收到推流端offerconsole.log(data,????)if(data.type offer){// 设置拉流端 RemoteDescriptionpullRtcCon.setRemoteDescription(data.offer).then((){console.log(拉流设置RemoteDescription成功)// 创建answerpullRtcCon.createAnswer(data.offer).then((answer){// 设置拉流的LocalDescriptionpullRtcCon.setLocalDescription(answer).then((){console.log(拉流设置LocalDescription成功)});// 发送answer到推流端ws.send(JSON.stringify({type:answer,answer,id:pullID}))});});}// 接收推流端candidate 拉流端添加IceCandidateif(data.type candidate)pullRtcCon.addIceCandidate(data.candidate).then((){ console.log(拉流添加candidate成功);});})}// 拉流按钮点击事件pullBtn.addEventListener(click,startPll)/script
/body
/html五、socket服务
安装依赖
npm init
npm install nodejs-websocket -Sindex.js
const ws require(nodejs-websocket);
const port 1990;// 推流通道 拉流通道
let wsPush,wsPull,pullPool{};
const server ws.createServer((connection){// websocket 连接接收数据connection.on(text,(msg){let data JSON.parse(msg);// 初始化推流websocketif(data.type push_init)wsPush connection;// 初始化拉流websocketif(data.type pull_init)if(!pullPool[data.id]) pullPool[data.id] connection;// 接收推流消息 发送给拉流if(connection wsPushpullPool[data.id])pullPool[data.id].send(msg);// 接收拉流消息 发送给推流for(let key in pullPool){if(connection pullPool[key]wsPush)wsPush.send(msg);}})// websocket 关闭connection.on(close,(){wsPush null;wsPull null;console.log(通道关闭)})// websocket 报错connection.on(err,(err){wsPush null;wsPull null;console.log(通道报错err)})
})
server.listen(port,console.log(ws启动成功127.0.0.1:port));六、效果
推流端 拉流端点击拉流按钮
七、备注
1、socket地址可换成局域网IP地址访问 2、pull来流请求地址可换成局域网IP地址访问
总结
踩坑路漫漫长~
