先了解一下流程 和 流程图(chatGpt的回答)

实现 (底层代码实现, 可作为demo熟悉)

小demo

                开始视频     结束视频   import { ref, onMounted } from 'vue';// import WebSocket from 'websocket'export default {  setup() {    // 创建本地视频和远程视频的引用    const localVideo = ref(null); // 本地视频元素引用    const remoteVideo = ref(null); // 远程视频元素引用    // 保存本地媒体流和RTCPeerConnection对象    let localStream = null; // 本地媒体流    let peerConnection = null; // RTCPeerConnection对象    // 开始呼叫方法    const startCall = async () => {    console.log('开始');      try {        // 获取本地媒体流（视频和音频）        localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });        // 将本地媒体流绑定到本地视频元素        localVideo.value.srcObject = localStream;        // 创建RTCPeerConnection对象        peerConnection = new RTCPeerConnection();        // 将本地媒体流中的轨道添加到peerConnection中        localStream.getTracks().forEach(track => {          peerConnection.addTrack(track, localStream);        });        // 当远程流到达时，将其绑定到远程视频元素        peerConnection.ontrack = (event) => {          remoteVideo.value.srcObject = event.streams[0];        };        // 创建一个offer并设置为本地描述        const offer = await peerConnection.createOffer();        await peerConnection.setLocalDescription(offer);        // 发送offer给对方并等待对方的answer        // 在实际应用中，这部分需要与信令服务器交互来完成        // 示例：通过Socket 发送offer给对方        // Socket .send(JSON.stringify({ type: 'offer', offer: offer }));      } catch (error) {        console.error('Error starting call:', error);      }    };    // 结束通话方法    const endCall = () => {      // 停止本地媒体流中的所有轨道      localStream.getTracks().forEach(track => track.stop());      // 关闭peerConnection连接      peerConnection.close();      // 重置视频元素的srcObject      localVideo.value.srcObject = null;      remoteVideo.value.srcObject = null;    };    // 初始化操作，例如连接信令服务器等    onMounted(() => {          });    // 返回给模板部分需要使用的变量和方法    return {      localVideo,      remoteVideo,      startCall,      endCall    };  }};

https://juejin.cn/post/7266417942182608955https://juejin.cn/post/7266417942182608955https://juejin.cn/post/7170767923005358094https://juejin.cn/post/7170767923005358094webrtc一对一多对多音视频通话开发第一集_哔哩哔哩_bilibili项目地址：zou-hong-run/webrtc_one2one_many2many (github.com), 视频播放量 1177、弹幕量 0、点赞数 29、投硬币枚数 20、收藏人数 79、转发人数 4, 视频作者 red润, 作者简介 学习成份复杂男 学习讨论群：811710917，相关视频：webrtc一对一多对多音视频通话教程第八集，webrtc一对一多对多音视频通话教程第十集，webrtc多人音视频通话教程第十一集，webrtc多人音视频通话教程第十三集，webrtc多人音视频通话教程第十四集（完结），webrtc一对一多对多音视频通话教程第七集，webrtc一对一多对多音视频通话教程第五集，【手把手WebRTC音视频SDK】22-基础架构-封装采集数据为MediaFrame结构，webrtc一对一多对多音视频通话教程第六集，webrtc一对一多对多音视频通话教程第四集https://www.bilibili.com/video/BV1gK411v7wy/?spm_id_from=333.788&vd_source=3e36960fd2cef2338d62a0f86944333aWebRTC 使用入门详解_webrtc教程-CSDN博客文章浏览阅读1.8k次，点赞6次，收藏15次。文档来源https://webrtc.org/getting-started/media-devices?hl=zh-cn。_webrtc教程https://blog.csdn.net/qq_47658204/article/details/130177016

实现 ( 这个是采用了 引入sip-0.13.6.min.js(已封装好的脚本实现的) )

封装的组件, 代码采用父子传参, pinia传参, 后续因为视频通话,音频通话免登录需求, 需要独立项目外, 做了 http 携带参数... 

已知问题: 项目上线后, http浏览器不支持麦克风和摄像头(本地支持).

解决方案: 换 https 即可

 父

const handleVideoPhone = async (type, row) => {  // 存储对象到 Pinia 中  // const myObject = { type, row }  // await myStore.setMyObject(myObject)  // console.log(myStore.videoData, '取到了-------------');  // 命名的路由  // router.push({ name: 'callVA', params: { userId: '123' } })  // message.alertError("当前设备不在线，无法进行视频通话！")  // 用户id 设备id 音视频类型type // 0 音屏，1 视频-------  const url = `https://www.XXXXXX.com/callVA?type=${type}&id=${row.aqmPkId}&deviceid=${row.deviceId}`  // const url = `http://localhost:8388/callVA?type=${type}&id=${row.aqmPkId}&deviceid=${row.deviceId}`  // console.log(url, 'url-------------------');  // window.location.href = url  // window.open(url, '_blank');  // 在新窗口中打开链接  window.open(url, 'video');  // 在新窗口中打开链接}

子 

          
{{ status }}
                                    {{        v_type == '1' ? '开启视频' : '开启音频'      }}                                                    {{        v_type == '1' ? '挂断视频' : '挂断音频'      }}                                                                  // import { useVideoStore } from '../../stores/myvideo' // pinia// import { useRouter } from 'vue-router' // router//  @/api/drone/ws// import * as wsApi from '../../api/ws/index' // apiimport { onMounted, onUnmounted, ref } from 'vue'import axios from 'axios'// const myStore = useVideoStore() // pinia// const router = useRouter()// 获取存储在 Pinia 中的对象// let myObject = myStore.videoData// console.log(myObject,myObject?.type, myObject?.row, 'ccccccccccccccccccc')/** * 发起视频通话 */const status = ref('等待开启通话...')const v_type = ref() // 0 音屏，1 视频const userId = ref('') //用户idconst deviceId = ref('') // 用户设备id// const access_token = ref('') // tokenconst socket = ref() // new websocketconst activeMessage = ref() // websockt收到的信息let timer: any //心跳定时器// 创建本地视频和远程视频的引用-------------------------------// const localVideo = ref(null) // 播放本地视频const remoteVideo = ref(null) // 播放远程视频let userAgent: any // 注册 UAlet sipsession: any // SIP 如果sipsession存在，则调用它的terminate()方法来终止会话const sip_id = ref() // 用户设备 sip_idconst sip_host = ref() // 本地登录 sip服务器地址 sip_host// 组件加载const handleVideoPhone = async (  type: string,  row: { id?: string | null; deviceId: any; aqmPkId?: any }) => {  // console.log(type, row)  userId.value = row?.aqmPkId // 用户id 1011  deviceId.value = row?.deviceId // 用户 设备id xxxxxxxxxxxxx  v_type.value = type // 0 音屏，1 视频-------  // 获取 设备sip_id  // let res = await wsApi.getUserDeviceSipId(`${deviceId.value}`)  // console.log(res, '===========');  // if (res) {  //   console.log(111);  //   sip_id.value = res.sip_id  //   console.log('用户id------', userId.value, res)  // }  const res = await axios.get(    `https://www.XXXXXX.com:1443/admin-api/drone/ws/getUserDeviceSipId/${deviceId.value}`  )  if (res.status === 200) {    // console.log('设备sip_id', res)    sip_id.value = res.data.data.sip_id  } else {    console.log('接口未连接')  }  websocketFun() //创建WebSocket连接}// --------------------------------------------------// 3.发送音视频通话请求，成功后配置通话参数,发起通话并监听拨打结果并做相应处理const call = async () => {  // 发送音视频通话请求通知设备  const video = {    act: 'ma_set_sip_info', // 请求标识    v_type: v_type.value, //视频 1 语音 0    user_id: userId.value // 用户id  }  status.value = '连接中...'  // console.log(video);  socket.value.send(JSON.stringify(video))  // 长链接发送报文指定设备开启推流  socket.value.send(JSON.stringify({ act: 'ma_open_rtsp', device_id: deviceId.value }))  // console.log('设备推流')  // 长链接发送报文指定设备关闭推流  // socket.value.send(JSON.stringify({ act: 'ma_stop_rtsp', device_id: deviceId.value }))  // 服务器地址  // var host = document.getElementById('sip_host').value  var host = sip_host.value  //呼叫目标，可以是设备的sip_id，或者群组通话的room_id  // var to = document.getElementById('device_sipId').value  // var to = deviceId.value  var to = String(sip_id.value)  console.log(host, to, '测试')  sipsession = await userAgent.invite(to + '@' + host, {    sessionDescriptionHandlerOptions: {      constraints: {        audio: true,        // video: true //音频通话则为false        video: v_type.value == '1' ? true : false //音频通话则为false      }    }  })  // 当呼叫被接受时触发的事件  sipsession.on('accepted', async function () {    status.value = '通话中...'    console.log('呼叫接收，开始通话')    // 我们需要检查 peer connection 来确定添加了哪个轨道    var pc = await sipsession.sessionDescriptionHandler.peerConnection    // 获取远程轨道    var remoteStream = new MediaStream()    // console.log(remoteStream, '远程轨道')    pc.getReceivers().forEach(function (receiver) {      remoteStream.addTrack(receiver.track)    })    //此处remoteVideo为一个video标签，将远程轨道绑定到它上面并播放    remoteVideo.value.srcObject = remoteStream    remoteVideo.value.play()    if (pc.getSenders()) {      // console.log('开启本地视频')      // var localStream = new MediaStream()      // // var localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true })      // pc.getSenders().forEach(function (sender) {      //   localStream.addTrack(sender.track)      // })      // // localVideo 是一个 video 标签，将本地轨道绑定到它上面并播放      // localVideo.value.srcObject = localStream      // localVideo.value.play()    }  })  // xu获取本地媒体流（视频和音频）  // xu await getLocalStream()}// 获取本地媒体流（视频和音频）// const getLocalStream = async () => {//   const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true })//   // 将本地媒体流绑定到本地视频元素//   localVideo.value.srcObject = stream//   localVideo.value.play()//   localStream.value = stream//   return stream// }// 挂断通话const endCall = async () => {  // 如果sipsession存在，则调用它的terminate()方法来终止会话  if (sipsession) {    await sipsession.terminate()    status.value = '已挂断...'  }  //  // path: 'user-device', name: 'DroneUserDevice', // 跳转回：人员设备绑定页面  console.log('挂断，关闭当前窗口')  // router.push({ name: 'DroneUserDevice', params: { userId: '123' } })  // 关闭当前窗口  // window.close();}//--------------------------------------------------// websocket 连接Socket信令服务器const websocketFun = async () => {  const res = await axios.get('https://www.XXXXXX.com:1443/admin-api/drone/ws/getCurrentAqmUser')  if (res.status !== 200) {    console.log('accessToken--------------')    return  }  socket.value = new WebSocket('wss://XXXXXX.com/wss')  socket.value.onopen = async function () {    // socket.value = Sock // websocket    // 管理员账号登录    const message = {      act: 'ma_login', // 管理员登录      // user_name: 'admin',      // access_token: (await wsApi.getCurrentAqmUserInfo()).accessToken // 接口返回token，会过期      access_token: res.data.data.accessToken // 接口返回token，会过期    }    console.log(message)    socket.value.send(JSON.stringify(message))    if (timer) clearInterval(timer) //清空上一个定时器    timer = setInterval(() => {      // 获取长链接实时、状态等心跳包      return socket.value.send(JSON.stringify({ act: 'ma_get_active_devices' }))    }, 5000)  }  socket.value.onmessage = async (event) => {    // 处理收到的消息    activeMessage.value = JSON.parse(event.data)    // console.log('收到消息:', activeMessage.value)    // 登录    if (activeMessage.value.cmd == 'ma_login') {      if (activeMessage.value.status == true) {        // console.log(activeMessage.value)        // 1. 获取sip对象注册信息        let sip_info = activeMessage.value.admin_info.sip_info        sip_host.value = sip_info.sip_host // 服务器地址sip_host 拨打电话        // sip_id.value = sip_info.sip_id // 呼叫目标        // console.log('登录成功: sip_info =', sip_info)        regUserAgent(sip_info) // 注册UA      } else {        console.log(activeMessage.value.msg)      }    }    // 心跳包()设备活跃  获取长链接实时、状态等心跳包    else if (activeMessage.value.cmd == 'ma_get_active_devices') {      if (activeMessage.value.status == true) {        // console.log(activeMessage.value.msg)        // console.log('心跳包：', activeMessage.value)        // let res = activeMessage.value.data.filter((item) => {        //   // console.log(item.user_info.user_id)        //   return item.user_info.user_id == userId.value        // })        // sip_id.value = res[0].user_info.sip_id // 设备 sip_id,心跳包        // console.log(res, sip_id.value, 'ccccccccccccccccccccc')      } else {        console.log(activeMessage.value.msg)      }    }    // 发送音视频通话请求通知设备    else if (activeMessage.value.cmd == 'ma_set_sip_info') {      if (activeMessage.value.status == true) {        // console.log('发送音视频通话请求通知设备', activeMessage.value.msg, activeMessage.value)        // flag.value = true // 标杆 视频电话是否接听      } else {        console.log(activeMessage.value.msg)        // flag.value = false // 标杆 视频电话是否接听        // console.log(flag.value)        endCall() // 挂断电话, 跳回页面      }    } else if (activeMessage.value.cmd == 'ma_open_rtsp') {      if (activeMessage.value.status == true) {        // console.log('发送报文指定设备推流', activeMessage.value)      } else {        activeMessage.value.status == true      }    } else if (activeMessage.value.cmd == 'ma_stop_rtsp' && activeMessage.value.status == true) {      if (activeMessage.value.status == true) {        // console.log('发送报文指定设备关闭推流', activeMessage.value)      } else {        console.log(activeMessage.value.msg)      }    }  }  socket.value.onclose = function (event) {    clearInterval(timer) // 停止心跳检测    console.log('Sock连接已关闭', event.code, event.reason)    // 连接已关闭，执行清理操作  }  socket.value.onerror = function (error) {    clearInterval(timer) // 停止心跳检测    console.error('Sock错误:', error)    // 处理Sock错误  }}// 2.使用sip_info中的参数注册UA对象，监听注册结果//注册UAconst regUserAgent = async (sip_info) => {  let sip_id = sip_info.sip_id,    sip_pwd = sip_info.sip_pwd,    sip_host = sip_info.sip_host,    wss_url = sip_info.wss_url,    stun_host = sip_info.stun_host,    turn_host = sip_info.turn_host,    turn_pwd = sip_info.turn_pwd,    turn_user = sip_info.turn_user,    userAgentStatus = false  //配置参数  let config = {    uri: sip_id + '@' + sip_host, //此sip_id为管理员的sip_id    transportOptions: {      wsServers: [wss_url],      connectionTimeout: 30    },    authorizationUser: sip_id,    password: sip_pwd,    sessionDescriptionHandlerFactoryOptions: {      peerConnectionOptions: {        rtcConfiguration: {          iceServers: [            { urls: 'stun:' + stun_host },            {              urls: 'turn:' + turn_host,              username: turn_user,              credential: turn_pwd            }          ]        }      }    }  }  //创建user agent  userAgent = await new SIP.UA(config)  //注册成功监听处理  userAgent.on('registered', () => {    console.log('代理注册成功: registered ok')    userAgentStatus = true // 模拟注册成功    // let regUA_msgEl: any = document.getElementById('regUA_msg')    // regUA_msgEl.innerText = '用户代理注册成功！'  })  //注册失败监听处理  userAgent.on('registrationFailed', (response, cause) => {    console.log('代理注册失败: registrationFailed, ', response, cause)    userAgentStatus = false    // let regUA_msgEl: any = document.getElementById('regUA_msg')    // regUA_msgEl.innerText = '用户代理注册失败！'  })  userAgent.on('invite', function (session) {    var url = session.remoteIdentity.uri.toString() + '--->call'    var isaccept = confirm(url)    if (isaccept) {      //接收来电      session.accept({        sessionDescriptionHandlerOptions: {          constraints: {            audio: true,            video: true          }        }      })      sipsession = session      // 接听通话      session.on('accepted', function () {        // We need to check the peer connection to determine which track was added        var pc = session.sessionDescriptionHandler.peerConnection        // console.log(pc)        // console.log(pc.getLocalStreams())        // Gets remote tracks        var remoteStream = new MediaStream()        pc.getReceivers().forEach(function (receiver) {          remoteStream.addTrack(receiver.track)        })        remoteVideo.value.srcObject = remoteStream        remoteVideo.value.play()        if (pc.getSenders()) {          // var localStream = new MediaStream()          // pc.getSenders().forEach(function (sender) {          //   localStream.addTrack(sender.track)          // })          // localVideo.value.srcObject = localStream          // localVideo.value.play()        }      })    } else {      //拒绝来电      session.reject()    }  })}// watch(videoVisible, (newVal, oldVal) => {//   // console.log(newVal,oldVal);//   if (newVal == false) {//     socket.value.close() // 断开websocket//     endCall() // 关闭视频//   }// })/** 初始化 **/onMounted(async () => {  // getList()  // websocketFun() //创建WebSocket连接  // id.value = route.params.id  // let myObject = myStore.videoData  // console.log(myObject, myObject?.type,  myObject?.type, 'ccccccccccccccccccc')  // 获取当前页面的 URL 地址  const urlParams = new URLSearchParams(window.location.search)  // 获取参数值  const type = urlParams.get('type')  const id = urlParams.get('id')  const deviceId = urlParams.get('deviceid')  const myObject = {    type,    row: {      aqmPkId: id,      deviceId    }  }  // 现在 type、id 和 deviceId 分别包含了 URL 中对应的数值  handleVideoPhone(myObject.type, myObject.row)  // const ccc = 'xxxxxxxxxxxxxx';  // const url = `https://www.XXXXXX.com:1443/drone/ws/getUserDeviceSipId/?deviceId=${ccc}`;  // const res = await axios.get(url);  // if (res.status === 200) {  //   console.log('设备sip_id', res);  //   sip_id.value = res.data.sip_id;  // } else {  //   console.log('接口未连接');  // }})// 在组件离开时销毁定时器onUnmounted(() => {  // socket.value.close() // 清空websocket  clearInterval(timer)})