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

最新推荐文章于 2024-04-05 11:00:41 发布
最新推荐文章于 2024-04-05 11:00:41 发布
阅读量1.6k 收藏 4
点赞数
分类专栏： 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
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter WebRTC 实现1V1移动端跨平台实时音视频通信
11-19
本课程讲述如何使用Flutter-WebRTC实现1V1移动端跨平台实时音视频通信包括如何使用nodejs开发WebSocket信令服务器理解WebRTC媒体的交互流程coturn服务器搭建Flutter客户端开发
主流视频通话SDK比较
热门推荐
萨达哈鲁的博客
01-11 2万+
视频通话框架 主流的视频通讯框架比较多，此文主要通过Android平台的来做SDK平台使用的比较。 现在的视频热门框架有一些如： Jitsi  Jitsi是一个开源的，安全（ZRTP加密），高质量的SIP/XMPP视频通话、会议、聊天、桌面共享、文件传传输。可以安装在你喜欢的操作系统中并且支持多种IM网络。 官方网站：https://jitsi.org/ SIPDroid 
webrtcP2P音视频通话（一）
最新发布
pscool的博客
04-05 729
webrtcP2P通话流程 webrtc多对多 mesh方案
iOS下WebRTC音视频通话（二）-局域网内音视频通话
哈雷的博客
06-15 1万+
这里是iOS 下WebRTC音视频通话开发的第二篇，在这一篇会利用一个局域网内音视频通话的例子介绍WebRTC中常用的API。 如果你下载并编译完成之后，会看到一个iOS 版的WebRTC Demo。但是那个demo涉及到外网的通讯需要翻墙，而且还有对信令消息的封装理解起来非常的困难。 但是，我将要写的这个demo去掉了STUN服务器、TURN服务器配置，以及信令的包装，非常容易理解。
micropython webrtc_Android WebRTC 音视频开发总结
weixin_39890327的博客
12-10 411
前面介绍了WebRTCDemo的基本结构，本节主要介绍WebRTC音视频服务端的处理，，转载请说明出处(博客园RTC.Blacker)。通过前面的例子我们知道运行WebRTCDemo即可看到P2P的效果，实际应用中我们不可能让用户自己去里面设置对方的IP和音视频端口，而且即使设置了对方的IP和端口也不一定能运行起来，因为P2P如果双方不在同一个网段则还需穿透NAT，那服务端具体该如何部署呢？1、信...
XMPP即时通讯协议使用（十二）——基于xmpp搭建简单的局域网WebRTC
gmHappy
09-08 7264
创建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
基于webrtc native开发的音视频工具.zip
05-29
这个技术包括了音频、视频通话以及数据共享等功能，使得开发者能够轻松地在网页应用中实现点对点的音视频通讯。 在“基于WebRTC native开发的音视频工具”中，我们关注的是WebRTC的原生实现，这意味着开发者直接...
webRTC:webRTC-android xmpp
05-12
其中，XMPP（Extensible Messaging and Presence Protocol）是一种基于XML的开放标准，常用于即时通讯和在线状态管理。在WebRTC中，XMPP可以作为信令协议，用来建立和管理音视频会话的控制信息交换。 WebRTC与XMPP...
WebRTC零基础开发者教程(纯净版)
01-12
WebRTC，名称源自网页实时通信（Web Real-Time Communication）的缩写，是一个支持网页浏览器进行实时语音通话或视频聊天的技术，是谷歌2010年以6820万美元收购Global IP Solutions公司而获得的一项技术。...
Android系统中LBS即时通讯应用的设计与开发.pdf
09-22
接着，文章介绍了网页实时通信（WebRTC）框架，这是一个用于在不同浏览器之间实现音视频聊天的开源技术。WebRTC 基于 JavaScript 和 P2P，允许在没有客户端软件的情况下进行音视频通信。WebRTC 包含视频采集、编码、...
即时通讯工具
05-28
本项目是一个基于客户端的即时通讯工具，特别之处在于它不需要依赖中央服务器，这通常是通过P2P（对等网络）技术实现的。虽然该项目并未完全开发完成，但其核心概念和技术框架仍然值得我们深入探讨。 1. **P2P网络...
基于XMPP协议、HTML5的WebRTC
06-16
基于XMPP协议的WebRTC，应用与Web端HTML5的一个demo，仅供大家参考；大家一起学习。
Xmpp通信模块框架（基于webrtc的libjingle）
weixin_30781107的博客
01-23 372
前言：年总了，针对今年的一些工作进行总结，重新整理了发出来共享讨论。 一、概述 1、背景 提高与tigase通信的稳定性，降低因为代码混乱引起开发难度及开发出现的内测问题BUG等。 现有的xmpp框架使用第三方库libjingle，使用时存崩溃风险；现有的xmpp框架的可维护性低，开发修改存在较大风险。 2、说明 本设计文档作为模块的设计文档，为编码的依据。 二、分析 1、L...
基于WebRTC的多人视频会议
北雨南萍
02-20 7172
基于WebRTC的多人视频会议 25 July 2014 最近两周在调研和搭建基于WebRTC的多人视频会议系统。 目前已经搭建成功，可以在http://jitsi.shengbin.me/试用。 这个系统无需注册和登录，只要多人访问同一个URL（含有系统为每个房间分配的特定ID），就可以进行视频会议。 如果上面那个链接失效，可以尝试国外一个同样的系统：https://meet.ji
关于openfire的android音/视频聊天的方案问题
{竹子}
09-15 6153
关于android音/视频聊天的方案问题，探索了两周了，依然感觉模糊不清，不知道选择那一条路线 方式1：使用openfire作为服务器，spark作为客户端，通过openfire的一个red5插件redfire，既可以使用spark能进行语音/视频聊天，不过需要支持flash，然后想实现android的音/视频聊天，找了半天的资料找不到，普通的文本聊天有了很多例子。openfire是xmpp协议
Android之 集成音视频通话
qq_29848853的博客
03-29 2581
单独集成融云音视频通话SDK
构建 WebRTC 应用所需的后端服务 STUN, TURN
爱孜文
03-09 2258
Build the backend services needed for a WebRTC app STUN, TURN, and signaling 机翻 原文：Build the backend services needed for a WebRTC app: STUN, TURN, and signaling - HTML5 Rocks WebRTC支持对等通信，但它仍然需要服务器，以便客户端可以交换元数据，以通过称为信令的过程协调通信，并处理网络地址转换器（NAT）和防火墙。 本.
基于Android的即时通讯系统的研究与实现.pdf
06-21
该PDF文档深入研究了"基于Android的即时通讯系统"，它在当前信息技术领域具有...该论文不仅介绍了基于Android的即时通讯系统的设计原理，还涵盖了关键技术和实施策略，为读者展示了一个实用且高效的移动通信解决方案。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值