vue使用peer.js实现语音通话

《独白》

已于 2023-11-21 08:51:42 修改

阅读量807

点赞数 1

文章标签： javascript 前端开发语言

于 2023-10-30 10:16:34 首次发布

本文链接：https://blog.csdn.net/qq_45149139/article/details/134113478

版权

本文介绍了使用Vue.js和PeerJS库实现的语音通话功能，包括获取用户媒体流、建立和结束通话，以及音频播放和全屏切换。

摘要由CSDN通过智能技术生成

<template>
  <div>
    <h3>语音通话</h3>
    <audio ref="localAudio" style="width: 400px;height: 300px;" @click="toggleFullscreen"></audio>
    <div style="text-align: left">
      自己ID<input type="text" v-model="myPeerid" />
      <br>
      对方ID<input type="text" v-model="youPeerid" />
      <br>
      <button @click="startCaller">语音通话</button>
      <button @click="startCall">确认</button>
      <button @click="endCall">挂断</button>
    </div>
    <audio ref="remoteAudio" style="width: 400px;height: 300px;" @click="toggleFullscreen"></audio>
  </div>
</template>

<script>
import { Peer } from 'peerjs'
export default {
  data () {
    return {
      myPeerid: '',
      youPeerid: '',
      localStream: null,
      remoteStream: null,
      peer: null,
      call: null
    }
  },
  mounted () {

  },

  methods: {

  startCaller() {
    this.getUserMedia({ audio: true }, (stream) => {
      this.localStream = stream
      this.$refs.localAudio.srcObject = stream
      this.$refs.localAudio.autoplay = true
      this.$refs.localAudio.play()
    }, (err) => {
      console.log('获取本地流失败', err)
    })

    this.peer = new Peer()
    this.peer.on('open', (id) => {
      this.myPeerid = id
    })

    this.peer.on('call', (call) => {
      this.call = call
      call.answer(this.localStream)
      call.on('stream', (remoteStream) => {
        this.remoteStream = remoteStream
        this.$refs.remoteAudio.srcObject = remoteStream
        this.$refs.remoteAudio.autoplay = true
      })
    })
  },

  toggleFullscreen() {
    const audio = this.$refs.localAudio
    if (audio.webkitRequestFullscreen) {
      audio.webkitRequestFullscreen()
    } else if (audio.mozRequestFullScreen) {
      audio.mozRequestFullScreen()
    } else if (audio.requestFullscreen) {
      audio.requestFullscreen()
    }
  },

    getUserMedia (constraints, success, error) {
      if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error)
      } else if (navigator.webkitGetUserMedia) {
        navigator.webkitGetUserMedia(constraints).then(success).catch(error)
      } else if (navigator.mozGetUserMedia) {
        navigator.mozGetUserMedia(constraints).then(success).catch(error)
      } else if (navigator.getUserMedia) {
        navigator.getUserMedia(constraints).then(success).catch(error)
      }
    },
    startCall () {
      const remoteId = this.youPeerid
      if (remoteId === '') {
        alert('请输入对方ID')
        return
      }
      this.call = this.peer.call(remoteId, this.localStream)
      this.call.on('stream', (remoteStream) => {
        console.log(remoteStream)
        this.remoteStream = remoteStream
        this.refs.remoteAudio.srcObject = remoteStream
        this.refs.remoteAudio.srcObject = remoteStream
        this.refs.remoteAudio.autoplay = true
      })
      this.call.on('close', () => {
        console.log('用户通话关闭')
      })
      this.call.on('error', (err) => {
        console.log(err)
      })
    },
    endCall () {
      if (this.call) {
        this.call.close()
        this.call = null
      }
      this.remoteStream = null
      this.refs.remoteAudio.srcObject = null
      this.myPeerid = null

      this.localAudio = null
      this.refs.localAudio.srcObject = null
      this.arr = true
    }
  }
}
</script>