一对一视频直播源码实现网络中一对一视频聊天

代码实现步骤

概述

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

基础流程

选择视频通话对象，同时打开本地自己的摄像头（目的是本地创建视频流，这个视频流是要发送给对方的）
初始化双方链接的基础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使用该候选人的详细信息来发起连接。

一对一视频直播源码实现网络中一对一视频聊天

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

发送端即呼叫方流程：
目标方执行演示

本文转载自网络，感谢（痴痴颠颠的小蚂蚁）的分享，转载仅为分享干货知识，如有侵权欢迎联系云豹科技进行删除处理

一对一视频直播源码实现网络中一对一视频聊天相关推荐

视频直播源码开发时关于MySQL数据库的恢复方案
在开发视频直播源码的过程中,为了保证后期APP能顺利跑起来,在数据库的使用和维护方面也需要格外注意.假如因为各种原因服务器无法启动,数据库所有信息丢失,需要找回数据,应该怎样恢复呢?本文来给大家分享下 ...
一对一视频直播源码视频直播你应该知道的基础功能
一对一视频直播系统有直播和社交双重属性,因此要比我们常见的一对多视频直播平台功能丰富的多.一对一视频直播系统源码还要具备哪些基础功能呢一.什么是视频直播源码视频直播源码与很多应用程序源代码一样,有 ...
一对一视频直播源码|手机视频直播平台android源码/可打包视频直播
源码介绍一对一视频直播源码|手机视频直播平台android源码集视频.语音.动态.直播.社交等功能于一身. 前端功能说明: 登入注册:手机验证码登入.编辑个人信息.上传头像首页直播:查看主播用户. ...
视频直播源码中关于服务端直播开播推送实现
在视频直播源码中直播app开播时需向客户推送开播消息通知用户,实现方式如下: 1.申请相应的推送服务三方,如下使用极光推送,获取相应的配置资料,并做好相应的配置 2.推送代码如下: /* 极光推送 * ...
视频直播源码中主播印象功能开发
1.在视频直播源码中当用户或主播点击添加印象后进入主播印象界面,首先根据上个页面传值判断自己是否是主播,然后显示不同的标题 mineL = [[UILabel alloc]initWithFrame: ...
视频直播源码在ThinkPHP设置时区功能中的实现方式
在开发直播软件的过程中,视频直播源码起到了决定性作用.而在PHP开发过程中,不同国家或地区服务器时间不一致的原因大概有以下几点: 1.如果服务器分布在不同的地区或者国家,存在有些应用所在的服务器和访问 ...
一对一社交直播源码是怎么火起来的，一对一视频直播实现形式
一对一社交直播源码是怎么火起来的,一对一社交直播源码顺应市场的需求,满足了用户的新的口味,这是如今的新时代娱乐和技术发展的结合. 社交互动:直播最大的一块潜力市场是视频社交,资本方对直播的关注,也是因 ...
一对一直播源码是什么？一对一直播平台如何成功搭建？
如今5G时代已经来临,为社交类软件发展插上了腾飞的翅膀,其中一对一直播更是被大家所看好.众多的企业公司都想在直播大潮中分到一杯红利,但是一对一直播中涉及的技术难题阻挡了一大部分人的冲动. 一对一直播平 ...
视频直播源码在Android端实现1对1音视频实时通话
我们要使用 WebRTC 进行音视频互动时需要申请访问硬件的权限,至少要申请以下三种权限 Camera 权限 Record Audio 权限 Intenet 权限在Android中,申请权限分为静态 ...

一对一视频直播源码实现网络中一对一视频聊天

代码实现步骤

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

一对一视频直播源码实现网络中一对一视频聊天相关推荐

最新文章

热门文章