peerjs实现视频流双向推流

html部分

<div class="page-body">
// 推流方的video
  <div class="side-item left-side">
    推流id:{{ hostId }}
    <video
    autoplay
    ref="remoteDom"
    class="camera"
    src="#"></video>
  </div>
  <div class="side-item right-side">
  // 接收流方的video
    <div>
      <input v-model="requestId" type="text"><button
      @click="requestConnect"
      >请求连接</button>
    </div>
    <video 
    autoplay
    ref="receiveDom"
    class="camera"
    src="#"></video>
  </div>
 </div>

js部分

 // 导库
 import {Peer} from 'peerjs'
 import {onMounted,ref,reactive} from 'vue'
 const requestId = ref('')
 const hostId = ref('')
 const receiveId = ref('')
 const receiveDom = ref(null)
 const remoteDom = ref(null)

  

被请求方

// 被请求方的peer
const peer = new Peer()
// 被请求方的事件，推流需要先获取媒体流
// 注册p2p,生成本地的peerid
  peer.on('open',id => {
    hostId.value = id
  })
  
  // 监听被连接事件
  peer.on('connection',(connect) => {
    receiveId.value = connect.peer
    // 监听对方传来的数据
    connect.on('data',data => {
      console.log(data)
    })
  })
  // 被请求方获取媒体流
  const stream = await navigator.mediaDevices.getUserMedia({video:true,audio:true})
  remoteDom.value.srcObject = stream
  // 接受对方的视频流请求
  peer.on('call',call => {
    call.answer(stream);
    // 接受对方的视频流
    call.on('stream', (remoteStream) => {
      receiveDom.value.srcObject = remoteStream;
    });
  })

发送请求方

 // 请求方的peer
 const receiveIdPeer = reactive({obj:null})
 const requestConnect = () => {
  receiveIdPeer.obj = new Peer()
  // 注册请求方的peer
  receiveIdPeer.obj.on('open',() => {
    // 请求连接
    let conn = receiveIdPeer.obj.connect(requestId.value)
    conn.on('open', async()=>{
      conn.send('连接成功')
      // 向被请求方发送视频流请求
      const stream = await navigator.mediaDevices.getUserMedia({video:true,audio:true})
      const call = receiveIdPeer.obj.call(requestId.value,stream)
      // 接受被请求方的视频流
      call.on('stream', (remoteStream) => {
        receiveDom.value.srcObject = remoteStream;
      });
    })
  })
  // 监听被连接方传回的消息
  receiveIdPeer.obj.on('connect',(connect)=>{
    connect.on('data',data=>{
      console.log('被请求方发送回来的消息',data)
    })
  })
 }