精华内容
下载资源
问答
  • 基于SIPwebrtc的音视频通话软件(含在线状态) SIP WEBRTC 在线状态 音频 视频 h264 VP8 iLBC 高保真 resiprocate图像增强 图像去噪 防止花屏 噪音抑制 自动增益 回音消除 静音
  • easysip 基于sip协议的android通话客户端,协议栈jain-sip 媒体库使用webrtc
  • 电话 Webrtc sip 客户端
  • WEBRTCSIP客户端和服务器 如何设置Kamailio + RTPEngine + TURN服务器以启用WebRTC客户端和旧版SIP客户端之间的呼叫。 默认情况下,此配置启用了IPv6。 此设置将桥接SRTP-> RTP和ICE-> nonICE,以使WebRTC客户端...
  • 如何实现WebRTC协议与SIP协议互通

    千次阅读 2020-08-04 14:52:08
    一、WebRTC协议与SIP协议互通的需求来源 目前在国内需要WebRTC协议与SIP协议互通的场景主要集中在应用程序(App/Web)对接企业呼叫中心系统客服坐席、音视频会议对接PSTN/SIP音视频通话、企业内部App移动工作台...

    一、WebRTC协议与SIP协议互通的需求来源
    目前在国内需要WebRTC协议与SIP协议互通的场景主要集中在应用程序(App/Web)对接企业呼叫中心系统客服坐席、音视频会议对接PSTN/SIP音视频通话、企业内部App移动工作台(智能办公电话)、CRM系统集成电话呼叫功能、智能硬件(如:智能门禁设备、电梯救援设备、智能陪伴机器人)对接PSTN通话等落点电话场景。
    在这里插入图片描述

    详情可查看:www.webrtc2sip.com
    二、协议互通的技术方案
    SIP协议与RTC协议是分属两个音频编解码协议,WebRTC使用JSEP协议建立会话,SIP协议是IMS网络广泛使用的信令协议,要实现webRTC协议和SIP协议互通,要从信令层和媒体层进行处理。以下为WebRTC和SIP协议互通的技术架构图。
    在这里插入图片描述

    三、影响通话质量的因素
    1、语音通话网络传输设施。众所周知,IP侧的语音通话非常看网络环境。目前IP侧的语音通话有两种传输方案,公网传输和全球数据节点就近接入。公网传输属于尽力而为的机制,易丢包出现卡顿和延时情况,特别是国内与海外的公网传输更加明显。全球数据节点就近接入需要在全球建立数据节点,系统自动根据IP判定就近接入,专线传输时延低,稳定性高。对于公司内部会议、客服回访场景尤为重要。这个方案唯一的问题就是在全球建立数据节点成本极高。中小微企业自行建设性价比不高。
    2、SIP协议与WebRTC协议互转的处理:对SIP协议和WebRTC协议的编解码技术处理;
    3、语音通话线路质量:语音通话线路是否经过多个服务器进行媒体转发,经过的转发服务器次数越少,丢失的数据包越少,音频通话质量越好;
    目前市场上已有一些产品出现,有PJSIP、CSIPSimple、Linphone、eyebeam、JsSIP、sipML5等,但是企业真正用起来,语音通话经常出现卡顿、丢包、延时高。
    详情可查看:www.webrtc2sip.com
    在这里插入图片描述

    四、全平台VoIP SIP SDK支持以下功能:
    1、跨平台音频互通
    2、防SIP协议拦截
    3、免网络穿透处理
    4、高清语音通话
    5、免高频注册
    6、断线自动重连
    7、移动端/PC端全平台SDK
    8、快速上线应用
    详情可查看:www.webrtc2sip.com
    Android/iOS DEMO界面
    在这里插入图片描述

    Web DEMO界面
    在这里插入图片描述

    五、应用场景:
    1、应用程序(App/Web)对接企业呼叫中心系统客服坐席;
    (1)拓宽用户服务渠道,缩短用户接入时间;
    (2)降低客服热线通讯成本;
    (3)支持视频客服接入,更好的用户体验;
    2、音视频会议对接PSTN/SIP音视频通话;
    (1)实现RTC视频会议与PSTN电话服务互通;
    (2)与传统SIP音视频设备实现SIP互通;
    (3)支持呼出和呼入参会功能;
    (4)完善的会控功能;
    3、企业内部App移动工作台(智能办公电话);
    (1)集成到企业App,满足移动办公需求;
    (2)智能办公电话企业统一付费,统一管控通话录音;
    (3)免购买座机硬件资产;
    4、CRM系统集成电话呼叫功能;
    (1)CRM系统直拨用户手机,提高CRM用户沟通效率;
    (2)提升CRM系统产品竞争力;
    (3)支持保留用户通话录音;
    5、智能硬件(如:智能门禁设备、电梯救援设备、智能陪伴机器人)对接PSTN通话;
    (1)基于云端通讯服务,运维成本低;
    (2)多端支持,支持iOS、Android、Web;
    (3)硬件免集成通讯模块,降低硬件采购成本;
    六、应用案例:
    目前已为陌陌、紫光云、招联消费金融、上海美市科技、上市证券公司、驻马店12345市长热线、深圳中创联合科技、武汉泰迪智慧、深圳梯云物联、萌芽网络等企业提供方案支持。
    详情可查看:www.webrtc2sip.com

    联系:
    www.webrtc2sip.com
    微信:xiyaoyaov
    邮箱:439162706@qq.com
    QQ:439162706

    展开全文
  • 本文来自 csdn ucser, http://blog.csdn.net/perfectpdl ... ...webrtc 并没有定义信令部分到底用什么协议,但SIP 无疑是webrtc 信令部分应用最广的,下图为带SIPwebrtc 能力的 客户端和服务器典型部署模型

    本文来自 csdn ucser,    http://blog.csdn.net/perfectpdl   转载注明出处,谢谢


    webrtc 并没有定义信令部分到底用什么协议,但SIP 无疑是webrtc 信令部分应用最广的,下图为带SIP 和 webrtc  能力的 客户端和服务器典型部署模型


    展开全文
  • SIP电话WebRTC 这是 SIP电话,可以轻松集成到您的Web应用程序中以进行音频和视频通话。 它使用生产的 如何使用 克隆存储库"git clone https://github.com/alepolidori/janus-webrtc-phone.git" 运行"npm install...
  • WebRTC简介及其与SIP互通

    千次阅读 2016-03-23 20:51:54
    WebRTC 简介 WebRTC,名称源自网页实时通信(Web Real-Time Communication)的缩写,是一个支持网页浏览器进行实时语音对话或视频对话的技术,是谷歌2010年以6820万美元收购Global IP Solutions公司而获得的一项...

    WebRTC

    简介

    WebRTC,名称源自网页实时通信(Web Real-Time Communication)的缩写,是一个支持网页浏览器进行实时语音对话或视频对话的技术,是谷歌2010年以6820万美元收购Global IP Solutions公司而获得的一项技术。

    这是百度百科上的介绍,维基百科也差不多。对完全小白来讲,可能不是很理解这句话。

    首先,什么是实时通信?
    举个直白的例子,我们平时打电话就是实时通信。现在有很多实时通信的软件,比如 丁丁有信……这是手机app。PC客户端像XliteLinphone等等。这些客户端接入网络,注册到相应的服务器上就可以进行音频通信了,支持视频的还能进行视频通信。拿Xlite来说,它的信令机制采用的是sip协议。SIP协议是IMS网络广泛使用的信令协议,已经很成熟。两个uesr 通过Xlite客户端注册到sip server(如 Asterisk)上,就可以互相拨打对方的号码音视频通信了,不过就Xlite来说,语音通话是免费的,但是视频的话,是要支付money软件才提供视频功能的……

    其次,为什么要提出WebRTC?
    一直以来,用户如果想通过互联网进行实时通信,就需要安装软件,要么就得在浏览器中安装插件。WebRTC的宗旨是不需用户安装任何插件,直接使用浏览器就可以进行实时音视频通信。就是如果WebRTC实现了,我们打开浏览器,输入网址,登陆进去,拨打号码,就可以互相音视频了。不再需要安软件,也不需要安装额外的浏览器插件。Web版QQ大家都用过吧,现在还只能发发消息发发表情,如果引入WebRTC,那音视频传文件都不在话下,现在QQ客户端有的功能,通过网页访问都能体验,估计到时候都不愿意再装体积越来越大的QQ客户端了吧。

    最后,需要知道的内容

    • WebRTC已经纳入HTML5标准
    • 目前支持webrtc的浏览器有 Chrome Firefox OperaIE不支持~
    • WebRTC没有指定具体的信令协议,具体的信令协议留给应用程序实现。
    • webRTC使用JSEP协议建立会话,什么是JSEP后面说
    • WebRTC采用ICE实现NAT穿越
    • WebRTC客户端之间可以进行点对点的媒体传输。

    JSEP

    JSEP(JavaScript Session Establishment Protocol,JavaScript会话建立协议)是一个信令API,允许开发者构建更强大的应用程序以及增加在信令协议选择上的灵活性。

    建立会话最关键的就是媒体的协商,WebRTC虽然没有指定具体的信令协议,但是媒体协商采用了SDP协议。JSEP是干什么的呢,一方面提供接口如createOffer()供web应用程序调用生成SDP,另一方面提供ICE功能接口。这些功能都由浏览器实现,浏览器
    WebRTC传输信令(offer/answer)采用Websocket
    需要说明的是,如果web应用程序不使用额外的信令协议,仅使用JSEP,两个WebRTC client (同一个WebRTC client程序,两处登陆) 之间也是可以建立链接的,即只要应用程序能解析用WS传递过来的Offer/Answer消息,提取出其中的SDPICE信息就可以了。

    github上codelabdemo 就是不用其他信令协议,直接使用JSEP生成offer/answer信令,然后采用ws协议传输实现的。

    JSEP并不是信令协议,可以在JSEP的基础上引入SIP等信令协议,使WebRTC应用功能更加完备。

    WebRTC与SIP互通

    要想让WebRTC与sip互通,要解决两个层面的问题:信令层媒体层
    两个网络使用的信令机制不同,所以要进行信令的转换,才能完成媒体的协商,建立会话。媒体层要完成编码的转换,以及rtp/srtp转换等功能。这里主要说项信令层面的互通。

    信令互通方案

    目前sip和webrtc信令上互通有两种解决方案:

    • 用JavaScript实现sip协议栈,webrtc应用程序基于这个协议栈开发。这样webrtc client发出的信令就是sip信令,但一般采用websocket为信令传输协议。这样的webrtc client就可以直接注册到支持ws的sip server上了。
      jssipsipml5 都是这种解决方案。
    • 通过转换网关实现协议的转换,从而互通。一个开源的网关项目就是 webrtc2sip
      webrtc2sip是一个功能很完善的网关,既实现了信令层,也实现了媒体层,编码转换功能很强大,也可以直接当做媒体网关,用于编解码,沟通两端的媒体。
    展开全文
  • 第五章 WebRTC, SIP和 Verto

    千次阅读 2019-08-08 14:35:22
    WebRTC,视频和音频的实时通信,已经在超过十亿个浏览器上工作。很快移动应用程序就会成倍增长。WebRTC有望成为物联网(IOT)所采用的多媒体通信层。 FreeSwitch是一个完整的WebRTC解决方案,使现有的和遗留的应用...

          WebRTC,视频和音频的实时通信,已经在超过十亿个浏览器上工作。很快移动应用程序就会成倍增长。WebRTC有望成为物联网(IOT)所采用的多媒体通信层。

            FreeSwitch是一个完整的WebRTC解决方案,使现有的和遗留的应用程序能够通过新的渠道为用户服务。此外,Freeswitch是一个超级可编程应用服务器,是您创建杀手级服务的基础,它定义了“快速致富”的新概念!

            WebRTC是一组P2P多媒体流的技术和标准。WebRTC需要一个额外的信令和会话管理层才能真正有用:它包括用户目录、用户定位、故障管理等等。

            FreeSWITCH既支持WebRTC上的SIP(会话初始化协议),也支持VERTO协议。VERTO是一种新的开源协议,它的设计旨在为JavaScript开发者提供方便。

           我们将看到如何安装、配置和管理FreeSWITCH服务,把它作为一个集成的WebRTC平台。我们还将看到Verto Communicator (VC)的惊人先进性,和简单的浏览器客户端视频会议和远程呈现应用。

           最后,我们将以两种难以区分的方式实现同一个应用:WebRTC房间,一种基于SIP.js,另一种基于verto.js。

          这一章,我们将讨论以下主题:

    1. WebRTC 概念
    2. WebRTC 里的加密
    3. FreeSWITCH的WebRTC
    4. SIP和Verto协议的基本原理
    5. 安装并配置一个完整的FreeSWITCH WebRTC平台
    6. Verto通信的惊人特性
    7. 怎样利用Verto和SIP.js编写测试应用

     

    WebRTC概念

            WebRTC是一组支持P2P音频、视频和数据采集、流媒体和交换的标准和技术。它的首款“杀手级”应用是视频电话和视频会议。它首先在web浏览器上实现(已有超过10亿个兼容WebRTC的浏览器),这项技术已经在许多智能手机应用上推广,据预测,它可能成为物联网多媒体通信的基础(将有数十亿的物联网设备启用WebRTC)。

            在最直接和流行的实现中,浏览器会访问一个页面,并加载页面所包含的Javascript脚本的函数使用WebRTC API(后面介绍)与计算机多媒体硬件交互(麦克风、摄像头),并且和对端交换音视频媒体流。

            这里的重点是P2P。WebRTC不规定或支持任何超出抓取、发送、接收和播放流之外的操作。没有信令,没有用户目录或定位服务,没有协商通信会话建立和销毁的协议,等等。

            WebRTC既不是协议,也不是服务。仅使用WebRTC技术,你必须对两个端点的应用地址硬编码,嗅探它们的监听,而应用程序只对这些端点有效。

            除了最简单演示之外,WebRTC还需要某种信令和会话管理协议。对于你的WebRTC服务来说,你可以选择现成的协议,或者自己发明一套私有协议。

            最成熟的会话管理信令协议显然是SIP,它支持着整个世界的通信网络,从PSTN运营商到移动运营商,再到PBX呼叫服务,SIP的身影无处不在。另一种广泛应用的协议是XMPP,它主要用于管理即时消息和状态服务。有许多专有封闭的协议,其中以Skype背后的协议最为突出。还有面向Web开发人员和JavaScript编程人员的开源替代方案,如Freeswitch的Verto。你必须选择一种,或自己写。

            WebRTC技术体现为软件开发人员构建程序时用到的三组应用编程接口(API):GetUserMedia (GUM)、RTCPeerConnection (RTCPC 或PC)和RTCDataChannels (RTCDC 或 DC)。

    • GetUserMedia 用于枚举机器上的多媒体硬件,请求用户权限来控制麦克风和摄像头,获取媒体流,并通过屏幕和扬声器播放流。
    • RTCPeerConnection 用于在定义的端点间传输音频和视频流。
    • RTCDataChannels 用于在定义的端点间传输任意数据(即使是结构化数据)。

          WebRTC RTCPeerConnection 必须使用ICE,STUN和TURN来穿透防火墙和NAT,最终抵达另一端。

          ICE是WebRTC自身推广的一种技术,并获得了巨大的吸引力。它是解决所有网络问题的真正的灵丹妙药,并且工作完成得相当完美,是多年VoIP工程服务的精华。

            ICE将通过一个STUN服务器告诉应用程序它的公网地址是什么(从NAT和防火墙的另一侧看到的公网地址),并使用一个TURN服务器作为中继,防止 P2P通信失败。因此,一个功能完整的WebRTC应用需要:

    • 使用 GetUserMedia API 控制麦克风和摄像头
    • 使用一种会话协议和可能的外部辅助服务器定位对方端点并建立会话
    • 使用ICE (和 STUN 和 TURN) 确定网络路径
    • 使用 RTCPeerConnection 传输音/视频媒体流

     

    加密无处不在

            对媒体流和数据流加密是强制性的。 如果不对交换的媒体流加密,就没有WebRTC通信。包括所有的媒体流(音频和视频)和可能存在的数据流都需要加密。媒体流被加密为SRTP,通过DTLS交换密钥。这一切都是由RTCPeerConnection API替你完成的。

            但是,当你操作时,对会话协议一并加密才更具意义。这种信令选择的传输层通常选择安全的WebSocket。在定义WebRTC信令服务器和终端端时,WSS:// 这样的URI前缀(WebSocket Secure)到处可见。WSS信令交换是TLS加密的(就像web的HTTPS)。未加密的交换方式,前缀是WS,但除了测试之外,很少使用。

    FreeSWITCH的WebRTC

            好了,抽象的内容说得够多了,是时候拿出点实质性的东西了:FreeSWITCH是怎样实现WebRTC的?

            FreeSWITCH是一个完整的WebRTC平台,既可以作为WebRTC网关,也可以作为WebRTC应用服务器。例如,FreeSWITCH能够把WebRTC客户端连接到外部“正常”的SIP和PSTN服务(或者PBX),从而使现有或遗留的服务能够被超过10亿的浏览器在线访问。与此同时(这是真实的,作为网关同时提供某些附加的服务),FreeSWITCH能够为WebRTC客户端(浏览器或App)提供与其它“正常”SIP和PSTN客户端相同的服务,比如PBX、IVR、呼叫中心、会议系统、电话卡,等等。

            对FreeSWITCH来说,WebRTC只不过是另一种类型的通信通道,和SIPTDMMGCPH323SkypeJingle是一样的。FreeSWITCH的所有特性天然支持WebRTC。

    FS 的WebRTC信令: SIP和Verto

            从这一章的前面部分内容中,我们已经知道WebRTC需要一种会话协议来补充它自己的媒体流功能。这个协议将用于定位端点位置、建立与拆除会话,管理状态和消息。 FreeSWITCH支持两种这类型的协议:SIP和Verto。

            这两种不同的协议只影响客户端的编写方式(客户端是加载Javascript的网页,可以访问FreeSWITCH)和客户端与FreeSWITCH的“交谈”方式。两种协议都可以完全访问FreeSWITCH的所有功能和服务。此外,不同客户端可以同时使用两种协议接入同一服务,甚至直接互动。例如:我们可以在FreeSWITCH上发起一个视频会议,让一个基于SIP的FreeSWITCH客户端,一个基于Verto的客户端,还有其它TDM客户端,普通(非WebRTC)SIP客户端同时接入会议室:

    为什么选择SIP?又为什么选择Verto?

            记住:这里的选择影响的只是访问FreeSWITCH的页面应用的Javascript编写方式。在本章的后续内容中,我们将介绍一个具体实例,分别用两种协议实现一个相同的应用程序。从终端用户的角度看,感觉不到其中的差异。

            尽管SIP很复杂,但有电信背景的程序员很容易接受,他们对这些概念很熟悉:会话、对话、事务、REGISTER/ INVITE/ BYE消息,等等。它是在复杂环境中集成WebRTC客户端的完美选择,在扩展、监视和部署方面拥有20年的经验积累。

            Verto是一种完全不同的体验:非常简单,它使用Web程序员已经熟悉的编程结构,如JSON数据结构。此外,Verto还提供了与FreeSWITCH内部服务器交互的API和双向同步的数据结构。例如,在FreeSWITCH中使用Verto时,你可以有一个数据结构(假设是视频会议的成员列表),它对所有Verto客户端透明地实时同步信息,这样,如果有新的成员加入会议(即使是从PSTN加入),他的状态会立刻呈现在所有Verto客户端的浏览器上,不需要任何客户端侧的动作(比如拉取状态)。

            你可以在基于SIP的JavaScript上复制这种行为(聪明的程序员可以完成任何他想做的事情,所有的一切不都是字节吗?),使用数据流,特定的消息,推送技术等等,但在Verto中,它是原生的,仅需要几行代码。


     

    FS 的WebRTC媒体流: SRTP

            与会话信令选择(SIP或Verto可选)不同,WebRTC客户端的媒体流处理总是遵循WebRTC规范,强制加密。它没有选择,只能用SRTP,并通过DTLS交换密钥。事实上,在FreeSWITCH内部,对两种不同信令的客户端,媒体流加密使用的是同一个模块和同一套代码。如前所术,WebRTC定义了媒体流和加密方式,把会话协议留给应用实现者自由处理。

     

    在FS中安装并配置WebRTC

            为了快速测试,Tristan Mahe贡献了一个脚本,它自动安装WebRTC需要的所有内容,从FreeSWITCH本身到WEB服务器证书,再到Verto通信器,用于新部署的Debian 8最小安装服务器。在硬件上安装基础的操作系统,或安装一台虚拟机,ssh连接这台机器,执行完脚本,你就已经准备好一台新的WebRTC会议服务器。从这里下载脚本:

    https://freeswitch.org/confluence/display/FREESWITCH/Debian+8+Jessie#Debian8J essie-QuickStartFreeSWITCHDemoWithVertoCommunicator

            在接下来的内容中,我们不会使用自动安装脚本。而是从安装开始,逐步构建一个完整的WebRTC FreeSWITCH平台。

           事实上,在缺省部署完成后,支持WebRTC不需要附加安装任何模块。所有需要的模块都已经安装好了。FreeSwitch是一款可以开箱即用的WebRTC应用服务器。

            我们需要编辑几个配置文件,这样,Freeswitch就可以找到强制的SSL证书、知道要监听的端口以及许多其他细节。

    证书

            这是许多FreeSWITCH/WebRTC新手的一块绊脚石。我们需要许多与证书相关的文件,以及它们的不同组合,以帮助加密FreeSwitch流量的不同部分:“传统的”基于TLS的SIP(即"sips",详情请参考RFC3261);基于WSS的SIP;基于WSS的Verto;和SRTP媒体。

            HTTPS服务器也需要证书文件,它将为我们的WebRTC客户端加载页面和JavaScript提供服务。我们需要证书颁发机构的根文件和链文件。我们也需要私钥。此外,原始证书文件需要以不同的方式连接,以形成我们需要的不同的即用证书。内容有点多,难怪很多人觉得这很困惑。

            我采用一种简单的解决方案:把所有证书相关的文件放在一个目录中,让FreeSWITCH的模块和WEB服务器(Apache 或 Nginx)到这个目录获取。我还写了个脚本以保证它们正确连接。如果你的证书供应商和我的一样,你可以直接使用它;如果不一样也不要紧,你可以修改它,让它适配你的证书提供商。

            首先,忘掉自签证书和类似的增强解决方案。自签名证书“可能”适用于测试目的,但是要正确协调所有的活动部件,这样做是不值得的,而且肯定会浪费大量的时间和挫折。简单地说:不要使用自签证书。对真实有效的域名,使用真实有效的证书。

          如果你的服务只响应一两个域名的请求,那么你是幸运的。可以从letsencrypt.org免费获取证书。如果你想让你的服务对一个域名下的所有子域名都响应(比如:www.mydomain.com、 sip.mydomain.com、 support.mydomain.com、 sip.mycustomername.mydomain.com、 www.mysecondcustomername.mydomain.com ),那么你需要购买通配证书。当前没有免费的通配证书可以选择,但将来也许会有。

            如使用www.letsencrypt.org提供的免费(且完全有效)证书(请查看其网站上的说明):

    #!/bin/sh
    
    cp /etc/letsencrypt/live/my.fqdn.com/* /usr/local/freeswitch/certs/ cd /usr/local/freeswitch/certs/
    
    cat fullchain.pem privkey.pem > wss.pem cat cert.pem privkey.pem > agent.pem cat chain.pem > cafile.pem

            如果是由Comodo颁发的PositiveSSL wilcard证书(谷歌搜索最低价的),请注意:你必须找到并下载addtrustexternalcaroot.crt文件:

    #!/bin/sh
    
    cd /usr/local/freeswitch/certs/ cp myserver.key privkey.pem
    
    cp STAR_mydomain_com.crt cert.pem
    
    cp STAR_mydomain_com.ca-bundle chain.pem
    
    cat cert.pem chain.pem addtrustexternalcaroot.crt > fullchain.pem cat cert.pem privkey.pem fullchain.pem > wss.pem
    
    cat fullchain.pem privkey.pem > agent.pem cat chain.pem > cafile.pem

     

    安装并配置Apache或NginX,提供HTTPS服务

            我们需要为WebRTC客户端准备支持TLS/SSL访问的WEB服务器。任意一款支持HTTPS的WEB服务器都行。目前最流行的两款WEB服务器是Apache和NginX。接下来我们看看怎么在Debian 8 (Jessie)上安装它们,并启用HTTPS/SSL。

    然后,我们将准备好的用于提供服务的页面文件放在下面目录下:

    /var/www/html/

            这一点Apache和NginX一样

            你只需要选用Apache或NginX的其中一个,没必要两个都安装

    Apache

            第一步是更新安装包和数据库,然后安装apache2和ca-certificates包。后一个包将安装证书机构颁发的证书,这在处理SSL时可能很有用。

            接下来启用SSL Apache模块,以及通过HTTPS提供服务的缺省SSL站点。

            接下来的两行代码(为了方便阅读,排版时分为三行),使用PERL替换SSL/TLS证书和私钥的文件名和路径。最后一行代码重启Apache服务:

    apt-get update
    
    apt-get install apache2 ca-certificates a2enmod ssl
    
    a2ensite default-ssl.conf perl -i -pe \ 's|/etc/ssl/certs/ssl-cert-
    
    snakeoil.pem|/usr/local/freeswitch/certs/cert.pem|g' \ /etc/apache2/sites- enabled/default-ssl.conf
    
    perl -i -pe \ 's|/etc/ssl/private/ssl-cert-
    
    snakeoil.key|/usr/local/freeswitch/certs/privkey.pem|g' \
    
    /etc/apache2/sites-enabled/default-ssl.conf service apache2 restart

     

    NginX

            和Apache安装一样,我们先更新安装包一数据库。然后安装nginx和ca-certificates包。后一个包将安装证书机构颁发的证书,这在处理SSL时可能很有用。

            接下来,启用443端口(SSL)监听,并为通过HTTPS提供服务的缺省站点包含snippet。接下来的两行代码(为了方便阅读,排版时分为三行),使用PERL替换SSL/TLS证书和私钥的文件名和路径。最后一行代码重启NginX。

    apt-get update
    
    apt-get install nginx ca-certificates
    
    perl -i -pe 's/# listen/listen/g' /etc/nginx/sites-enabled/default perl -i -pe \
    
    's/# include snippets\/snakeoil.conf/include snippets\/snakeoil.conf/g' \
    
    /etc/nginx/sites-enabled/default perl -i -pe \ 's|/etc/ssl/certs/ssl-cert-
    
    snakeoil.pem|/usr/local/freeswitch/certs/cert.pem|g' \
    
    /etc/nginx/snippets/snakeoil.conf perl -i -pe \ 's|/etc/ssl/private/ssl-cert-
    
    snakeoil.key|/usr/local/freeswitch/certs/privkey.pem|g' \
    
    /etc/nginx/snippets/snakeoil.conf service nginx restart

    配置 VERTO

            在FreeSWITCH缺省安装环境下,mod_verto模块的配置文件是/usr/local/freeswitch/conf/autoload_configs/verto.conf.xml。我们将编辑"default- v4"这个配置,IPV4是目前网络连接通常使用的地址类型。您要检查TCP端口,Verto将在该端口上侦听WSS传输上的信令。注意,secure="true"表示WSS(而不是简单的WS)。

    <param name="bind-local" value="$${local_ip_v4}:8082" secure="true"/>
    
    <param name="ext-rtp-ip" value="93.58.44.181"/>
    
    <param name="debug" value="0"/>

            参数ext-rtp-ip的值配置媒体的外部IP地址,VERTO会通知WebRTC客户端连接这个地址以进行媒体交换。因此,对于从因特网访问的客户端来说,ext-rtp-ip必须设置为NAT后的公网IP(通常和WEB服务的IP地址相同)。

            你可能需要临时把"debug"的值设为10,这样VERTO的所有交换信息都会呈现在FreeSWITCH控制台和fs_cli界面上(红色的!)。把mod_verto的debug输出与客户端浏览器上的javascript控制台日志结合起来,就能得到信令交换的完整跟踪信息。

    配置基于SIP的WebRTC (WSS)

            在FreeSWITCH缺省安装环境下,你只需要修改"internal" SIP profile。打开/usr/local/freeswitch/conf/sip_profiles/internal.xml文件,检查"wss-binding"配置,它指定了SIP模块(mod_sofia)监听WSS信令的TCP端口

    <param name="wss-binding" value=":7443"/>
    
    <param name="ext-rtp-ip" value="93.58.44.181"/>
    
    <param name="ext-sip-ip" value="93.58.44.181"/>

     

            参数ext-rtp-ip和ext-sip-ip设置媒体和信令的交换地址,WebRTC客户端将通过它们交换信令和媒体。它必须设置为WebRTC客户端看到的FreeSWITCH IP地址。因此,如果客户端从因特网访问,ext-rtp-ip必须设置为NAT转换后的公司IP,换句话说,路由可达的IP(通常和WEB服务器IP相同)。

     

    编写 WebRTC 客户端

            WebRTC 客户端最主流的实现就是一个加载JavaScript的HTML页面。HTML和JavaScript分别定义WebRTC的GUI和行为。

          通常,由HTML加载的javascript部分会用到一个或多个javascript库。这些库实现选定的信令协议(SIP或VERTO)和WebRTC API的交互。我们已经了解WebRTC API提供了访问本地多媒体硬件(麦克风和摄像头)的能力;还能管理音视频媒体流;还有双向的数据通道。

            会话信令协议将会利用和补充WebRTC P2P功能,因此它们的作用远远超过连接一个已知的地址和端口。

    SIP 和 JavaScript

            WebRTC的SIP在jssip JavaScript开源库中得到了显著的实现。JsSIP由José Luis Millán, Iñaki Baz Castillo, 和 Saúl Ibarra Corretgé编写,他们是RFC 7118的联合作者,这份规范定义了SIP的WS和WSS用法。

             后来,在OnSIP工作期间,Will Mitchell和他的团队分裂JsSIP并进一步开发。他们的开发成果以开源SIP.js的的形式发布。如今,SIP.js已经被广泛采用,它是FreeSWITCH社区中最常用的Javascript WebRTC SIP库。

     

            另一个值得注意且独立的JavaScript实现的开源SIP库是sipml5(事实上它是HTML5的第一个SIP客户端),它由Doubango电信开发。

            这些库都很容易从网上找到,包含完整的文档,实例客户端。支持和开发最积极的似乎是SIP.js。在本章的后面内容中,我们会看到SIP.js的实际应用,实现一个WebRTC聊天室。

    Verto 和 JavaScript

            VERTO协议是一个典型的JSON协议,JavaScript程序员通过引用其中的一个“特色”库,就可以使用它。

            第一个“特色”库是verto-min.js,它是一个迷你版的基础库,随FreeSWITCH源码一起发布 ,一个普通的“原始”javascript库,依赖于jquery和and jquery.json。另一个“特色”库是一个JQuery的"verto"插件,可以从"npm" Node管理器获取。

            VERTO库是由Anthony Minessale II开发的,他是FreeSWITCH的主要开发者和作者,在FreeSWITCH 1.5开发期间,VERTO的进展与mod_verto模块并行。

            Verto JQuery插件和它的文档由Italo Rossi及其团队在evolution .net.br进一步开发(他们还是Verto Communicator的开发者),并由开源软件wiz Chad Phillips (hunmonk on IRC)提供。从http://evoluxbr.github.io/verto-docs/,你可以找到完整的文档,还有手把手的编程指南和客户端示例。

           在我们的WebRTC聊天室中,为了简单起见,将选择verto-min.js库。

     

    Verto Communicator, 一个高级的WebRTC客户端

            Verto Communicator是由Italo Rossi及其团队在evolution .net.br编写的,它是一个完整的高级开源WebRTC VERTO客户端示例,非常酷,具有视频会议的附加功能。

            如果你在FreeSWITCH中配置了一个具有完整选项的视频会议,像演示配置里的3500那样,那么就能体验Verto Communicator (VC)的所有特性。

          它具有屏幕共享、音频/视频静音或解除、聊天、会员名单、实时显示发言者、自动可视化的头像、全屏、拨号板、麦克风和摄像头的选择、带宽等功能。

            下图是Seven Du Jin Fang(杜金房)提供的一张VC使用截屏,杜先生是FreeSWITCH视频代码的作者,还是蓬勃发展的FreeSWITCH中国社区的领导人。图中他在主屏幕区,其他与会者正陆续加入,并自动围绕在他周围。

          当你以"moderator"(设置"|moderator"标识)主持权限接入会议时,它将为你提供大量附加功能:你可以踢除与会者;开始和停止音视频录制;播放音/视频文件;截图;在每个参与者视频流的底部放置带有任意文本(例如,名称和位置)的横幅;选择与会者的“位置”,等。等。你实际上成为了会议的“电影导演”:让谁显示在屏幕上,决定屏幕上同时显示多少人,你可以让演讲者的共享屏幕显示为全屏,并在其中嵌入一个演讲者的小画面,等等。现场合成画面。

            要在Debian 8 Jessie上安装Verto Communicator,git克隆FreeSWITCH源码,并执行:

    cd /usr/src
    
    git config --global url."https://".insteadOf git://
    
    git clone https://freeswitch.org/stash/scm/fs/freeswitch.git -bv1.6 freeswitch
    
    cd /usr/src/freeswitch/html5/verto/verto_communicator/
    
    ./debian8-install.sh
    
    ln -s /usr/src/freeswitch/html5/verto/verto_communicator/dist
    
    /var/www/html/vc

     

            然后你需要编辑/var/www/html/vc/config.json,根据你的值修改(把密码改为/usr/local/freeswitch/conf/vars.xml里配置的值):

    {
    
    "login": "1008",
    
    "password": "mydefaultpasswordfromvars.xml", "wsURL": "wss://lab.opentelecomsolutions.com:8082"
    
    }

     

            在/usr/src/freeswitch/html5/verto/verto_communicator/src/config.json.sample,有一个更完整的定制配置示例,它由FreeSWITCH内核组开发成员Ken Rice精心制作。

            我们会在第13章,会议与WebRTC视频会议中再次介绍VC。

     

    WebRTC 聊天室,同时支持SIP和Verto客户端

            让我们来看一个简单的项目,希望您能够将它用于测试、生产,并作为进一步开发的基础。

            顺便说一句,Len Graham已经改编了一个早期的WebRTC聊天室版本(来自Packt 2016年出版的"Mastering FreeSWITCH" 一书),并把它作成FusionPBX的VERTO客户端插件(FusionPBX官网www.fusionpbx.com,Mark Crane是它的主要开发人员。FusionPBX是一个完整的Web界面,用于配置和管理基于FreeSWITCH的工业级PBX。)。

            WebRTC聊天室是一个基础的WEB客户端,它能够发起和接收视频呼叫、在通话中发送DTMF,并与FreeSWITCH会议功能的聊天系统对接。它有两个版本,区别在于JavaScript实现会话信令协议的部分。其中一个版本使用SIP,另一个使用VERTO。有趣的是,两个版本的HTML、用户界面、行为、用户体验完全相同。实际上,如果不在浏览器中启动JavaScript控制台,它们是不可区分的。

            下面是sip.js风格的截图(您可以在javascript控制台中看到sip消息),稍后您将看到Verto风格:


     

    在WebRTC会议室中聊天

            通常,会议聊天功能只在VERTO WebRTC客户端可用。通过VERTO协议的保持数据结构交同步分发给所有连接客户端的特性,聊天功能几乎唾手可得。Verto客户端只需要实现接收聊天事件的回调函数就可以。

            SIP协议没有定义数据同步和事件分发的内容,它完全属于另一个世界。SIP WebRTC聊天室的实现只交换“传统”的SIP简单消息,它不使用WebRTC或JavaScript技术获取聊天事件,而只使用SIP技术。实事上,它使用与“传统”SIP硬/软电话相同的SIP即时消息技术(我们将会看到,在WebRTC聊天室里,会议聊天消息可以通过“传统”的SIP硬/软电话接收和发送)。

            作为与SIP会议参与者交换聊天信息的“桥梁”,我们将使用FreeSWITCH内部的CHAT API,以及mod_sms及其聊天方案(chatplan)。

            正如我们稍后将看到的,mod_sms能够截获和路由(根据其chatplan)FreeSWITCH的内部CHAT API相关的所有消息。FreeSWITCH的会议模块(mod_conference)使用FreeSWITCH CHAT API向与会者发送聊天消息。同时,SIP客户端发送的简单SIP消息可以被mod_sms接收,并根据chatplan路由(这和FreeSWITCH接收呼叫并通过拨号方案路由的方式本质上是一样的)。

            因此,考虑接收会议室信息的话,用会议室的CHAT API注册SIP客户端就够了。此外,设置一个chatplan,可以指示mod_sms模块SIP客户端发送过来的简单SIP消息路由给会议的CHAT API。

            顺便说一下,这一机制同样适用于其它实现FreeSWITCH CHAT API的模块,比如说通过mod_dingaling或mod_gsmopen接入的与会者。

    FreeSWITCH会议

            FreeSWITCH的会议有许多特性。演示配置实例中,有一个会议"profile",它封装了所有内容。这个"profile"名叫"video-mcu-stereo",它是在/usr/local/freeswitch/conf/autoload_configs/conference.conf.xml中定义的。使用演示配置,可以拨打3500-3599接入会议,可以享受“CD音质的会议”

            它提供的最重要特性包括:对视频流混频;屏幕共享;视频特效,如字幕、色度键、画中画、视频播放等等。此外,它还提供了一个聊天和实时显示与会者状态的系统。

            我们将主要用3500进行测试,但如果你更关注资源开销和节省CPU,可以用3000-3099(缺省会议配置,定义了名为"nb_conferences"的extension)。

    mod_sms 和 chatplan

            Chatplan就是聊天相关的dialplan。Chatplan是一种新的黑科技!首先,你必须编辑/usr/local/freeswitch/conf/autoload_configs/modules.conf.xml文件,去掉mod_sms那一行的注释符,这样才能在FS启动时加载mod_sms模块:

    <load module="mod_sms"/>

            接下来,你可以重启FreeSWITCH,或通过fs_cli命令手动加载mod_sms模块:

    load mod_sms

            现在,我们必须编辑chatplan,打开/usr/local/freeswitch/conf/chatplan/default.xml:

    <?xml version="1.0" encoding="utf-8"?>
    
    <include>
    
    <context name="public">
    
    <extension name="demo">
    
    <condition field="to" expression="^(3\d{3})@.*$">
    
    <action application="info"/>
    
    <action application="set" data="to=${to_user}-${to_host}"/>
    
    <action application="set" data="dest_proto=conf"/>
    
    <action application="set" data="chat_proto=conf"/>
    
    <action application="set" data="skip_global_process=true"/>
    
    <action application="set" data="from=${from_user}"/>
    
    <action application="set" data="final_delivery=true"/>
    
    <action application="set" data="from_full=<sip:${from_user}@${from_host}>"/>
    
    <action application="info"/>
    
    <action application="send"/>
    
    <action application="stop"/>
    
    <action application="info"/>
    
    </condition>
    
    </extension>
    
    </context>
    
    </include>

            这个chatplan会拦截发送给会议的SIP即时消息(正则表达式以3打头,紧跟3位数字,然后@加上一些内容,对应拨号方案里的会议号码),交把它路由给会议聊天室(to”字段模拟会议聊天事件的内部FreeSWITCH路由)。然后我们修改"from"字段,让它展现在会议聊天室时可读性更好些。

            在转换的前后,我们都所有的变量信息输出到FreeSWITCH控制台(和拨号方案里的"info" APP一样)。 这个chatplan将在SIP即时消息和会议聊天事件间建立桥梁。

    别忘记在fs_cli发命令重载FreeSWITCH配置:

    reloadxml

     

    拨号方案的 "chat_proto" extension

            在mod_conference内部(conference_event.c 文件),有一种机制可以将会议中的所有聊天信息广播给所有的参会者(避免二次发送)。

            消息将发给与会者客户端的"presence_id",但前提是这个客户端通道的"chat_proto"变量值是有效的(例如:mod_conference需要知道对特定的presence_id"向CHAT FS API提供哪个参数)。许多终端模块有它们自己的聊天协议,你甚至可以在fs_cli中使用它:

    freeswitch@lxc111> show api chat name,description,syntax,ikey

    chat,chat,<proto>|<from>|<to>|<message>|[<content-type>],mod_dptools

     

            无论如何,mod_conference广播消息会用到"chat_proto"变量,但只有mod_verto通道会自动设置这个变量值。如果没有chat_proto,使用SIP的与会者将收不到任何聊天消息,我们需要纠正这种歧视。让我们编辑/usr/local/freeswitch/conf/dialplan/default.xml里的拨号方案,在文件的开头处插入以下内容:
     

    <extension name="chat1" continue="true">
    
    <condition field="${source}" expression="^mod_sofia$">
    
    <action application="set" data="chat_proto=sip"/>
    
    </condition>
    
    </extension>
    
    

            这个extension将会为所有来自mod_sofia的呼叫添加"chat_proto"变量,把它设置为"sip",它对所有SIP呼叫都有效,包括使用SIP的WebRTC呼叫。我们要感谢"continue=true"的参数设置,拨号计划会继续执行,寻找匹配其它extension。

    HTML

    哈,现在我们进入应用程序的内部圣地。实际上,SIP.js版和VERTO版的HTML (index.html)是相同的。唯一需要更改的是加载哪个JavaScript文件。

    下面VERTO版的代码:

    <!DOCTYPE html>
    
    <html lang="en">
    
    <head>
    
    <meta charset="utf-8">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    
    <meta name="description" content="A WebRTC client for Verto FreeSWITCH module">
    
    <meta name="author" content="Giovanni Maruzzelli">
    
    <link rel="icon" href="favicon.ico">
    
    <title>WebRTC Rooms</title>
    
    <!-- Bootstrap core CSS -->
    
    <link href="css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Custom styles for this template -->
    
    <link href="high.css" rel="stylesheet">
    
    </head>
    
    <body>
    
    <div id="conference">
    
    <input type="hidden" id="passwd" value="mysecretpassword_LOL" />
    
    <input type="hidden" id="cidnumber" value="WebRTC" />
    
    <div class="form-signin">
    
    <h2 class="form-signin-heading">WebRTC Rooms</h2>
    
    <div id="content" class="form-signin-content">
    
    <input type=number id="login" min=1000 max=1019 step=1 class="form-control" placeholder="Login with a Number between 1000 and 1019" required autofocus>
    
    <button class="btn btn-lg btn-primary btn-success" data- inline="true" id="loginbtn">Login</button>
    
    <input id="ext" class="form-control" placeholder="Insert the Extension to Call or Wait to be Called" required autofocus>
    
    <button class="btn btn-lg btn-primary btn-success" data- inline="true" id="callbtn">Call</button>
    
    <button class="btn btn-lg btn-primary btn-danger" data- inline="true" id="backbtn">Back</button>
    
    </div>
    
    <div id="video1" align="center" class="embed-responsive embed- responsive-4by3">
    
    <video id="webcam" autoplay="autoplay" class="embed- responsive-item"> </video>
    
    </div>
    
    <button class="btn btn-lg btn-primary btn-danger" data- inline="true" id="hupbtn">Hangup</button>
    
    <br id="br" />
    
    <textarea id="chatwin" class="form-control" rows="5" readonly></textarea>
    
    <br id="br" />
    
    <input id="chatmsg" class="form-control" rows="1" placeholder="type here your chat msg" autofocus></input>
    
    <button class="btn btn-primary btn-success" data-inline="true" id="chatsend">Send Msg</button>
    
    </div>
    
    <div align="center" class="inner">
    
    <p>2017<br/>Giovanni Maruzzelli - OpenTelecom.IT</p>
    
    </div>
    
    </div>
    
    <script type="text/javascript" src="js/jquery.min.js"></script>
    
    <script type="text/javascript" src="js/jquery.json-2.4.min.js"></script>
    
    <script type="text/javascript" src="js/verto-min.js"></script>
    
    <script type="text/javascript" src="js/md5.js"></script>
    
    <script type="text/javascript" src="high2.js"></script>
    
    </body>
    
    </html>

            这个文件使用CSS的引导框架,因此它可以在移动设备上完美工作,并适应各种不同的显示格式和尺寸。前几行代码就是为这个目的而写,设置一个极简但快速的GUI界面。在接下来的HTML主体中,有许多DIV、BUTTON、 INPUT、TEXTAREA,每个都有它自己的ID。

            我们将会在Javascript中用这些ID来引用每个独立的HTML元素,可以控制它们的显示和隐藏(比如说,在注册成功后隐藏登陆按钮),或者读取输入内容,或者输出某些内容(我们需要读取呼叫的号码,需要在文本区显示聊天的内容)。

            我们有一个特殊的"video"元素,bootstrap.css以一种漂亮的方式在各种设备上展示它。它的"id"将被VERTO和SIP.js的初始化脚本引用(例如,他们需要知道在哪里显示视频流)。

    最        后几行说明要加载的脚本。我们认得verto-min.js,它来自/usr/src/freeswitch/html5/verto/video_demo/js/verto-min.js,是VERTO JavaScript库的一种风格,随FreeSWITCH源码发布。在我们的脚本里,与HTML元素的ID交互的是high2.js。

     

    修改index.html的最后几行,加载SIP.js相关的几个脚本:

    <script type="text/javascript" src="js/jquery.min.js"></script>
    
    <script type="text/javascript" src="js/jquery.json-2.4.min.js"></script>
    
    <script type="text/javascript" src="js/sip.js"></script>
    
    <script type="text/javascript" src="js/md5.js"></script>
    
    <script type="text/javascript" src="highsipjs2.js"></script>
    
    </body>
    
    </html>

     

             我们之前描述过sip.js库,可以从http://sipjs.com/download/ 下载最新的版本。最后的highsipjs2.js是我们写的脚本。

     

     

            下面是VERTO 版的一个截图,我们打开Javascript 控制台,可以看到Verto 对象:

     

    JavaScript

    无论是VERTO还是SIP.js版,WebRTC聊天室的脚本是非常相似的。事实上,首先实现的是VERTO版,它是2016年出版的《"Mastering FreeSWITCH"》一书里的实例。在这本书中,你可以看到逐行的解说。新版中解决了一些问题,并增加了一些特性(自动应答、更友好的DTMF发送方式、可以呼叫非数字的分机,以及各种优化)。

    $(window).load(function() { cur_call = null; chatting_with = false;
    
    $("#conference").show();
    
    $("#ext").hide();
    
    $("#backbtn").hide();
    
    $("#cidname").hide();
    
    $("#callbtn").hide();
    
    $("#hupbtn").hide();
    
    $("#chatwin").hide();
    
    $("#chatmsg").hide();
    
    $("#chatsend").hide();
    
    $("#webcam").hide();
    
    $("#video1").hide();
    
    $("#login").keyup(function(event) {
    
    if (event.keyCode == 13 && !event.shiftKey) {
    
    $("#loginbtn").trigger("click");
    
    }
    
    });
    
    $("#ext").keyup(function(event) {
    
    if (event.keyCode == 13 && !event.shiftKey) {
    
    $("#callbtn").trigger("click");
    
    });
    
    }
    
    });

     

     

    启动时,两种风格的脚本都执行"load"函数,它设置HTML的可见元素,并定义了用户在登陆框或输入分机时按“回车”键的响应方式。

    用户填入登陆信息并按回车或点击登陆按钮时,会执行init()函数。在init()函数内部,创建主要的JavaScript对象----我们的WebRTC UA客户端。让我们看下SIP.js风格的代码,VERTO风格的很相似:

    function init() { cur_call = null;
    
    chatting_with = false;
    
    var nameHost;
    
    var which_server;
    
    nameHost = window.location.hostname;
    
    which_server = "wss://" + nameHost + ":" + "3384"; console.error("which_server=", which_server);
    
    ua = new SIP.UA({
    
    wsServers: which_server,
    
    uri: $("#login").val() + "@" + nameHost,
    
    password: $("#passwd").val(), userAgentString: 'SIP.js/0.7.7 Sara', traceSip: true,
    
    });
    
    
    
    $("#cidname").keyup(function(event) {
    
    if (event.keyCode == 13 && !event.shiftKey) {
    
    $("#callbtn").trigger("click");
    
    }
    
    });
    
    setupChat();
    
    $(document).keypress(function(event) {
    
    var key = String.fromCharCode(event.keyCode || event.charCode); var i = parseInt(key);
    
    var tag = event.target.tagName.toLowerCase();
    
    
    
    if (tag != 'input') {
    
    if (key === "#" || key === "*" || key === "0" || (i > 0 && i <=9)) {
    
    cur_call.dtmf(key);
    
    }
    
    }
    
    });
    
    }

     

            我们首先确保没有呼叫和聊天数据,清空数据结构。然后确定要连接的服务器(在基于域的分区进行大规模扩展时很有用),然后使用从HTML获取的值创建主要对象,即”ua”对象。

            我们准备在输入被叫号码时响应回车按键。

            然后,我们调用setupChat()函数,这个函数对两种风格的实现来说有些细微的差别。这是因为:在VERTO风格的实现中,我们需要填充"from"字段,而在SIP.js风格的实现中,这些字段由主对象自动设置。下面是VERTO风格的代码:

    function setupChat() {
    
    $("#chatwin").html("");
    
    
    
    $("#chatsend").click(function() {
    
    if (!cur_call && chatting_with) { return;
    
    }
    
    cur_call.message({
    
    to: chatting_with,
    
    body: $("#chatmsg").val(),
    
    from_msg_name: cur_call.params.caller_id_name, from_msg_number: cur_call.params.caller_id_number
    
    });
    
    $("#chatmsg").val("");
    
    });
    
    
    
    $("#chatmsg").keyup(function(event) {
    
    if (event.keyCode == 13 && !event.shiftKey) {
    
    $("#chatsend").trigger("click");
    
    }
    
    });
    
    }

     

            然后,我们可以管理许多按钮和场景:挂机、回退、呼叫,诸如此类。

            “呼叫”按钮执行docall()函数,两种风格的代码还是很相似:在SIP.js风格中调用INVITE方法,而在VERTO风格中调用newCall方法。它们得到或多或少相似的参数表:在VERTO风格代码中,你在主对象初始化时设置事件的回调函数;而SIP.js风格代码中,现在设置回调。

            让我们看看VERTO风格的代码:

    function docall() { if (cur_call) {
    
    return;
    
    }
    
    cur_call = verto.newCall({ destination_number: $("#ext").val(), caller_id_name: $("#login").val(), caller_id_number: $("#login").val(), useVideo: true,
    
    useStereo: true, useCamera: 'any', useSpeak: 'any', useMic: 'any'
    
    });
    
    }

     

            脚本的其余部分都是在设置回调,以响应聊天消息、挂机、以及会话的建立(比如等待对端应答)等等。

     

          下面是FreeSWITCH控制台的一幅截图,显示了chatplan信息,SIP的即时消息,还有Verto消息。

    让我们看看来电应答处理的区别(两种风格的代码都会自动替你应答)。

    SIP.js注册handleInvite函数作为来电事件的回调函数,下面是实现代码:

    function handleInvite(s) { cur_call = s;
    
    s.accept({
    
    media: {
    
    constraints: { audio: true,
    
    video: true
    
    },
    
    render: {
    
    remote: document.getElementById('webcam')
    
    }
    
    }
    
    });
    
    $("#ext").val(s.remoteIdentity.uri.toString()); cur_call.on('accepted', onAccepted.bind(cur_call)); cur_call.once('bye', onTerminated.bind(cur_call)); cur_call.once('failed', onTerminated.bind(cur_call)); cur_call.once('cancel', onTerminated.bind(cur_call));
    
    $("#chatwin").html("");
    
    }

     

            它接受呼叫,为媒体流给出自己的约束,设置一些呼叫事件(成功、远程挂机等)的回调,然后设置几个HTML字段的内容。

            VERTO风格的脚本同样注册了来电事件和状态变化(类似GUI消息驱动的编程风格)的回调函数:

    onDialogState: function(d) { if (!cur_call) {
    
    cur_call = d;
    
    }
    
    switch (d.state) {
    
    case $.verto.enum.state.ringing: console.error("RINGING");
    
    
    
    $("#webcam").show();
    
    $("#video1").show(); cur_call.answer({
    
    callee_id_name: "ciao", callee_id_number: "1234567", useVideo: true,
    
    useStereo: true, useCamera: true, useMic: true
    
    });
    
    break;

     

    待办事项

            内容很多!比如,用VERTO实现直接聊天(会议之外,普通呼叫的即时消息)。

            在SIP.js版本中,在聊天文本区打印发送的消息(接收消息的显示已经实现了)。

            交互与视觉的优化。

            添加按钮、菜单和命令来管理会议布局,版主职责,桌面共享等。

            对呼叫失败进行更健壮的管理,在出现问题时进行健壮的清理。

     

    总结

    这一章,我们讨论了以下内容:

    1. 什么是 WebRTC?它有什么意义?
    2. WebRTC中的强制安全
    3. FreeSWITCH的WebRTC 实现
    4. WebRTC中,信令协议 (SIP 和 Verto) 所扮演的角色
    5. 完成 FreeSWITCH 和支持WebRTC 的组件安装和配置(包括证书、Web服务器)
    6. 介绍一个超级先进和功能齐全的浏览器客户端,可实现WebRTC 视频会议和状态呈现:Verto Communicator
    7. 怎样用VERTO 或SIP.js 实现一个Web客户端

     

          这一章,我们研究了理论和细节,并学习了如何为我们的用户群建立真实的WebRTC服务。

           下一章,我们将深入XML拨号方案—FreeSWITCH内核的呼叫路由引擎。我们将研究如何实现最多样化的服务,同时利用缺省演示配置中的丰富示例。

     

    展开全文
  • WebRtcSIP

    2018-08-14 15:46:00
    最近研究一下 webrtc ,看了几篇paper,之前也尝试运行验证了几个demo,现在把我的理解总结到这里。 WebRTC 简介 WebRTC,名称源自网页实时通信(Web Real-Time Communication)的缩写,是一个支持网页浏览器...
  • webrtcsip兼容

    2018-08-02 09:14:00
    背景 (1)使用webrtc作为音视频处理引擎 (2)sip作...
  • ianblenke / webrtc2sip
  • 如何实现SIP协议与WebRTC协议与互通-2

    万次阅读 2020-11-19 17:20:54
    如何实现SIP协议与WebRTC协议与互通-2 不需要付费使用sdk,通过sip协议代理。即可快速实现sipwebrtc协议互通和webrtcsip协议互通 可私有化临近节点部署,最高支持上万并发! SIP协议与RTC协议是分属两个...
  • 2.运行WebRTC网页客户端 这里用到的网页客户端是sipml5,请自行下载,GitHub地址:https://github.com/DoubangoTelecom/sipml5 下载后需部署在web容器,通过浏览器访问。默认访问路径为:http:// 域名或ip /sipml5/...
  • asterisk实现webrtc拨打电话

    万次阅读 2020-11-18 10:56:03
    asterisk实现webrtc拨打电话。 asterisk在11版本以上,已经支持socket,实现网页拨打...改造后:支持sip转webtrc,支持freeswitch sip转webtrc,sipwebrtcwebrtcsip。并可独立部署,无需更改当前系统任何架构,甚
  • sipwebrtc的并实现网页拨打电话

    万次阅读 2020-11-17 13:34:37
    sipwebrtc的一种方法并实现网页拨打电话(非webrtc调用sdk) sipwebrtc的一种方法并实现网页拨打电话(非webrtc调用sdk),之前的项目是asterisk1.8版本,开发的呼叫中心系统,低版本asterisk不支持socket协议...
  • WebRTCSIP在信令层面上的区别?

    千次阅读 2017-03-07 13:21:21
    应该说webrtc不包含SIP这类信令层面的东西。所以SIPwebrtc没有可比性。 从WebRTC的标准来说, 信令没有规定要用那种, SIP/Jingle好像是推荐的 webrtc提供一个媒体协商流程,至于用sip xmpp还是...
  • sipjs+FreeSWITCH+webrtc电话呼入、呼出、转移、保持网页端的应用 备注:谷歌浏览器下运行,更改自己的分机、密码、服务器地址,可直接进行功能测试,更详细深入学习参考:http://sipjs.com/
  • 具体操作: 下载安装FreeSwitch http://files.freeswitch.org/windows/installer/ 如果是WIN7,下载1.6.18。具体参考: https://blog.csdn.net/quantum7/article/details/106027579 下载安装JDK8 ...
  • 基于sip+webrtc的视频客户端,可以对接运营商IMS
  • SIP and WebRTC IP Telephony.pdf
  • CentOS下编译webrtc2sip实战 0、引言 在研究WebRTC服务端画面合成和混音处理,需要实现浏览器端与服务器端的点对点,网上找了好些参考的项目,webrtc2sip项目就是其中之一,该项目基于doubango的框架,需要自行编译...
  • 1、概述 2、WebRTCSIP网关的SIP信令交互 3、信令兼容的常见问题以及解决方案
  • 本论文研究了SIPWebRTC间的融合通讯, 以及实现融合通讯终端的设计。
  • 支持webrtcsip js demo

    2020-03-18 02:03:17
    本DEMO代码,提供的一个基于WebRTC的JS SIP库的示例,可参考。
  • JsSIP + WebRTC + freeSWITCH视频会议

    万次阅读 2017-07-04 14:55:48
    WebRTC + JsSIP + freeSWITCH一对一视频聊天中我们展示了如何使用 WebRTC + JsSIP + freeSWITCH 构造一个 Web 视频聊天应用。这次会在上次的基础上,演示下视频会议系统的构建。
  • webrtc2sip

    2014-01-20 21:58:03
    webrtc2sip源码,r123,Smart SIP and Media Gateway to connect WebRTC endpoints to any SIP-legacy network
  • webrtc2sip项目说明

    千次阅读 2016-06-29 14:05:50
    第一章 webrtc2sip项目环境说明 1. 操作系统:CentOS6.x 64位版本 2. FreeSwitch版本号:1.2.x(注意:FreeSwitch最新版本有媒体协商错误问题) 3. FFmepg版本号:1.2.x(注意:FFmepg最新版本函数名及参数有修改...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,978
精华内容 791
关键字:

sipwebrtc