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

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

小demo

  
     
     
    开始视频 
    结束视频 
  

http://juejin.cn/post/7266417942182608955http://juejin.cn/post/7266417942182608955http://juejin.cn/post/7170767923005358094http://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一对一多对多音视频通话教程第四集http://www.bilibili.com/video/BV1gK411v7wy/?spm_id_from=333.788&vd_source=3e36960fd2cef2338d62a0f86944333aWebRTC 使用入门详解_webrtc教程-CSDN博客文章浏览阅读1.8k次，点赞6次，收藏15次。文档来源http://webrtc.org/getting-started/media-devices?hl=zh-cn。_webrtc教程http://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 = `http://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' ? '挂断视频' : '挂断音频'
      }}
      <!-- 
 用户代理状态 
 -->
    
    
      
      <!-- 
        
       -->
      
      
        
        <!-- 
          
         -->