基于XMPP实现WebRTC通讯，实现一个简单的P2P视频通讯

最新推荐文章于 2024-04-27 16:48:43 发布
最新推荐文章于 2024-04-27 16:48:43 发布
阅读量1.6k 收藏 5
点赞数
分类专栏： xmpp

转载：http://blog.gopersist.com/2017/02/22/xmpp-webrtc/index.html

     • WebRTC
  
     • XMPP
  
     • Openfire
  
</p>

基于上一篇安装的Openfire和XMPP的知识，实现一个简单的P2P视频通讯。

创建HTML和JS

ofwebrtc.html

        30行

<html>
<head>
    <script src='//cdn.bootcss.com/jquery/1.9.1/jquery.min.js'></script>
    <script src='//cdn.bootcss.com/strophe.js/1.2.12/strophe.min.js'></script>
    <script src='ofwebrtc.js'></script>
</head>

<body>
<p id="info"></p>
<p>----------------------------------------------------------------</p>

        17行

JID：<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">id=</span><span class="s">"input-jid"</span> <span class="na">value=</span><span class="s">"one@localhost"</span><span class="nt">&gt;</span>
<span class="nt">&lt;br&gt;</span>
密码：<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">id=</span><span class="s">"input-pwd"</span> <span class="na">value=</span><span class="s">"111111"</span><span class="nt">&gt;</span>
<span class="nt">&lt;br&gt;</span>
<span class="nt">&lt;button</span> <span class="na">id=</span><span class="s">"btn-login"</span><span class="nt">&gt;</span>登录<span class="nt">&lt;/button&gt;&lt;br&gt;</span>

<span class="nt">&lt;br&gt;</span>
目标JID：
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">id=</span><span class="s">"input-contacts"</span> <span class="na">value=</span><span class="s">"two@localhost"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">id=</span><span class="s">"btn-call"</span><span class="nt">&gt;</span>Call<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;p&gt;</span>----------------------------------------------------------------<span class="nt">&lt;/p&gt;</span>

Local: <span class="nt">&lt;br&gt;</span>
<span class="nt">&lt;video</span> <span class="na">id=</span><span class="s">"localVideo"</span> <span class="na">autoplay</span><span class="nt">&gt;&lt;/video&gt;&lt;br&gt;</span>
Remote: <span class="nt">&lt;br&gt;</span>
<span class="nt">&lt;video</span> <span class="na">id=</span><span class="s">"remoteVideo"</span> <span class="na">autoplay</span><span class="nt">&gt;&lt;/video&gt;</span>

</body>
</html>

 

ofwebrtc.js

        234行

// XMPP帮助类
// boshService: XMPP服务器BOSH地址
function XMPPHelper(boshService) {
    var _this = this;

        83行

<span class="c1">// XMPP服务器BOSH地址</span>
<span class="nx">_this</span><span class="p">.</span><span class="nx">boshService</span> <span class="o">=</span> <span class="nx">boshService</span><span class="p">;</span>

<span class="c1">// XMPP连接</span>
<span class="nx">_this</span><span class="p">.</span><span class="nx">connection</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>

<span class="c1">// 当前状态是否连接</span>
<span class="nx">_this</span><span class="p">.</span><span class="nx">connected</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>

<span class="c1">// 当前登录的JID</span>
<span class="nx">_this</span><span class="p">.</span><span class="nx">jid</span> <span class="o">=</span> <span class="s2">""</span><span class="p">;</span>

<span class="c1">// 收到消息后的业务回调方法</span>
<span class="nx">_this</span><span class="p">.</span><span class="nx">messageCallback</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
<span class="nx">_this</span><span class="p">.</span><span class="nx">setMessageCallback</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">messageCallback</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">_this</span><span class="p">.</span><span class="nx">messageCallback</span> <span class="o">=</span> <span class="nx">messageCallback</span><span class="p">;</span>
<span class="p">}</span>

<span class="c1">// 接收到&lt;message&gt;</span>
<span class="kd">var</span> <span class="nx">onMessage</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">msg</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'--- msg ---'</span><span class="p">,</span> <span class="nx">msg</span><span class="p">);</span>

    <span class="c1">// 解析出&lt;message&gt;的from、type属性，以及body子元素</span>
    <span class="kd">var</span> <span class="nx">from</span> <span class="o">=</span> <span class="nx">msg</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="s1">'from'</span><span class="p">);</span>
    <span class="kd">var</span> <span class="nx">type</span> <span class="o">=</span> <span class="nx">msg</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="s1">'type'</span><span class="p">);</span>
    <span class="kd">var</span> <span class="nx">elems</span> <span class="o">=</span> <span class="nx">msg</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">'body'</span><span class="p">);</span>

    <span class="kd">var</span> <span class="nx">json</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">elems</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">innerHTML</span><span class="p">);</span>
    <span class="nx">json</span><span class="p">.</span><span class="nx">fromjid</span> <span class="o">=</span> <span class="nx">from</span><span class="p">;</span>

    <span class="k">if</span> <span class="p">(</span><span class="nx">type</span> <span class="o">===</span> <span class="s1">'chat'</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">_this</span><span class="p">.</span><span class="nx">messageCallback</span><span class="p">(</span><span class="nx">json</span><span class="p">);</span>
    <span class="p">}</span>

    <span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>

<span class="c1">// 连接状态改变的事件</span>
<span class="kd">var</span> <span class="nx">onConnect</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">status</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'status: '</span> <span class="o">+</span> <span class="nx">status</span><span class="p">)</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">status</span> <span class="o">==</span> <span class="nx">Strophe</span><span class="p">.</span><span class="nx">Status</span><span class="p">.</span><span class="nx">CONNFAIL</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">$</span><span class="p">(</span><span class="s1">'#info'</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="s2">"连接失败！"</span><span class="p">);</span>
    <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">status</span> <span class="o">==</span> <span class="nx">Strophe</span><span class="p">.</span><span class="nx">Status</span><span class="p">.</span><span class="nx">AUTHFAIL</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">$</span><span class="p">(</span><span class="s1">'#info'</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="s2">"登录失败！"</span><span class="p">);</span>
    <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">status</span> <span class="o">==</span> <span class="nx">Strophe</span><span class="p">.</span><span class="nx">Status</span><span class="p">.</span><span class="nx">DISCONNECTED</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">$</span><span class="p">(</span><span class="s1">'#info'</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="s2">"连接断开！"</span><span class="p">);</span>
        <span class="nx">_this</span><span class="p">.</span><span class="nx">connected</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
    <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">status</span> <span class="o">==</span> <span class="nx">Strophe</span><span class="p">.</span><span class="nx">Status</span><span class="p">.</span><span class="nx">CONNECTED</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">$</span><span class="p">(</span><span class="s1">'#info'</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="s2">"连接成功！"</span><span class="p">);</span>
        <span class="nx">_this</span><span class="p">.</span><span class="nx">connected</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>

        <span class="c1">// 当接收到&lt;message&gt;节，调用onMessage回调函数</span>
        <span class="nx">_this</span><span class="p">.</span><span class="nx">connection</span><span class="p">.</span><span class="nx">addHandler</span><span class="p">(</span><span class="nx">onMessage</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="s1">'message'</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="kc">null</span><span class="p">);</span>

        <span class="c1">// 首先要发送一个&lt;presence&gt;给服务器（initial presence）</span>
        <span class="nx">_this</span><span class="p">.</span><span class="nx">connection</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="nx">$pres</span><span class="p">().</span><span class="nx">tree</span><span class="p">());</span>
    <span class="p">}</span>
<span class="p">};</span>

<span class="c1">// 登录</span>
<span class="nx">_this</span><span class="p">.</span><span class="nx">login</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">jid</span><span class="p">,</span> <span class="nx">password</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">_this</span><span class="p">.</span><span class="nx">connection</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Strophe</span><span class="p">.</span><span class="nx">Connection</span><span class="p">(</span><span class="nx">_this</span><span class="p">.</span><span class="nx">boshService</span><span class="p">);</span>
    <span class="nx">_this</span><span class="p">.</span><span class="nx">connection</span><span class="p">.</span><span class="nx">connect</span><span class="p">(</span><span class="nx">jid</span><span class="p">,</span> <span class="nx">password</span><span class="p">,</span> <span class="nx">onConnect</span><span class="p">);</span>
    <span class="nx">_this</span><span class="p">.</span><span class="nx">jid</span> <span class="o">=</span> <span class="nx">jid</span><span class="p">;</span>
<span class="p">};</span>

<span class="nx">_this</span><span class="p">.</span><span class="nx">sendMessage</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">tojid</span><span class="p">,</span> <span class="nx">type</span><span class="p">,</span> <span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">_this</span><span class="p">.</span><span class="nx">connected</span> <span class="o">===</span> <span class="kc">false</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">alert</span><span class="p">(</span><span class="s2">"请先登录！！！"</span><span class="p">);</span>
        <span class="k">return</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="kd">var</span> <span class="nx">msg</span> <span class="o">=</span> <span class="nx">$msg</span><span class="p">({</span>
        <span class="na">to</span><span class="p">:</span> <span class="nx">tojid</span><span class="p">,</span>
        <span class="na">from</span><span class="p">:</span> <span class="nx">_this</span><span class="p">.</span><span class="nx">jid</span><span class="p">,</span>
        <span class="na">type</span><span class="p">:</span> <span class="s1">'chat'</span>
    <span class="p">}).</span><span class="nx">c</span><span class="p">(</span><span class="s2">"body"</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">({</span>
        <span class="na">type</span><span class="p">:</span> <span class="nx">type</span><span class="p">,</span>
        <span class="na">data</span><span class="p">:</span> <span class="nx">data</span>
    <span class="p">}));</span>
    <span class="nx">_this</span><span class="p">.</span><span class="nx">connection</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="nx">msg</span><span class="p">.</span><span class="nx">tree</span><span class="p">());</span>
<span class="p">};</span>

}

// WebRTC帮助类
// xmppHelper：XMPP帮助实例
// localVideo：本地视频显示的DOM
// remoteVideo：远端视频显示的DOM
function WebRTCHelper(xmppHelper, localVideo, remoteVideo) {
var _this = this;

        107行

<span class="c1">// 对方用户</span>
<span class="nx">_this</span><span class="p">.</span><span class="nx">tojid</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>

<span class="c1">// 创建PeerConnection实例 (参数为null则没有iceserver，即使没有stunserver和turnserver，仍可在局域网下通讯)</span>
<span class="nx">_this</span><span class="p">.</span><span class="nx">pc</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">webkitRTCPeerConnection</span><span class="p">(</span><span class="kc">null</span><span class="p">);</span>

<span class="nx">_this</span><span class="p">.</span><span class="nx">hasBindLocalVideo</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>

<span class="c1">// 发送ICE候选到其他客户端</span>
<span class="nx">_this</span><span class="p">.</span><span class="nx">pc</span><span class="p">.</span><span class="nx">onicecandidate</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">){</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'----------- tojid: '</span> <span class="o">+</span> <span class="nx">_this</span><span class="p">.</span><span class="nx">tojid</span><span class="p">);</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">candidate</span> <span class="o">!==</span> <span class="kc">null</span> <span class="o">&amp;&amp;</span> <span class="nx">_this</span><span class="p">.</span><span class="nx">tojid</span> <span class="o">!==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'----------- onicecandidate ------------'</span><span class="p">);</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'candidate'</span><span class="p">,</span> <span class="nx">event</span><span class="p">.</span><span class="nx">candidate</span><span class="p">);</span>

        <span class="nx">xmppHelper</span><span class="p">.</span><span class="nx">sendMessage</span><span class="p">(</span><span class="nx">_this</span><span class="p">.</span><span class="nx">tojid</span><span class="p">,</span> <span class="s1">'candidate'</span><span class="p">,</span> <span class="nx">event</span><span class="p">.</span><span class="nx">candidate</span><span class="p">);</span>
    <span class="p">}</span>
<span class="p">};</span>

<span class="c1">// 如果检测到媒体流连接到本地，将其绑定到一个video标签上输出</span>
<span class="nx">_this</span><span class="p">.</span><span class="nx">pc</span><span class="p">.</span><span class="nx">onaddstream</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">){</span>
    <span class="nx">remoteVideo</span><span class="p">.</span><span class="nx">src</span> <span class="o">=</span> <span class="nx">URL</span><span class="p">.</span><span class="nx">createObjectURL</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">stream</span><span class="p">);</span>
<span class="p">};</span>

<span class="c1">// 发送offer和answer的函数，发送本地session描述</span>
<span class="kd">var</span> <span class="nx">sendOfferFn</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">desc</span><span class="p">){</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'----------- sendOfferFn ------------'</span><span class="p">);</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'desc'</span><span class="p">,</span> <span class="nx">desc</span><span class="p">);</span>
    <span class="nx">_this</span><span class="p">.</span><span class="nx">pc</span><span class="p">.</span><span class="nx">setLocalDescription</span><span class="p">(</span><span class="nx">desc</span><span class="p">);</span>
    
    <span class="nx">xmppHelper</span><span class="p">.</span><span class="nx">sendMessage</span><span class="p">(</span><span class="nx">_this</span><span class="p">.</span><span class="nx">tojid</span><span class="p">,</span> <span class="s1">'offer'</span><span class="p">,</span> <span class="nx">desc</span><span class="p">);</span>
<span class="p">};</span>
<span class="kd">var</span> <span class="nx">sendAnswerFn</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">desc</span><span class="p">){</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'----------- sendAnswerFn ------------'</span><span class="p">);</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'desc'</span><span class="p">,</span> <span class="nx">desc</span><span class="p">);</span>
    <span class="nx">_this</span><span class="p">.</span><span class="nx">pc</span><span class="p">.</span><span class="nx">setLocalDescription</span><span class="p">(</span><span class="nx">desc</span><span class="p">);</span>

    <span class="nx">xmppHelper</span><span class="p">.</span><span class="nx">sendMessage</span><span class="p">(</span><span class="nx">_this</span><span class="p">.</span><span class="nx">tojid</span><span class="p">,</span> <span class="s1">'answer'</span><span class="p">,</span> <span class="nx">desc</span><span class="p">);</span>
<span class="p">};</span>

<span class="c1">// 绑定本地视频流</span>
<span class="kd">var</span> <span class="nx">bindLocalVideo</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">callback</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// 获取本地音频和视频流</span>
    <span class="nx">navigator</span><span class="p">.</span><span class="nx">webkitGetUserMedia</span><span class="p">({</span>
        <span class="s2">"audio"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
        <span class="s2">"video"</span><span class="p">:</span> <span class="kc">true</span>
    <span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">stream</span><span class="p">){</span>
        <span class="c1">//绑定本地媒体流到video标签用于输出</span>
        <span class="nx">localVideo</span><span class="p">.</span><span class="nx">src</span> <span class="o">=</span> <span class="nx">URL</span><span class="p">.</span><span class="nx">createObjectURL</span><span class="p">(</span><span class="nx">stream</span><span class="p">);</span>
        <span class="c1">//向PeerConnection中加入需要发送的流</span>
        <span class="nx">_this</span><span class="p">.</span><span class="nx">pc</span><span class="p">.</span><span class="nx">addStream</span><span class="p">(</span><span class="nx">stream</span><span class="p">);</span>
        <span class="nx">callback</span><span class="p">();</span>
    <span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">){</span>
        <span class="c1">//处理媒体流创建失败错误</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'getUserMedia error: '</span> <span class="o">+</span> <span class="nx">error</span><span class="p">);</span>
    <span class="p">});</span>
<span class="p">};</span>

<span class="c1">// 开始视频通讯</span>
<span class="nx">_this</span><span class="p">.</span><span class="nx">start</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">tojid</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">_this</span><span class="p">.</span><span class="nx">tojid</span> <span class="o">=</span> <span class="nx">tojid</span><span class="p">;</span>

    <span class="k">if</span> <span class="p">(</span><span class="nx">_this</span><span class="p">.</span><span class="nx">hasBindLocalVideo</span> <span class="o">===</span> <span class="kc">false</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">bindLocalVideo</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
            <span class="c1">// 发送一个offer信令</span>
            <span class="nx">_this</span><span class="p">.</span><span class="nx">pc</span><span class="p">.</span><span class="nx">createOffer</span><span class="p">(</span><span class="nx">sendOfferFn</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'Failure callback: '</span> <span class="o">+</span> <span class="nx">error</span><span class="p">);</span>
            <span class="p">});</span>
        <span class="p">});</span>
        <span class="nx">_this</span><span class="p">.</span><span class="nx">hasBindLocalVideo</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
        <span class="c1">// 发送一个offer信令</span>
        <span class="nx">_this</span><span class="p">.</span><span class="nx">pc</span><span class="p">.</span><span class="nx">createOffer</span><span class="p">(</span><span class="nx">sendOfferFn</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'Failure callback: '</span> <span class="o">+</span> <span class="nx">error</span><span class="p">);</span>
        <span class="p">});</span>
    <span class="p">}</span>
<span class="p">};</span>

<span class="c1">// 收到对方信息后的处理</span>
<span class="nx">_this</span><span class="p">.</span><span class="nx">onMessage</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">json</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'onMessage: '</span><span class="p">,</span> <span class="nx">json</span><span class="p">);</span>

    <span class="k">if</span> <span class="p">(</span><span class="nx">_this</span><span class="p">.</span><span class="nx">tojid</span> <span class="o">===</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">_this</span><span class="p">.</span><span class="nx">tojid</span> <span class="o">=</span> <span class="nx">json</span><span class="p">.</span><span class="nx">fromjid</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="k">if</span> <span class="p">(</span><span class="nx">json</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="s1">'candidate'</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">_this</span><span class="p">.</span><span class="nx">pc</span><span class="p">.</span><span class="nx">addIceCandidate</span><span class="p">(</span><span class="k">new</span> <span class="nx">RTCIceCandidate</span><span class="p">(</span><span class="nx">json</span><span class="p">.</span><span class="nx">data</span><span class="p">));</span>
    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
        <span class="nx">_this</span><span class="p">.</span><span class="nx">pc</span><span class="p">.</span><span class="nx">setRemoteDescription</span><span class="p">(</span><span class="k">new</span> <span class="nx">RTCSessionDescription</span><span class="p">(</span><span class="nx">json</span><span class="p">.</span><span class="nx">data</span><span class="p">));</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">json</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="s1">'offer'</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">_this</span><span class="p">.</span><span class="nx">hasBindLocalVideo</span> <span class="o">===</span> <span class="kc">false</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">bindLocalVideo</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                    <span class="nx">_this</span><span class="p">.</span><span class="nx">pc</span><span class="p">.</span><span class="nx">createAnswer</span><span class="p">(</span><span class="nx">sendAnswerFn</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
                        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'Failure callback: '</span> <span class="o">+</span> <span class="nx">error</span><span class="p">);</span>
                    <span class="p">});</span>
                <span class="p">});</span>
                <span class="nx">_this</span><span class="p">.</span><span class="nx">hasBindLocalVideo</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
            <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                <span class="nx">_this</span><span class="p">.</span><span class="nx">pc</span><span class="p">.</span><span class="nx">createAnswer</span><span class="p">(</span><span class="nx">sendAnswerFn</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
                    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'Failure callback: '</span> <span class="o">+</span> <span class="nx">error</span><span class="p">);</span>
                <span class="p">});</span>
            <span class="p">}</span>
        <span class="p">}</span>
    <span class="p">}</span>
<span class="p">}</span>

}

$(document).ready(function() {
// 实例化XMPP和WebRTC帮助类
var xmppHelper = new XMPPHelper('/http-bind/');
var webRTCHelper = new WebRTCHelper(xmppHelper, document.getElementById('localVideo'), document.getElementById('remoteVideo'));

        19行

<span class="c1">// XMPP收到消息后转给WebRTC</span>
<span class="nx">xmppHelper</span><span class="p">.</span><span class="nx">setMessageCallback</span><span class="p">(</span><span class="nx">webRTCHelper</span><span class="p">.</span><span class="nx">onMessage</span><span class="p">);</span>

<span class="nx">$</span><span class="p">(</span><span class="s1">'#btn-login'</span><span class="p">).</span><span class="nx">click</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'jid: '</span> <span class="o">+</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#input-jid"</span><span class="p">).</span><span class="nx">val</span><span class="p">());</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'pwd: '</span> <span class="o">+</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#input-pwd"</span><span class="p">).</span><span class="nx">val</span><span class="p">());</span>
    <span class="nx">xmppHelper</span><span class="p">.</span><span class="nx">login</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s2">"#input-jid"</span><span class="p">).</span><span class="nx">val</span><span class="p">(),</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#input-pwd"</span><span class="p">).</span><span class="nx">val</span><span class="p">());</span>
<span class="p">});</span>

<span class="nx">$</span><span class="p">(</span><span class="s1">'#btn-call'</span><span class="p">).</span><span class="nx">click</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">if</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s2">"#input-contacts"</span><span class="p">).</span><span class="nx">val</span><span class="p">()</span> <span class="o">==</span> <span class="s1">''</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">alert</span><span class="p">(</span><span class="s2">"请输入目标用户！"</span><span class="p">);</span>
        <span class="k">return</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nx">tojid</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#input-contacts"</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>

    <span class="nx">webRTCHelper</span><span class="p">.</span><span class="nx">start</span><span class="p">(</span><span class="nx">tojid</span><span class="p">);</span>
<span class="p">});</span>

});

 

测试

打开Chrome，访问ofwebrtc.html页面，如：http://172.16.218.131/ofwebrtc.html。

将JID修改为two@localhost，点击登录。

再打开一个Chrome访问ofwebrtc.html页面，点击登录，然后点击Call呼叫two@localhost。在下面的Local和Remote会出来两个画面。

微信订阅号：

        11行

<script type="text/javascript">
var duoshuoQuery = {short_name:"gopersist"};
	(function() {
		var ds = document.createElement('script');
		ds.type = 'text/javascript';ds.async = true;
		ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
		ds.charset = 'UTF-8';
		(document.getElementsByTagName('head')[0] 
		 || document.getElementsByTagName('body')[0]).appendChild(ds);
	})();
</script>

        1行

  </div>
franywhy
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WebRTC零基础开发者教程(纯净版)
01-12
WebRTC 简介 WebRTC，名称源自网页实时通信（Web Real-Time Communication）的缩写，是一个支持网页浏览器进行实时语音通话或视频聊天的技术，是谷歌2010年以6820万美元收购Global IP Solutions公司而获得的一项技术。 WebRTC提供了实时音视频的核心技术，包括音视频的采集、编解码、网络传输、显示等功能，并且还支持跨平台：windows，linux，mac，android。 虽然WebRTC的目标是实现跨平台的Web端实时音视频通讯，但因为核心层代码的Native、高品质和内聚性，开发者很容易进行除Web平台外的移殖和应用。很长一段时间内WebRTC是业界能免费得到的唯一高品质实时音视频通讯技术。 为什么需要 WebRTC 开发者教程？ 虽然WebRTC技术已经较为成熟，其集成了最佳的音/视频引擎，十分先进的codec，且包含了使用STUN、ICE、TURN、RTP-over-TCP的关键NAT和防火墙穿透等众多门槛并不低的技术。抛开音视频技术本身的复杂性外，要想找到合适的资料、完整的代码和库、配合合适的IDE和辅助工具能正常地实现编译和安装都非常的不容易，而这还只是个开始。没有靠谱的教程，你该怎么开始？那么地坑等在那，难道你打算一个一个趟过去？ 本《WebRTC 零基础开发者教程》主要讲了什么 本文中提供下载的《WebRTC 零基础开发者教程》将以一个初学者的角度，从0开始逐步引导你掌握WebRTC开发的方方面面（当然，教程中更多的是操作性的内容，具体到技术原理和实现，显然不是本教程的讨论范畴）。 《WebRTC 零基础开发者教程》目录 1 工具 1.1 depot_tools 1.1.1 目标 1.1.2 Chromium 1.1.3 使用说明在这儿 1.1.4 下载 1.1.5 使用 1.1.6 具体使用例子 1.2 Gyp工具 1.3 Python工具 1.4 本地集成开发环境（IDE ） 1.4.1 Visual studio 1.4.2 Kdevelop 1.4.3 Eclipse 2 Webrtc 2.1 下载、编译 2.1.1 Windows下 2.1.2 ubuntu下编译 2.1.3 编译Android(只能在 linux 下) 3 webrtc开发 3.1 开发P2P视频软件需要处理的问题 3.1.1 用户列的获取、交换、信令的交换 3.1.2 P2P通信 3.1.3 多媒体处理 3.2 webrtc架构 3.2.1 WebRTC架构组件介绍 3.2.2 WebRTC核心模块API介绍 3.2.3 webRTC核心API详解 4 Libjingle详细介绍 4.1 重要组件 4.1.1 信号 4.1.2 线程和消息 4.1.3 名称转换 4.1.4 SSL支持 4.1.5 连接 4.1.6 传输，通道，连接 4.1.7 候选项 4.1.8 数据包 4.2 如何工作 4.2.1 Application模块 4.2.2 XMPP Messaging Component 模块 4.2.3 Session Logic and management commponent 模块 4.2.4 Peer to peer Component 模块 4.2.5 其他 4.3 建立libjingle应用程序 5 代码分析 5.1 音频通道建立过程 5.2 音频接收播放过程 5.3 视频接收播放过程 6 协议 6.1 XMPP协议 6.1.1 原理介绍 6.1.2 XMPP 协议网络架构 6.1.3 XMPP 协议的组成 6.1.4 Xmpp介绍 6.1.5 协议内容 6.2 Stun协议 6.2.1 P2P实现的原理 6.2.2 P2P的常用实现 6.2.3 Stun URI 6.2.4 内容 6.2.5 中文内容 6.2.6 开源服务器 6.2.7 公开的免费STUN服务器 6.3 Turn协议 6.3.1 概念 6.3.2 Turn uri 6.3.3 开源服务器工程 6.3.4 开源库 6.4 交互式连接建立（Interactive Connectivity Establishment） 6.4.1 IETF规格 6.4.2 开源工程 6.5 XEP-0166 Jingle 6.5.1 绪论 6.5.2 需求 6.6 Sctp协议 6.7 Rtp协议 7 附件 7.1 Gyp工具 7.2 Google test程序 7.3 Webrtc库介绍 7.4 webrtc代码相关基础知识 7.5 STUN和TURN技术浅析 7.6 基于ICE的VoIP穿越NAT改进方案 7.7 ubuntu安装使用stuntman 7.8 一个开源的ICE库——libnice介绍 7.9 4种利用TURN穿越对称型NAT方案的设计与实现 7.10 基于ICE方式SIP信令穿透Symmetric_NAT技术研究
webRTC:webRTC-android xmpp
05-12
其中，XMPP（Extensible Messaging and Presence Protocol）是一种基于XML的开放标准，常用于即时通讯和在线状态管理。在WebRTC中，XMPP可以作为信令协议，用来建立和管理音视频会话的控制信息交换。 WebRTC与XMPP...
webrtcP2P音视频通话（二）
最新发布
pscool的博客
04-27 598
文章目录webrtc实现视频会议示例客户端代码client.html服务端代码SignalWsServerWsConfig效果 webrtc实现视频会议 学习链接：webrtc实现视频会议，web多人视频通话，websocket通信 ，全部的代码：包括java的后端，vue的webrtc客户端前端代码，放在了微信收藏中 vite配置https、nginx配置ssl、openssl本地搭建 示例 客户端代码 client.html <!DOCTYPE html> <html lang="en
Xmpp+openfire+smack音视频（PC和移动端）
chenhande1990chenhan的专栏
04-13 7627
一、XMPP XMPP协议是一种基于XML的协议，叫做可扩展通讯和表示协议，其前身是Jabber，一个开源形式组织产生的网络即时通讯协议。XMPP协议目前被IETF国际标准组织完成了标准化工作，标准化的核心结果为两部分：1、核心的XML流传输协议；2、基于XMLFreeEIM流传输的即时通讯扩展应用。 XMPP官网上有基于XMPP协议的各种平台的服务器、客户端以及各种语言支持的內库，也就是说基
主流视频通话SDK比较
热门推荐
萨达哈鲁的博客
01-11 2万+
视频通话框架 主流的视频通讯框架比较多，此文主要通过Android平台的来做SDK平台使用的比较。 现在的视频热门框架有一些如： Jitsi  Jitsi是一个开源的，安全（ZRTP加密），高质量的SIP/XMPP视频通话、会议、聊天、桌面共享、文件传传输。可以安装在你喜欢的操作系统中并且支持多种IM网络。 官方网站：https://jitsi.org/ SIPDroid 
Flutter WebRTC 实现1V1移动端跨平台实时音视频通信
11-19
本课程讲述如何使用Flutter-WebRTC实现1V1移动端跨平台实时音视频通信包括如何使用nodejs开发WebSocket信令服务器理解WebRTC媒体的交互流程coturn服务器搭建Flutter客户端开发
iOS下WebRTC音视频通话（二）-局域网内音视频通话
哈雷的博客
06-15 1万+
这里是iOS 下WebRTC音视频通话开发的第二篇，在这一篇会利用一个局域网内音视频通话的例子介绍WebRTC中常用的API。 如果你下载并编译完成之后，会看到一个iOS 版的WebRTC Demo。但是那个demo涉及到外网的通讯需要翻墙，而且还有对信令消息的封装理解起来非常的困难。 但是，我将要写的这个demo去掉了STUN服务器、TURN服务器配置，以及信令的包装，非常容易理解。
micropython webrtc_Android WebRTC 音视频开发总结
weixin_39890327的博客
12-10 413
前面介绍了WebRTCDemo的基本结构，本节主要介绍WebRTC音视频服务端的处理，，转载请说明出处(博客园RTC.Blacker)。通过前面的例子我们知道运行WebRTCDemo即可看到P2P的效果，实际应用中我们不可能让用户自己去里面设置对方的IP和音视频端口，而且即使设置了对方的IP和端口也不一定能运行起来，因为P2P如果双方不在同一个网段则还需穿透NAT，那服务端具体该如何部署呢？1、信...
XMPP即时通讯协议使用（十二）——基于xmpp搭建简单的局域网WebRTC
gmHappy
09-08 7268
创建HTML和JS ofwebrtc.html &lt;!DOCTYPE html&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;HTML5 GetUserMedia Demo&lt;/title&gt; &lt;meta name="viewport&qu
Xmpp通信模块框架（基于webrtc的libjingle）
weixin_30781107的博客
01-23 374
前言：年总了，针对今年的一些工作进行总结，重新整理了发出来共享讨论。 一、概述 1、背景 提高与tigase通信的稳定性，降低因为代码混乱引起开发难度及开发出现的内测问题BUG等。 现有的xmpp框架使用第三方库libjingle，使用时存崩溃风险；现有的xmpp框架的可维护性低，开发修改存在较大风险。 2、说明 本设计文档作为模块的设计文档，为编码的依据。 二、分析 1、L...
基于webrtc native开发的音视频工具.zip
05-29
这个技术包括了音频、视频通话以及数据共享等功能，使得开发者能够轻松地在网页应用中实现点对点的音视频通讯。 在“基于WebRTC native开发的音视频工具”中，我们关注的是WebRTC的原生实现，这意味着开发者直接...
Android系统中LBS即时通讯应用的设计与开发.pdf
09-22
接着，文章介绍了网页实时通信（WebRTC）框架，这是一个用于在不同浏览器之间实现音视频聊天的开源技术。WebRTC 基于 JavaScript 和 P2P，允许在没有客户端软件的情况下进行音视频通信。WebRTC 包含视频采集、编码、...
即时通讯工具
05-28
本项目是一个基于客户端的即时通讯工具，特别之处在于它不需要依赖中央服务器，这通常是通过P2P（对等网络）技术实现的。虽然该项目并未完全开发完成，但其核心概念和技术框架仍然值得我们深入探讨。 1. **P2P网络...
基于WebRTC的多人视频会议
北雨南萍
02-20 7178
基于WebRTC的多人视频会议 25 July 2014 最近两周在调研和搭建基于WebRTC的多人视频会议系统。 目前已经搭建成功，可以在http://jitsi.shengbin.me/试用。 这个系统无需注册和登录，只要多人访问同一个URL（含有系统为每个房间分配的特定ID），就可以进行视频会议。 如果上面那个链接失效，可以尝试国外一个同样的系统：https://meet.ji
关于openfire的android音/视频聊天的方案问题
{竹子}
09-15 6159
关于android音/视频聊天的方案问题，探索了两周了，依然感觉模糊不清，不知道选择那一条路线 方式1：使用openfire作为服务器，spark作为客户端，通过openfire的一个red5插件redfire，既可以使用spark能进行语音/视频聊天，不过需要支持flash，然后想实现android的音/视频聊天，找了半天的资料找不到，普通的文本聊天有了很多例子。openfire是xmpp协议
Android之 集成音视频通话
qq_29848853的博客
03-29 2625
单独集成融云音视频通话SDK
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值