WebRtc 视频通话,语音通话实现方案

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

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

小demo

<template><div><video ref="localVideo" autoplay muted></video> <!-- 本地视频元素，用于显示本地视频 --><video ref="remoteVideo" autoplay></video> <!-- 远程视频元素，用于显示远程视频 --><button @click="startCall">开始视频</button> <!-- 点击按钮开始呼叫 --><button @click="endCall">结束视频</button> <!-- 点击按钮结束通话 --></div>
</template><script lang="ts">
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();// 重置视频元素的srcObjectlocalVideo.value.srcObject = null;remoteVideo.value.srcObject = null;};// 初始化操作，例如连接信令服务器等onMounted(() => {});// 返回给模板部分需要使用的变量和方法return {localVideo,remoteVideo,startCall,endCall};}
};
</script>

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

子

<template><div style="width: 100%; height: 100%"><!-- /* -webkit-background-clip: text; */ --><h1style="letter-spacing: 3px;text-align: center;background-image: linear-gradient(to top, #89ceeb, #00e7ee);-webkit-text-fill-color: transparent;background-clip: text;">{{ status }}</h1><div style="display: flex; align-items: center; justify-content: center"><dv-decoration-6 v-if="status === '通话中...'" style="width: 300px; height: 30px" /><!-- <dv-decoration-6 style="width:300px;height:30px;" /> --></div><div style="margin: 30px; text-align: center"><!-- 开始呼叫 --><el-button type="primary" round @click="call()">{{v_type == '1' ? '开启视频' : '开启音频'}}</el-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!-- 同意 --><!-- <button @click="acceptCall">同意视频</button> -->&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!-- 挂断 --><el-button type="danger" round @click="endCall">{{v_type == '1' ? '挂断视频' : '挂断音频'}}</el-button><!-- <p id="regUA_msg"> 用户代理状态 </p> --></div><div style="display: flex; justify-content: space-evenly; align-items: center; width: 100%"><!-- 本地视频元素，用于显示本地视频 --><!-- <divstyle="width: 800px;height: 450px;padding: 10px;margin: 10px;border: 3px solid gray;border-radius: 5px;box-sizing: border-box;"><video style="width: 100%; height: 100%" ref="localVideo" autoplay muted></video></div> --><!-- 远程视频元素，用于显示远程视频 --><divstyle="/* width: 800px;height: 450px; */width: 80%;/* height: 100%; */padding: 10px;margin: 10px;border: 3px solid gray;border-radius: 5px;box-sizing: border-box;"><video style="width: 100%; height: 100%" ref="remoteVideo" autoplay></video><!-- <audio v-else-if="v_type == '0'" controls><source ref="remoteVideo" type="audio/mp3" /></audio> --></div></div></div>
</template>
<script setup lang="ts">
// 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<string>('等待开启通话...')const v_type = ref<string>() // 0 音屏，1 视频const userId = ref('') //用户id
const deviceId = ref('') // 用户设备id
// const access_token = ref('') // token
const socket = ref() // new websocket
const activeMessage = ref<any>() // websockt收到的信息
let timer: any //心跳定时器// 创建本地视频和远程视频的引用-------------------------------
// const localVideo = ref<any>(null) // 播放本地视频
const remoteVideo = ref<any>(null) // 播放远程视频
let userAgent: any // 注册 UA
let sipsession: any // SIP 如果sipsession存在，则调用它的terminate()方法来终止会话
const sip_id = ref<string>() // 用户设备 sip_id
const sip_host = ref<string>() // 本地登录 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 1011deviceId.value = row?.deviceId // 用户 设备id xxxxxxxxxxxxxv_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 语音 0user_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').valuevar host = sip_host.value//呼叫目标，可以是设备的sip_id，或者群组通话的room_id// var to = document.getElementById('device_sipId').value// var to = deviceId.valuevar to = String(sip_id.value)console.log(host, to, '测试')sipsession = await userAgent.invite(to + '@' + host, {sessionDescriptionHandlerOptions: {constraints: {audio: true,// video: true //音频通话则为falsevideo: 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 = remoteStreamremoteVideo.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_infosip_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对象，监听注册结果
//注册UA
const 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_idtransportOptions: {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 agentuserAgent = 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 addedvar pc = session.sessionDescriptionHandler.peerConnection// console.log(pc)// console.log(pc.getLocalStreams())// Gets remote tracksvar remoteStream = new MediaStream()pc.getReceivers().forEach(function (receiver) {remoteStream.addTrack(receiver.track)})remoteVideo.value.srcObject = remoteStreamremoteVideo.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() // 清空websocketclearInterval(timer)
})
</script><style lang="scss" scoped></style>