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

Webrtc的ios框架編譯

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

 

 

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.css

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

 

 

icon-projects.png

Based on GStreamer

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

 

 

 

 

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.node

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

 

 

 

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.android

 

 

 

 

 

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

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

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

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視頻聊天。可是須要優化的地方還不少。繼續研究。

相關文章
相關標籤/搜索