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

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

小demo

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');  // 在新窗口中打开链接 }

子