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

简介: Webrtc的ios框架编译 http://www.th7.cn/Program/IOS/201502/390418.shtml     WebRTC in WebKit : http://www.

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视频聊天。但是需要优化的地方还很多。继续研究。

目录
相关文章
|
22天前
|
Web App开发 编解码 安全
【WebRTC 入门教程】全面解析WebRTC:从底层原理到Qt和FFmpeg的集成应用
【WebRTC 入门教程】全面解析WebRTC:从底层原理到Qt和FFmpeg的集成应用
149 1
|
4月前
|
Web App开发 前端开发
ZLMediaKit解决webrtc前端replaceTrack断流问题
ZLMediaKit解决webrtc前端replaceTrack断流问题
【Xamarin】使用WebSocket开发实时通信应用程序
WebSockets是一种双向通信协议,或TCP连接上的持久通信通道,由许多游戏,具有聊天功能的应用程序和实时应用程序(如股票行情)利用的非常强大的协议。 在这篇博文中,我们将讨论如何构建一个简单的Xamarin聊天室应用程序,该应用程序将利用并连接到ASP.NET Core WebSocket服务。
2878 0
|
7月前
|
传感器 安全 物联网
一个非常优秀的跨平台物联网开发常用的网络请求库libcurl
一个非常优秀的跨平台物联网开发常用的网络请求库libcurl
175 1
|
7月前
|
编解码 监控 开发工具
跨平台轻量级RTSP服务模块设计思路及实现探讨
为满足内网无纸化/电子教室等内网超低延迟需求,避免让用户配置单独的服务器,我们发布了轻量级RTSP服务模块,轻量级RTSP服务解决的核心痛点是避免用户或者开发者单独部署RTSP或者RTMP服务,实现本地的音视频数据(如摄像头、麦克风),编码后,汇聚到内置RTSP服务,对外提供可供拉流的RTSP URL,轻量级RTSP服务,适用于内网环境下,对并发要求不高的场景,支持H.264/H.265,支持RTSP鉴权、单播、组播模式,考虑到单个服务承载能力,我们支持同时创建多个RTSP服务,并支持获取当前RTSP服务会话连接数。
|
8月前
|
前端开发
从零玩转Websocket实时通讯服务之前后端分离版本
从零玩转Websocket实时通讯服务之前后端分离版本
117 0
|
8月前
|
安全 API Android开发
LocalSend -- 开源跨平台文件传输
LocalSend -- 开源跨平台文件传输
283 0
|
11月前
|
Web App开发 JavaScript 算法
开源轻量级 IM 框架 MobileIMSDK 的Uniapp客户端库已发布
开源轻量级 IM 框架 MobileIMSDK 的Uniapp客户端库已发布
202 0
|
编译器 C语言
QT应用编程: QtCreate编译部署开源音视频框架模块QtAV
QT应用编程: QtCreate编译部署开源音视频框架模块QtAV
167 0
QT应用编程: QtCreate编译部署开源音视频框架模块QtAV
|
Web App开发 移动开发 前端开发
如何用 Electron + WebRTC 开发一个跨平台的视频会议应用
在搭建在线教育、医疗、视频会议等场景时,很多中小型公司常常面临 PC 客户端和 Web 端二选一的抉择。Electron 技术的出现解决了这一难题,只需前端开发就能完成一个跨平台的 PC 端应用。本文主要介绍使用 Electron + WebRTC 搭建跨平台的视频会议应用的技术方案。
如何用 Electron + WebRTC 开发一个跨平台的视频会议应用