跨平台的WebRTC客戶端框架:OpenWebRTC


Webrtc的ios框架編譯

http://www.th7.cn/Program/IOS/201502/390418.shtml

 

 

WebRTC in WebKit : http://www.webrtcinwebkit.org/

 

 

 

OpenWebRTC was designed for flexibility and modularity. The bulk of the API layer is implemented in JavaScript, making it super fast to modify and extend with new functionality. Below is a simplified sketch of the architecture.

OpenWebRTC 是基於 Gstreamer 實現的開源的、跨平台的 WebRTC 客戶端框架,支持 H.264 和 VP8。利用 OpenWebRTC,WebRTC就不再僅僅是純粹瀏覽器技術了,你可以在NativeAPP中使用WebRTC,並且還可以與瀏覽器WebRTC互聯互通。\Simplified architecture

 

 

icon-projects.png

Based on GStreamer

Among other great projects, OpenWebRTC is built on top of widely used and powerful GStreamer multimedia framework.

 

 

 

 

Extension of UIWebView

 

Bowser is based on the official UIWebView provided by the platform and the WebRTC API's are implemented with JavaScript that is injected into web pages as they load, the injected JavaScript code is using remote procedure calls to control the OpenWebRTC backend.

The plan is to move to the WKWebView, introduced in iOS 8, as soon as possible.

 

 

 

Background

 

Bowser was originally developed by Ericsson Research and released in October of 2012, for both iOS and Android devices. Back then Bowser was the world's first WebRTC-enabled browser for mobile devices. Bowser was later removed from the Apple App Store and Google Play but was resurrected and released as Open Source together with OpenWebRTC.

 

 

 

 

 

·愛立信研究院通過推出自由開源的網頁瀏覽器和底層框架,繼續致力於WebRTC標准

·目前這一瀏覽器是iOS上唯一的WebRTC瀏覽器

·OpenWebRTC是一個靈活的跨平台WebRTC客戶端框架,可用於構建本地 WebRTC應用和瀏覽器后端

C114訊 愛立信研究院日前宣布推出自由開源的網頁瀏覽器Bowser和底層框架OpenWebRTC,旨在為開發人員提供更多的選擇和更大的靈活性,從而進一步加快WebRTC(網頁實時通信)領域的創新。

WebRTC提供了一種實時構建語音、視頻及數據應用的超簡單方法,WebRTC包括一系列的API及協議,萬維網聯盟(W3C)和互聯網工程任務組(IETF)正在對這些API和協議進行標准化。

OpenWebRTC依托的理念就是,WebRTC標准會超越純瀏覽器環境,而本地應用會實現相同的協議和API,成為WebRTC生態系統的重要部分。在移動平台上尤其如此,發布本地應用通常比純網絡應用更可取。

圖 :愛立信研究院研究主管Stefan Ålund

愛立信研究院研究主管Stefan Ålund表示:“我們在2012年推出了Bowser,獲得了廣泛歡迎。現在,我們不僅推出了Bowser,還推出了近幾年一直在愛立信內部開發和使用的底層跨平台WebRTC框架。”

愛立信研究院積極參與 WebRTC的標准化進程,自成立以來一直致力於實現該標准的原型。此標准要實現,IETF和W3C均要求至少實現兩個獨立的、可互操作的標准。

Ålund繼續說:“WebRTC標准仍在發展,開發人員也在不斷尋找利用這一技術的新方法。我院工程師構建的OpenWebRTC ,可極其簡單地進行修改和擴展,以便留出空間嘗試更多的API及新特點。”

Bower作為開放源碼推出,已提交至蘋果應用程序商店,很快就可免費下載。

 

 

 

 

 

 

Safari開始支持WebRTC

 2015年9月12日

 

 

 

WebRTC和WebKit

WebRTC是基於瀏覽器的實時通信接口,主要支持通過瀏覽器進行點對點的音頻以及視頻通信。WebRTC規范由W3CIETF共同制定。通過這些API,Web開發者可以通過標准的JavaScript API在網頁中嵌入視頻、音頻通信功能。

WebKit是一個開源的瀏覽器引擎,它由WebCore排版引擎、JSCore JavaScript引擎和各種平台移植代碼組成。WebKit目前缺乏對WebRTC標准的支持,因此開發者構建了webrtcinwebkit.org網站,開始在WebKit上加入對WebRTC的支持。最初,該項目在WebKit的GTK移植中使用OpenWebRTC增加對WebRTC支持,后續的支持,將會逐漸放入到WebCore中,這樣基於WebKit的所有移植環境就能方便的使用。同時,該項目未來還將接入更多的WebRTC實現后段,比如webrtc.org等。

這些工作會使蘋果公司更容易的在Safari上實現WebRTC功能。

蘋果公司做了什么?

WebKit只是一個瀏覽器引擎,每個使用它的瀏覽器,都是一個移植版本(port)。webrtcinwebkit項目,最早在WebKit的GTK移植上進行了測試,在7月的時候,Linux版瀏覽器實現了對getUserMedia接口的支持。

針對不同瀏覽器針對WebRTC協議棧的實現,可以參見這個幻燈片。作為背景知識,它介紹了不同瀏覽器如何將WebRTC實現融合到自己的架構中去。

對於蘋果公司,mac平台上的Safari和iOS平台上的Safari是獨立的WebKit移植版本。它們沒法直接使用之前為GTK移植版本上使用的WebRTC接入代碼。因此蘋果公司需要單獨為這兩個移植版本實現WebRTC的接入。

截至8月底,通過的Git倉庫的提交記錄的篩選,蘋果公司的主要改動有:

  • 針對mac和iOS平台上的改動
    • /platform/mediastream/mac
    • /platform/mac-mavericks/
    • /platform/mac-yosemite/
  • 針對AVFoundation接口的修改(AVVideoCaptureSource.h)
  • 針對蘋果平台構建文件的修改(WebCore.xcodeproj/project.pbxproj)

從改動來看,目前蘋果已經實現了對GetUserMedia和MediaStream接口在mac和iOS兩個平台上的支持。進而支持了對音頻、視頻設備的列舉和選擇,支持視頻、音頻流作為audio和video兩個標簽的輸入來源,支持視頻抓取等等功能。

不過,和webrtcinwebkit項目最初實現一樣,這些代碼改動主要在mac系統移植部分。這是由於WebRTC中的很多功能,涉及到平台相關硬件設備交互、媒體流等需要在標簽頁之間共享,使得改動主要針對渲染層。

希望這些修改能夠讓我們能夠盡快的在Safari或者iOS的WebView中看見效果。

 

 

 

 

 

openwebrtc(1) 服務端和android客戶端demo安裝

 

 

 

 

1,關於openwebrtc

 

OpenWebRTC 是基於 Gstreamer 實現的開源的、跨平台的 WebRTC 客戶端框架,支持 H.264 和 VP8。利用 OpenWebRTC,WebRTC就不再僅僅是純粹瀏覽器技術了,你可以在NativeAPP中使用WebRTC,並且還可以與瀏覽器WebRTC互聯互通。

這里寫圖片描述

2,安裝服務端demo

demo使用nodejs做服務器。centos安裝:

<code class="hljs cmake has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">yum <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">install</span> nodejs nodejs-devel</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; "><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

下載example代碼:

<code class="hljs vala has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">cd /data git clone https:<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//github.com/EricssonResearch/openwebrtc-examples.git</span> cd openwebrtc-examples/web <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#啟動</span> nohup node channel_server.js & <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#默認端口8080</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; "><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>

安裝文檔參考: 
https://github.com/EricssonResearch/openwebrtc-examples/tree/master/web

之后就可以在web進行視頻了,使用支出webrtc的瀏覽器。首先創建房間,然后讓另一個客戶端,join再call就可以了。

3,android客戶端demo

下載最新的android studio,配置好。編譯android項目。 
https://github.com/EricssonResearch/openwebrtc-examples/tree/master/android/NativeCall 
項目NativeCall 是客戶端sdkdemo。比較粗糙。 
需要注意的是,編譯會出警告。增加配置:abortOnError : false

<code class="hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">apply plugin: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'com.android.application'</span> android { compileSdkVersion <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">22</span> buildToolsVersion <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"21.1.2"</span> defaultConfig { applicationId <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"com.ericsson.research.owr.examples.nativecall"</span> minSdkVersion <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">16</span> targetSdkVersion <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">22</span> versionCode <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span> versionName <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"1.0"</span> ndk { abiFilter <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"armeabi-v7a"</span> } } <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// compileOptions {</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// sourceCompatibility JavaVersion.VERSION_1_7</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// targetCompatibility JavaVersion.VERSION_1_7</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// }</span> productFlavors { } android { lintOptions { abortOnError <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">false</span> } } } dependencies { <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// See settings.gradle for local dev instructions</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// compile project(':openwebrtc-sdk')</span> compile <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'io.openwebrtc:openwebrtc-android-sdk:0.1.0'</span> } </code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; "><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li></ul>

其中buildToolsVersion 根據自己的版本修改。

修改config配置,進入app再修改也行。假設服務安裝在192.168.1.60。

<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">package</span> com.ericsson.research.owr.examples.nativecall; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">class</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">Config</span> {</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/* Changing this does not take effect until app user data is cleared or the app is uninstalled. The server address can be configured inside the application by pressing the icon in the top right. */</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//public static final String DEFAULT_SERVER_ADDRESS = "http://demo.openwebrtc.io:38080";</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">final</span> String DEFAULT_SERVER_ADDRESS = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"http://192.168.1.60:8080"</span>; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">final</span> String STUN_SERVER = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"mmt-stun.verkstad.net"</span>; } </code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; "><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li></ul>

4,總結

本文的原文連接是: http://blog.csdn.net/freewebsys/article/details/46649667 轉載請一定注明出處!

android客戶端,可以和web端進行視頻,但是好像木有聲音,需要再研究下。 
使用openwebrtc可以很簡單的搭建web視頻聊天。但是需要優化的地方還很多。繼續研究。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM