webrtc实现视频群聊系列文章(二)实现网络中一对一视频聊天

引言

在之前一篇文章写了webrtc实现基本的本地1对1视频通讯，这一篇文章则实现现实网络中一对一视频聊天。

目标

思考

webrtc实现点对点通信的基础是目标和自己之间能够建立网络链接，那么如何建立链接呢？
本地点对点视频为何无需交换所谓的信令能够直接实现视频通信？

解答

webrtc 之所以能够实现一个浏览器到另一个远程浏览器的通讯，最基本的还是要靠所谓的信息交换服务器

在上一节中是实现本地视频通信时因为我直接将交换的信息赋值给另一个变量，但是在远程网络链接中是不行的，一个用户发出的信号是一定要通过中间商发送到另一个用户浏览器然后赋值的。

代码实现步骤

概述

首先要通信那就得满足通信的基础，我选择和目标放通信，前提就是我通过一定的条件将自己和目标建立链接，然后再将自己的通信信息交给目标，目标也同时将自己的信息发给我。

基础流程

选择视频通话对象，同时打开本地自己的摄像头（目的是本地创建视频流，这个视频流是要发送给对方的）
初始化双方链接的基础PeerConnection
开始创建链接基础信息，这一步就开始正式建立和对方的通信基础（创建完成后本地保存一份offer）
目标对象通过服务器接收到远程发送的offer，并在目标方创建应答answer,本地保存应答后发送给原来发offer的用户
本地接受到目标返回的应答,并添加到本地远程描述中
监听ICE候选信息(这个过程是在发送offer和创建应答之间的)

步骤代码

选择视频通话对象，同时打开本地自己的摄像头（目的是本地创建视频流，这个视频流是要发送给对方的）

async createMedia() {const that = this;let streamTep = null;console.log("start prepare localStream origin")if( !navigator.mediaDevices || !navigator.mediaDevices.getUserMedia ){that.$message.error("设备不支持")console.log('getUserMedia is not support!')}await navigator.mediaDevices.getUserMedia({audio: true, video: true}).then(function (mediaStream) {console.log("mediaStream",mediaStream)// //eslint-disable-next-line no-debugger// debuggerstreamTep = mediaStream;}).catch(error=>{console.log("获取媒体设备异常",error)that.$message.warning("获取媒体设备异常")})return streamTep;},

初始化双方链接的基础PeerConnection

  //初始化 PeerConnectioninitPeer(){const that = this;that.pc = new PeerConnection(this.iceServers);that.pc.addStream(this.localStream);that.pc.onicecandidate = function(event) {console.log("监听ice候选信息",event.candidate)if (event.candidate) {//通过服务器将ICE候选信息发送到视频通话目标对象）let params ={username:that.username,target:that.remoteAccount,candidate:event.candidate}console.log("info",params)that.socket.emit("candidate",params)}else{console.log("ICE收集已经完成")}};that.pc.onaddstream = (event) => {console.log("监听到视频加入 onaddstream",event)//将视频流赋值到某个video标签中（这里就是监听到的对方的视频流，这也就是为什么第一步要创建本地视频流的原因）that.createEleVideo(event.stream,that.remoteAccount)};},

开始创建链接，这一步就开始正式建立和对方的通信基础（创建完成后本地保存一份offer）

 async onCreateOffer() {const that = this;//创建offerlet offer_tep = await that.pc.createOffer(this.offerOption);console.log("呼叫端 offer",offer_tep)//设置本地描述await that.pc.setLocalDescription(offer_tep)//远程发送到服务器let params = {username:that.username,target:that.remoteAccount,offer:offer_tep}that.socket.emit("offer",params)},

目标对象通过服务器接收到远程发送的offer，并在目标方创建应答answer,本地保存应答后发送给给自己发offer的用户

//监听远端offerasync onOffer(data) {const that = this;await that.pc.setRemoteDescription(data.offer)// 接收端创建 answerlet answer = await that.pc.createAnswer();// 接收端设置本地 answer 描述await that.pc.setLocalDescription(answer);//发送到呼叫端 answerlet params = {username:that.username,target:that.remoteAccount,answer:answer}that.socket.emit("answer",params)},

本地接受到目标返回的应答,并添加到本地远程描述中

  //监听远程响应async onAnswer(data) {const that = this;// 发送端 设置远程 answer 描述await that.pc.setRemoteDescription(data.answer);},

监听ICE候选信息(这个过程是在发送offer和创建应答之间的)，引用MDN上的话

ICE候选人描述了WebRTC能够与远程设备进行通信所需的协议和路由。在开始WebRTC对等连接时，通常在连接的每一端都建议多个候选对象，直到他们彼此同意描述他们认为最好的连接的候选对象为止。然后，WebRTC使用该候选人的详细信息来发起连接。

上述代码流程中具体执行实际演示

发送端即呼叫方流程：

目标方执行演示

后续

本文是webrtc实现群聊系列文章的第二篇，持续更新中
关注公众号及时获取最新文章更新

webrtc实现视频群聊系列文章(二)实现网络中一对一视频聊天相关推荐

一对一视频直播源码实现网络中一对一视频聊天
一对一视频直播源码实现网络中一对一视频聊天代码实现步骤概述首先要通信那就得满足通信的基础,我选择和目标放通信,前提就是我通过一定的条件将自己和目标建立链接,然后再将自己的通信信息交给目标,目标也 ...
【Android App】实战项目之仿微信的私信和群聊App（附源码和演示视频超详细必看）
需要全部代码请点赞关注收藏后评论区留言私信~~~ 手机最开始用于通话,后来增加了短信功能,初步满足了人与人之间的沟通需求.然而短信只能发文字,于是出现了能够发图片的彩信,但不管短信还是彩信,资费都太贵 ...
.net 面试题系列文章二（附答案）
.net 面试题系列文章二(附答案) 内容摘要:本文是.net 面试题系列的第二篇,该系列文章是对网上所有.net面试题的收重新集整理後的系列文章,囊括了c#面试题,vb.net面试题,asp.net ...
强化学习系列文章(二十七)：VPG+Beta分布在CartPoleContinuous环境中的应用
强化学习系列文章(二十七):VPG+Beta分布在CartPoleContinuous环境中的应用在第七篇笔记(https://blog.csdn.net/hhy_csdn/article/deta ...
Google+ Hangouts 视频群聊全面解析
就是一个视频会议在线应用. Hangouts是一个全新标准的基于云端的视频会议平台,这个平台具备高质量视频.低延迟和强大的加密,配合简单易用的网页应用,它将领导视频会议的体验潮流. Hangouts主 ...
推荐一枚帮你找到 Google+ Hangouts 视频群聊的 Chrome 扩展
如果你喜欢在Google+里通过Hangouts跟天南海北的人进行视频群聊,那么千万别错过My Hangouts for Google+这枚Chrome扩展.它可以做到: 显示Google+里所有公开 ...
强化学习系列文章(二十三)：AirSim Python API图像与图像处理
强化学习系列文章(二十三):AirSim Python API图像与图像处理参考网址:https://microsoft.github.io/AirSim/image_apis/#segmentat ...
强化学习系列文章(二十八)：进化强化学习EvoRL的预实验
强化学习系列文章(二十八):进化强化学习EvoRL的预实验最近在研究强化学习解决离散空间的组合优化问题时,接触到了很多进化算法,实际体验也是与RL算法不相上下.进化算法也常用于优化神经网络的参数,C ...
uni-app 190扫一扫加入群聊功能（二）
/pages/chat/scan-add/scan-add.nvue <template><view class="page"><!-- 导航栏 -- ...

webrtc实现视频群聊系列文章(二)实现网络中一对一视频聊天

引言

目标

思考

解答

代码实现步骤

概述

基础流程

步骤代码

上述代码流程中具体执行实际演示

后续

webrtc实现视频群聊系列文章(二)实现网络中一对一视频聊天相关推荐

最新文章

热门文章