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

转载

泰安云豹科技 2021-06-04 18:44:52

文章标签 直播源码 文章分类 音视频

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

代码实现步骤

概述

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

基础流程

选择视频通话对象，同时打开本地自己的摄像头（目的是本地创建视频流，这个视频流是要发送给对方的）
初始化双方链接的基础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
                       // debugger
                   streamTep = mediaStream;
               }).catch(error=>{
                   console.log("获取媒体设备异常",error)
                   that.$message.warning("获取媒体设备异常")
               })
           return streamTep;
       },
复制代码

初始化双方链接的基础PeerConnection

  //初始化 PeerConnection
      initPeer(){
        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;
        //创建offer
        let 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的用户

//监听远端offer
     async onOffer(data) {
       const that = this;
       await that.pc.setRemoteDescription(data.offer)
       // 接收端创建 answer
       let answer = await that.pc.createAnswer();
       // 接收端设置本地 answer 描述
       await that.pc.setLocalDescription(answer);
       //发送到呼叫端 answer
       let 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);
     },
复制代码