JSSIP的使用及问题(webRTC,WebSockets)

简介

项目中有一个需要拨打电话的功能,要求实时的进行音频接听,并且可以在电话接听或者挂断等情况下做出相应的操作。jssip作为一个强大的实现实时通信的javascript库,这不门当户对了嘛。

jssip(官网: JsSIP - the Javascript SIP library)基于浏览器中的WebRTC和WebSockets技术进行实现SIP信令的传输和媒体流的交互。jssip通过websocket与SIP(一种用于建立、修改和终止多媒体会话的通信协议)服务器建立连接,使用sip协议进行会话控制和信令传输。资料说jssip可以进行音视频实时的通信,但是这里我只用了音频通信,因为项目中不用。

jssip能做的:

1、实时音频通话。

2、实时视频通话。

3、拨号监听、接听监听、挂断监听、拨号错误监听

操作

在通信之前需要自己有一个sip服务器,如何申请可以参考网上资料,我为什么不说,因为我也不清楚。

引入jssip:

1、通过npm install jssip

2、下载jssip库的js文件,保存到本地,然后引入,引入的对象名一般为JsSIP

基础示例:

设置配置项

const socket = new JsSIP.WebSocketInterface(`${注册地址,一般为wss://开头}`);
const configuration = {sockets: [socket],uri: `${注册的用户名}@${域名}`, // password: '密码', //
};

注册

const userAgent = new JsSIP.UA(configuration);
userAgent.start();

绑定事件:

userAgent.on('registered', () => {//注册成功会进入到这个回调中,在这里可以进行后续操作
})
// 监听来电/拨号事件
userAgent.on('newRTCSession', (e) => {rtcSession = e.session//rtcSession 变量定义在外部,这一步为了后续播放电话声音,需要用到这个变量,所以将他先保存在外部
});

**拨号:**这块代码一般放在注册成功回调中

const options = {//这是配置项,具体参数可以参考官网或其他资料'mediaConstraints': {//设置是否允许音频或者视频'audio': true, 'video': false,},rtcOfferConstraints: {offerToReceiveAudio: true,//只接受音频流offerToReceiveVideo: false,//只接受视频流}};
call = userAgent.call(`sip:${电话号码}@${域名}`, options);

这里的call变量我没有把定义的代码展示出来,可能会以为是内置对象,但是这里是在外部定义的一个普通变量,定义在外部为了方式作用域问题。

到这一步就可以进行正常的拨打电话了,但是我们仍然可以在中间插一脚,设置各种监听事件

//绑定电话接通事件
call.on("accepted", (e: any) => {console.log("通话接通")
})
//绑定电话挂断事件
call.on("ended", (e: any) => {console.log("通话挂断")
})
// 绑定通话失败事件
call.on("failed", (e: any) => {console.log("通话失败");
});
// 绑定通话取消事件
call.on("canceled", (e: any) => {console.log("通话被取消");
});

监听事件基本绑定完了,这里还有一点是:拨号之后可能网页的声音手机方可以听见,但是手机传过来的声音网页(电脑)听不见,这里需要设置电脑的媒体播放源。

const pc = rtcSession.connection;
const remoteStream = new MediaStream();
// 将远程音频轨道添加到远程流中
pc.getReceivers().forEach((receiver) => {if (receiver.track.kind === 'audio') {remoteStream.addTrack(receiver.track);}
});
audioElement = new Audio();//audioElement变量定义在外部,在其他方法中还要用到
audioElement.srcObject = remoteStream;
audioElement.play();

上面的这块代码一般放在电话接通回调中。

媒体播放之后可以释放,防止占用空间:

//如果媒体存在,暂停并且释放
if (audioElement) {audioElement.pause();audioElement.srcObject = null;audioElement.remove();
}

上面的这一块代码一般放在挂断电话回调中。

结尾

大概的流程就是这样,但是在开发的过程中遇到问题并不慌张,慌张的是没有遇到问题。最后总结一下这次使用的问题

问题(亏斯tion):

1、项目在本地运行之后,如果使用local的网址打开,类似:http://localhost:3089/,正常运行,但是如果是这样的http://192.168.110.177:3089/,项目跑起来了,但是只能注册成功,没有后续了。

分析:除本地运行外,jssip无法在http协议下(不安全)使用,因为此时获取不到浏览器的麦克风权限,所以无法调用。https下不存在,所以如果要在http下运行正常,配置白名单:

解决:chrome://flags/#unsafely-treat-insecure-origin-as-secure

操作之后再次访问,执行正常。

这就是全部的文章内容了,问题只有一个,因为我搞了好久,哈哈,其余没啥了,做个记录。

程序员PS:我们敲的不是代码,是理想,是白花花的马内!

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

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

相关文章

DP3复现代码运行逻辑全流程(六)—— gen_demonstration_adroit.sh 演示生成与可视化

用于生成演示、培训和评估的脚本都在 Scripts/ 文件夹中 DP3 通过 gen_demonstration 生成演示,即训练数据,例如: bash scripts/gen_demonstration_adroit.sh hammer 这将在 Adroit 环境中生成锤子任务的演示。数据将自动保存在 3D-Diffusion-Policy/…

Python常用字符串排序●sorted()函数--一行语句简洁实现

在Python等编程中,时常会用到字符串排序。 今天在这里只讲讲最常用的Python字符串排序。 同时,只讲sorted()函数方法。 给定一个字符串列表: sl [共和国, 中国, 中华人民共和国, 大中华, 人民共和国]。 第一种排序方法是不使用任何参数…

知从科技总经理受邀参加上海临港新片区商会“湖畔TECS”技术分享沙龙(第五期)

11月26日,上海知从科技有限公司创始人陈荣波先生受邀出席临港新片区商会 “湖畔TECS”技术分享沙龙(第五期)活动,并在活动上为参会嘉宾们做了主题分享。本次活动由临港新片区商会主办,智能网联汽车创新联盟协办&#x…

【MySQL数据库】Ubuntu下的mysql

目录 1,安装mysql数据库 2,mysql默认安装路径 3,my.cnf配置文件 4,mysql运用的相关指令及说明 5,数据库、表的备份和恢复 mysql是一套给我们提供数据存取的,更加有利于管理数据的服务的网络程序。下面…

PKCS#7、Bit padding(位填充)、Byte padding(字节填充)、Zero padding(零填充)

PKCS#7、Bit padding(位填充)、Byte padding(字节填充)、Zero padding(零填充)是密码学常见的填充方式。 Bit padding(位填充): 位填充可以应用于任意长度的消息。在消息…

Tomcat添加各种响应头 X-Download-Options、Permissions-Policy等

AI越来越火了,我们想要不被淘汰就得主动拥抱。推荐一个人工智能学习网站,通俗易懂,风趣幽默,最重要的屌图甚多,忍不住分享一下给大家。点击跳转到网站。 最近部署的项目被绿盟扫出来很多web漏洞,其中tomcat响应占了很大一部分。下面我们整理一下如何处理。 首先说说常见…

Docker与虚拟机:虚拟化技术的差异解析

在信息技术飞速发展的今天,虚拟化技术已成为现代IT架构不可或缺的一部分。而虚拟化从技术层面划分则分为以下几种: 完全虚拟化:虚拟机能够完全模拟底层硬件的特权指令的执行过程,客户操作系统无须进行修改。 硬件辅助虚拟化&#…

canvas保存图片

需求&#xff1a;上面有几个按钮&#xff0c;其中有一个切换是图片 用v-if会导致图片加载慢 实现方法&#xff1a; 一进来就加载&#xff0c;通过监听元素显示&#xff0c;用于控制canvas的宽高&#xff0c;从而达到隐藏的效果 组件dowolad.vue <template><view …

前端实现扫一扫,扫描二维码(VUE,H5);jsQR,zxing两种方式

文章介绍 这里使用了jsQR和zxing两种方式&#xff0c;分别在普通的H5和vue中使用&#xff0c;文章附上完整demo和一些注意事项 注意事项 这里H5也好&#xff0c;vue也好&#xff0c;如果想要部署到服务器上&#xff0c;需要用https协议&#xff0c;否则无法使用。本地启动项目…

MySQL 事务与锁机制:确保数据一致性

一、MySQL 事务与锁机制概述 &#xff08;一&#xff09;事务的概念与 ACID 特性简述 在数据库操作中&#xff0c;事务是一种极为重要的机制&#xff0c;它可以看作是一组数据库操作命令的集合。简单来说&#xff0c;事务将这些命令整合为一个不可分割的整体&#xff0c;它们…

2024.12.14 TCP/IP 网络模型有哪几层?

2024.12.14 TCP/IP 网络模型有哪几层? 2024.12.14 今天周六 看到大伙都在考六级&#xff0c;我来复盘小林coding的计算机网络的知识点&#xff1a; TCP/IP 网络模型有哪几层? 问大家&#xff0c;为什么要有 TCP/IP 网络模型? 对于同一台设备上的进程间通信&#xff0c;有…

一次Mysql查询踩坑经历(查询索引失效问题)

1、之前的sql建表脚本 CREATE TABLE crm_driver (id bigint(22) NOT NULL AUTO_INCREMENT COMMENT 主键,clue_id bigint(20) NOT NULL COMMENT 线索表id,driver_name varchar(128) NOT NULL COMMENT 试驾人姓名,driver_phone varchar(32) NOT NULL COMMENT 试驾人手机号,drive…

从 SSM 视角剖析校园一卡通密钥管理系统的技术架构演进

第2章 开发环境与技术 开发校园一卡通密钥管理系统需要搭建编程的环境&#xff0c;也需要通过调查&#xff0c;对各个相关技术进行分析&#xff0c;选取适合本系统开发的技术与工具。 2.1 MYSQL数据库 题目确定了是一个应用程序之后&#xff0c;就开始按部就班的进行设计与分析…

Vue3之响应式系统详解

Vue3中的响应式系统是其核心功能之一&#xff0c;它使得数据变化能够自动触发视图更新&#xff0c;从而简化了开发过程&#xff0c;提高了开发效率。本文将详细阐述Vue3中的响应式系统&#xff0c;包括其核心概念、工作原理、实现方式、应用场景以及优势。同时&#xff0c;本文…

RabbitMQ中的Publish-Subscribe模式

在现代分布式系统中&#xff0c;消息队列&#xff08;Message Queue&#xff09;是实现异步通信和解耦系统的关键组件。RabbitMQ 是一个功能强大且广泛使用的开源消息代理&#xff0c;支持多种消息传递模式。其中&#xff0c;Publish/Subscribe&#xff08;发布/订阅&#xff0…

【iOS】OC高级编程 iOS多线程与内存管理阅读笔记——自动引用计数(四)

目录 ARC规则 规则 对象型变量不能作为C语言结构体的成员 显式转换id和void* 属性 数组 ARC规则 规则 在ARC有效的情况下编译源代码必须遵守一定的规则&#xff1a; 主要解释一下最后两条 对象型变量不能作为C语言结构体的成员 要把对象型变量加入到结构体成员中时&a…

C++小白实习日记——Pollnet,Efvi,UDP,数据类型转换(上)

上周主要是熟悉了一下公司内部一些自定义结构体对应的数据类型&#xff0c;要求&#xff1a;读取文件&#xff0c;将文件中数据转化为定义的结构体中的数据类型&#xff0c;按照时间进行排序&#xff0c;用UDP发送数据&#xff1b;在另一台服务器上接收数据&#xff0c;按照定义…

路由引入问题(双点双向路由回馈问题)

简介 总所周知&#xff0c;路由引入import又称路由重分发redistribute&#xff0c;为了解决不同路由协议进程间路由信息不互通而使用的技术&#xff0c;由于不同路由协议的算法、机制、开销等因素的差异&#xff0c;它们之间无法直接交换路由信息。因此&#xff0c;路由引入技…

26. Three.js案例-自定义多面体

26. Three.js案例-自定义多面体 实现效果 知识点 WebGLRenderer WebGLRenderer 是 Three.js 中用于渲染场景的主要类。它支持 WebGL 渲染&#xff0c;并提供了多种配置选项。 构造器 new THREE.WebGLRenderer(parameters) 参数类型描述parametersObject可选参数对象&…

【在Linux世界中追寻伟大的One Piece】HTTP Session

目录 1 -> 引入HTTP Session 1.1 -> 定义 1.2 -> 工作原理 1.3 -> 安全性 1.4 -> 超时和失效 1.5 -> 用途 2 -> 模拟session行为 3 -> 实验测试session 1 -> 引入HTTP Session 1.1 -> 定义 HTTP Session是服务器用来跟踪用户与服务器交…