JsSIP+FreeSwitch+Vue实现WebRtc音视频通话

效果

让同事帮我测的,在两个电脑分别打开该页面,一个注册 1007 分机号,另一个注册 1005,然后拨打视频电话
在这里插入图片描述
在这里插入图片描述

依赖版本

  • jssip:3.6.1

  • freeswitch:1.10.5-release~64bit

  • vue:2.6.12

488错误解决

freeswitch 配置文件 sip_profiles/internal.xml 中添加:

<param name="apply-candidate-acl" value="rfc1918.auto"/>
<param name="apply-candidate-acl" value="wan.auto"/>

前端完整代码

<template><div class="test-sip"><el-switchv-model="logFlag"active-text="打开日志"inactive-text="关闭日志"></el-switch><div class="step"><h2>步骤 1:输入自己的分机号(1001-1019)</h2><div class="step-box"><el-inputv-model="userExtension"placeholder="请输入自己的分机号(1001-1010)"class="input-box":disabled="localStream !== null"></el-input><el-buttontype="primary"@click="registerUser"class="step-button":disabled="!userExtension || isRegisted">注册</el-button></div></div><div class="step"><h2>步骤 2:输入要呼叫的分机号(1001-1019)</h2><div class="step-box"><el-inputv-model="targetExtension"placeholder="请输入要呼叫的分机号(1001-1010)"class="input-box":disabled="!isRegisted"></el-input><el-buttontype="primary"@click="startCall(false)"class="step-button":disabled="!targetExtension || currentSession !== null">拨打语音电话</el-button><el-buttontype="primary"@click="startCall(true)"class="step-button":disabled="!targetExtension || currentSession !== null">拨打视频电话</el-button></div></div><div class="step"><h2>其他操作</h2><div class="step-box"><el-buttontype="primary"@click="hangUpCall"class="step-button":disabled="currentSession == null">挂断</el-button><el-buttontype="primary"@click="unregisterUser"class="step-button":disabled="!isRegisted">取消注册</el-button><el-buttonv-if="!localStream"type="primary"class="step-button"@click="captureLocalMedia":disabled="currentSession !== null">测试本地设备</el-button><el-buttonv-elsetype="primary"class="step-button"@click="stopLocalMedia":disabled="currentSession">停止测试本地设备</el-button></div></div><div class="step"><h2>音频:</h2><div class="step-box"><audio id="audio" autoplay></audio></div></div><div class="step"><h2>视频:</h2><div class="step-box"><video id="meVideo" playsinline autoplay></video><video id="remoteVideo" playsinline autoplay></video></div></div></div>
</template><script>
import JsSIP from "jssip";export default {name: "TestSip",data() {return {logFlag: false, // 是否打开日志userExtension: "", // 当前用户分机号targetExtension: "", // 目标用户分机号userAgent: null, // 用户代理实例password: "xxxx", // 密码serverIp: "xxxx.xxxx.x", // 服务器ipisRegisted: false, // 是否已注册localStream: null, // 本地流incomingSession: null, // 呼入的会话outgoingSession: null, // 呼出的会话currentSession: null, // 当前会话myHangup: false, // 是否我方挂断audio: null, // 音频meVideo: null, // 我方视频remoteVideo: null, // 对方视频constraints: {audio: true,video: {width: { max: 1280 },height: { max: 720 },},},};},computed: {ws_url() {return `ws://${this.serverIp}:5066`;},},watch: {logFlag: {handler(nV, oV) {nV ? JsSIP.debug.enable("JsSIP:*") : JsSIP.debug.disable("JsSIP:*");},immediate: true,},},mounted() {this.audio = document.getElementById("audio");this.meVideo = document.getElementById("meVideo");this.remoteVideo = document.getElementById("remoteVideo");},methods: {// 获取本地媒体设备captureLocalMedia() {console.log("获取到本地音频/视频");navigator.mediaDevices.getUserMedia(this.constraints).then((stream) => {console.log("获取到本地媒体流");this.localStream = stream;// 连接本地麦克风if ("srcObject" in this.audio) {this.audio.srcObject = stream;} else {this.audio.src = window.URL.createObjectURL(stream);}// 如果有视频流,则连接本地摄像头if (stream.getVideoTracks().length > 0) {if ("srcObject" in this.meVideo) {this.meVideo.srcObject = stream;} else {this.meVideo.src = window.URL.createObjectURL(stream);}}}).catch((e) => {this.$modal.msgError("获取用户媒体设备错误: " + e.name);});},// 停止本地媒体设备stopLocalMedia() {if (this.localStream) {this.localStream.getTracks().forEach((track) => track.stop());this.localStream = null;// 清空音频和视频的 srcObjectthis.clearMedia("audio");this.clearMedia("meVideo");}},// 验证分机号,因为 freeswitch 默认会创建这些分机号isValidExtension(extension) {const extNumber = parseInt(extension, 10);return extNumber >= 1001 && extNumber <= 1019;},// 注册registerUser() {if (!this.isValidExtension(this.userExtension)) {this.$modal.msgError("分机号无效,请输入1001-1019之间的分机号");return;}const configuration = {sockets: [new JsSIP.WebSocketInterface(this.ws_url)],uri: `sip:${this.userExtension}@${this.serverIp};transport=ws`,password: this.password,contact_uri: `sip:${this.userExtension}@${this.serverIp};transport=ws`,display_name: this.userExtension,register: true, //指示启动时JsSIP用户代理是否应自动注册session_timers: false, //关闭会话计时器(根据RFC 4028)};this.userAgent = new JsSIP.UA(configuration);this.userAgent.on("connecting", () => console.log("WebSocket 连接中"));this.userAgent.on("connected", () => console.log("WebSocket 连接成功"));this.userAgent.on("disconnected", () =>console.log("WebSocket 断开连接"));this.userAgent.on("registered", () => {this.isRegisted = true;console.log("用户代理注册成功");});this.userAgent.on("unregistered", () => {this.isRegisted = false;console.log("用户代理取消注册");});this.userAgent.on("registrationFailed", (e) => {this.$modal.msgError(`用户代理注册失败: ${e.cause}`);});// this.userAgent.on("registrationExpiring", (e) => {//   /*//     在注册到期前几秒钟触发。拦截默认重新注册事件。//   *///   console.warn("registrationExpiring");// });this.userAgent.on("newRTCSession", (e) => {console.log("新会话: ", e);if (e.originator == "remote") {console.log("接听到来电");this.incomingSession = e.session;this.sipEventBind(e);} else {console.log("打电话");this.outgoingSession = e.session;this.outgoingSession.on("connecting", (data) => {console.info("onConnecting - ", data.request);this.currentSession = this.outgoingSession;this.outgoingSession = null;});this.outgoingSession.connection.addEventListener("track", (event) => {console.log("接收到远端track:", event.track);this.trackHandle(event.track, event.streams[0]);});}});this.userAgent.start();console.log("用户代理启动");},sipEventBind(remotedata, callbacks) {//接受呼叫时激发remotedata.session.on("accepted", () => {console.log("onAccepted - ", remotedata);if (remotedata.originator == "remote" && this.currentSession == null) {this.currentSession = this.incomingSession;this.incomingSession = null;console.log("setCurrentSession:", this.currentSession);}});remotedata.session.on("sdp", (data) => {console.log("onSDP, type - ", data.type, " sdp - ", data.sdp);});remotedata.session.on("progress", () => {console.log(remotedata);console.log("onProgress - ", remotedata.originator);if (remotedata.originator == "remote") {console.log("onProgress, response - ", remotedata.response);const isVideoCall = remotedata.request.body.includes("m=video");this.$modal.confirm(`检测到${remotedata.request.from.display_name}${isVideoCall ? "视频" : "语音"}来电,是否接听?`).then(() => {//如果同一电脑两个浏览器测试则video改为false,这样被呼叫端可以看到视频,两台电脑测试让双方都看到改为trueremotedata.session.answer({mediaConstraints: { audio: true, video: isVideoCall },});}).catch(() => {this.hangUpCall();return;});}});remotedata.session.on("peerconnection", () => {console.log("onPeerconnection - ", remotedata.peerconnection);if (remotedata.originator == "remote" && this.currentSession == null) {remotedata.session.connection.addEventListener("track", (event) => {console.info("接收到远端track:", event.track);this.trackHandle(event.track, event.streams[0]);});}});//确认呼叫后激发remotedata.session.on("confirmed", () => {console.log("onConfirmed - ", remotedata);if (remotedata.originator == "remote" && this.currentSession == null) {this.currentSession = this.incomingSession;this.incomingSession = null;console.log("setCurrentSession - ", this.currentSession);}});// 挂断处理remotedata.session.on("ended", () => {this.endedHandle();console.log("call ended:", remotedata);});remotedata.session.on("failed", (e) => {this.$modal.msgError("会话失败");console.error("会话失败:", e);});},trackHandle(track, stream) {const showVideo = () => {navigator.mediaDevices.getUserMedia({...this.constraints,audio: false, // 不播放本地声音}).then((stream) => {this.meVideo.srcObject = stream;}).catch((error) => {that.$modal.msgError(`${error.name}${error.message}`);});};// 根据轨道类型选择播放元素if (track.kind === "video") {// 使用 video 元素播放视频轨道this.remoteVideo.srcObject = stream;showVideo();} else if (track.kind === "audio") {// 使用 audio 元素播放音频轨道this.audio.srcObject = stream;}},endedHandle() {this.clearMedia("meVideo");this.clearMedia("remoteVideo");this.clearMedia("audio");if (this.myHangup) {this.$modal.msgSuccess("通话结束");} else {this.$modal.msgWarning("对方已挂断!");}this.myHangup = false;this.currentSession = null;},startCall(isVideo = false) {if (!this.isValidExtension(this.targetExtension)) {this.$modal.msgError("分机号无效,请输入1001-1019之间的分机号");return;}if (this.userAgent) {try {const eventHandlers = {progress: (e) => console.log("call is in progress"),failed: (e) => {console.error(e);this.$modal.msgError(`call failed with cause: ${e.cause}`);},ended: (e) => {this.endedHandle();console.log(`call ended with cause: ${e.cause}`);},confirmed: (e) => console.log("call confirmed"),};console.log("this.userAgent.call");this.outgoingSession = this.userAgent.call(`sip:${this.targetExtension}@${this.serverIp}`, // :5060{mediaConstraints: { audio: true, video: isVideo },eventHandlers,});} catch (error) {this.$modal.msgError("呼叫失败");console.error("呼叫失败:", error);}} else {this.$modal.msgError("用户代理未初始化");}},hangUpCall() {this.myHangup = true;this.outgoingSession = this.userAgent.terminateSessions();this.currentSession = null;},clearMedia(mediaNameOrStream) {let mediaSrcObject = this[mediaNameOrStream].srcObject;if (mediaSrcObject) {let tracks = mediaSrcObject.getTracks();for (let i = 0; i < tracks.length; i++) {tracks[i].stop();}}this[mediaNameOrStream].srcObject = null;},unregisterUser() {console.log("取消注册");this.userAgent.unregister();this.resetState();},resetState() {this.userExtension = "";this.targetExtension = "";this.isRegisted = false;},},
};
</script><style lang="scss" scoped>
.test-sip {padding: 30px;.step {margin-bottom: 20px;.step-box {display: flex;align-items: flex-start;gap: 20px;.input-box {width: 350px;}.step-button {align-self: flex-start;}#meVideo,#remoteVideo {width: 360px;background-color: #333;}#meVideo {border: 2px solid red;}#remoteVideo {border: 2px solid blue;}}}
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/26295.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于WPF技术的换热站智能监控系统06--实现左侧故障统计

1、区域划分 2、ui实现 这里使用的是livechart的柱状图呈现的 3、运行效果 走过路过不要错过&#xff0c;点赞关注收藏又圈粉&#xff0c;共同致富&#xff0c;为财务自由作出贡献

Linux基础IO【II】

今天&#xff0c;我们接着在上一篇文章的基础上&#xff0c;继续学习基础IO。观看本文章之前&#xff0c;建议先看&#xff1a;Linux基础IO【I】&#xff0c;那&#xff0c;我们就开始吧&#xff01; 一.文件描述符 1.重新理解文件 文件操作的本质&#xff1a;进程和被打开文件…

DETR实现目标检测(一)-训练自己的数据集

1、DETR架构 DETR&#xff08;Detection Transformer&#xff09;是一种新型的目标检测模型&#xff0c;由Facebook AI Research (FAIR) 在2020年提出。DETR的核心思想是将目标检测任务视为一个直接的集合预测问题&#xff0c;而不是传统的两步或多步预测问题。这种方法的创新…

cesium 渐变虚线效果 PolylineDashMaterialProperty

cesium中有虚线材质PolylineDashMaterialProperty&#xff0c;可以在这个材质的基础上结合uv设置每个顶点的透明度&#xff0c;就能实现渐变的效果了。 一、原理&#xff1a;在glsl中结合uv设置每个顶点的透明度 vec2 st materialInput.st; material.alpha fragColor.a * (1…

Mongodb在UPDATE操作中使用$pull操作

学习mongodb&#xff0c;体会mongodb的每一个使用细节&#xff0c;欢迎阅读威赞的文章。这是威赞发布的第68篇mongodb技术文章&#xff0c;欢迎浏览本专栏威赞发布的其他文章。如果您认为我的文章对您有帮助或者解决您的问题&#xff0c;欢迎在文章下面点个赞&#xff0c;或者关…

链表题目之指定区间处理

前言 链表中有一些题目是需要知道并且记住对应的技巧的&#xff0c;有一些题目就是基本的链表技巧手动模拟推演注意细节等。 对于需要知道并且记住对应技巧的题目会有专门的一栏进行讲解&#xff0c;此类题目主要有&#xff1a;相交链表、环形链表、回文链表等&#xff0c;这些…

LeetCode | 27.移除元素

这道题的思路和26题一模一样&#xff0c;由于要在元素组中修改&#xff0c;我们可以设置一个index表示目前要修改原数组的第几位&#xff0c;由于遍历&#xff0c;访问原数组永远会在我们修改数组之前&#xff0c;所以不用担心数据丢失的问题&#xff0c;一次遍历数组&#xff…

18. 四数之和 - 力扣

1. 题目 给你一个由 n 个整数组成的数组 nums &#xff0c;和一个目标值 target 。请你找出并返回满足下述全部条件且不重复的四元组 [nums[a], nums[b], nums[c], nums[d]] &#xff08;若两个四元组元素一一对应&#xff0c;则认为两个四元组重复&#xff09;&#xff1a; 0 …

LVS+Keepalived NGINX+Keepalived 高可用群集实战部署

Keepalived及其工作原理 Keepalived 是一个基于VRRP协议来实现的LVS服务高可用方案&#xff0c;可以解决静态路由出现的单点故障问题。 VRRP协议&#xff08;虚拟路由冗余协议&#xff09; 是针对路由器的一种备份解决方案由多台路由器组成一个热备组&#xff0c;通过共用的…

五、LVS原理

目录 5.1 LVS 相关原理 5.1.1 LVS集群的体系结构以及特点 5.1.1.1 LVS简介 5.1.1.2 LVS体系结构 5.1.1.3 LVS相关术语 5.1.1.4 LVS工作模式 5.1.1.5 LVS调度算法 5.1.2 LVS-DR集群介绍 5.1.2.1 LVS-DR模式工作原理 5.1.2.2 LVS-DR模式应用特点 5.1.2.3 LVS-DR模式ARP抑制 5.1…

VCS基本仿真

这里记录三种仿真方式&#xff1a; 第一种是将verilog文件一个一个敲在终端上进行仿真&#xff1b; 第二种是将多个verilog文件的文件路径整理在一个文件中&#xff0c;然后进行仿真&#xff1b; 第三种是利用makefile文件进行仿真&#xff1b; 以8位加法器为例&#xff1a; …

一二三应用开发平台应用开发示例(2)——创建应用、模块、实体及配置模型

创建应用 文档管理系统对于开发平台是一个业务应用。 业务应用是通过平台内置的数据字典来维护的&#xff0c;因此访问系统管理模块下的数据字典管理功能&#xff0c;在实体配置分组下找到“应用编码”&#xff0c;点击行记录上的“字典项”。 在打开的新窗口中&#xff0c;在…

超详解——Python 元组详解——小白篇

目录 1. 元组简介 创建元组 2. 元组常用操作 访问元组元素 切片操作 合并和重复 成员操作符 内置函数 解包元组 元组方法 3. 默认集合类型 作为字典的键 作为函数参数 作为函数的返回值 存储多种类型的元素 4.元组的优缺点 优点 缺点 5.元组的使用场景 数据…

如何降低pcdn的延迟?

要降低P2P CDN的延迟&#xff0c;可以采取以下操作&#xff1a; 一&#xff0e;优化网络连接&#xff1a; 1、使用有线网络连接替代无线连接&#xff0c;因为有线连接通常提供更稳定的数据传输。 2、升级家庭或企业路由器&#xff0c;选择性能更好的路由器以提高网络传输速度…

6月11号作业

思维导图 #include <iostream> using namespace std; class Animal { private:string name; public:Animal(){}Animal(string name):name(name){//cout << "Animal&#xff1b;有参" << endl;}virtual void perform(){cout << "讲解员的…

【FineReport】帆软调用服务器的kettle作业

1、编写自定义函数并编译 package com.fr.function;import ch.ethz.ssh2.ChannelCondition; import ch.ethz.ssh2.Connection; import ch.ethz.ssh2.Session; import ch.ethz.ssh2.StreamGobbler; import com.fr.script.AbstractFunction;import java.io.BufferedReader; impo…

【web APIs】快速上手Day02

文章目录 Web APIs - 第2天事件事件监听案例一 :京东点击关闭顶部广告案例二&#xff1a;随机点名案例拓展知识-事件监听版本 双击事件 事件类型鼠标事件综合案例-轮播图完整版 焦点事件综合案例-小米搜索框案例 键盘事件文本事件 事件对象综合案例-按下回车发布评论 环境对象回…

算法day27

第一题 515. 在每个树行中找最大值 首先是遍历每层的节点&#xff0c;将每一层最大值的节点的值保留下来&#xff0c;最后将所有层的最大值的表返回&#xff1b;具体的遍历每层节点的过程如上一篇故事&#xff1b; 综上所述&#xff0c;代码如下&#xff1a; /*** Definition …

数据结构与算法题目集(中文) 6-3 求链表的表长

该代码使用循环遍历链表来计算链表的长度。代码首先定义了一个整数变量i用于计数&#xff0c;并初始化为0。然后进入一个while循环&#xff0c;条件为链表L非空。在循环中&#xff0c;通过L L->Next来遍历链表中的每一个节点&#xff0c;并将计数变量i递增。最终返回计数变…

2024海南省大数据教师培训-Hadoop集群部署

前言 本文将详细介绍Hadoop分布式计算框架的来源&#xff0c;架构和应用场景&#xff0c;并附上最详细的集群搭建教程&#xff0c;能更好的帮助各位老师和同学们迅速了解和部署Hadoop框架来进行生产力和学习方面的应用。 一、Hadoop介绍 Hadoop是一个开源的分布式计算框架&…