精华内容
下载资源
问答
  • 搭建webrtc开发环境
    2019-07-03 11:51:27

    一. 参考:
    https://blog.piasy.com/2017/06/17/out-of-the-box-webrtc-dev-env/index.html

    https://github.com/pristineio/webrtc-build-scripts

    二. 步骤:
    1. pull webrtc android docker
      docker pull piasy/webrtc-build
      
    2.运行 docker 
      docker run --rm \
      -e ENABLE_SHADOW_SOCKS=false \
      -v <path to place webrtc source>:/webrtc \
      -t -i piasy/webrtc-build  

    3. 下载 webrtc build scripts
    git clone https://github.com/pristineio/webrtc-build-scripts.git

    # source android 环境
    source android/build.sh
    #install 依赖
    install_dependencies
    #下载 webrtc 源码
    get_webrtc   
    #编译 apprtc
    build_apprtc

    # 或者编译debug 模式
    export WEBRTC_DEBUG=true
    build_apprtc

    4. 部署过程的问题:
    1) x86_64-linux-android-strip 没有找到
    bash: /webrtc/webrtc-build-scripts/android/webrtc/src/third_party/android_tools/ndk/toolchains/x86_64-4.9/prebuilt/linux-x86_64/bin/x86_64-linux-android-strip: No such file or directory
       解决方案:
       cd /webrtc/webrtc-build-scripts/android/webrtc/src/third_party
       mkdir android_tools;cd android_tools
       cp -rf ../android_ndk/ ndk

    更多相关内容
  • webrtc开发Audio and video communication over the internet is nothing new. Skype was one of the first tools enabling it back in 2003 and it didn’t take long for such video chats to be available ...

    webrtc开发

    Audio and video communication over the internet is nothing new. Skype was one of the first tools enabling it back in 2003 and it didn’t take long for such video chats to be available directly from the browser. WebRTC is a relatively new technology enabling easy and secure video communications in the browser. So what is it exactly, how does it work, and why does it revolutionise video communications?

    互联网上的音频和视频通信并不是什么新鲜事物。 Skype最早是在2003年启用它的工具之一,并且很快就可以从浏览器直接进行这种视频聊天。 WebRTC是一项相对较新的技术,可在浏览器中轻松安全地进行视频通信。 那么到底是什么,它是如何工作的,又为什么会给视频通信带来革命性的变化呢?

    WebRTC is a collection of protocols, standards, and JavaScript APIs. While most solutions for video communications rely on proprietary software or at best browser plugins, WebRTC enables this kind of communications directly and solely through the browser. That means that you receive a link, click on it and, without having to download anything, you can start your online video call.

    WebRTC是协议,标准和JavaScript API的集合。 尽管大多数视频通信解决方案都依赖于专有软件或最好的浏览器插件,但WebRTC可以直接且仅通过浏览器实现这种通信。 这意味着您将收到一个链接,单击该链接,无需下载任何内容,就可以开始在线视频通话。

    I said that WebRTC is new but it is actually almost 10 years old. It was first released in 2011 but as always for big web standards, it took some time for it to be implemented in all major browsers. Safari only started supporting it in 2017, and even though Firefox and Chrome have been supporting it for longer, differences in their implementation made some functionalities unusable across browsers. But it is now working reliably even across browsers, at least for the main ones, and on mobile.

    我说过WebRTC是新的,但实际上已经有10年的历史了。 它于2011年首次发布,但与大型网络标准一样,它要花一些时间才能在所有主要浏览器中实现。 Safari于2017年才开始支持它,即使Firefox和Chrome对其支持的时间更长,但其实现方式的差异也使得某些功能无法跨浏览器使用。 但是,即使在跨浏览器的情况下,至少在主要浏览器和移动设备上,它现在都能可靠地运行。

    音频和视频引擎 (Audio & Video Engines)

    A first challenge for such a project was to deal with video and audio streams. This is what a company called Global IP Solutions was working on when they were bought by Google in 2010. For a video conference to be possible between browsers, browsers first need to access the user’s hardware. Once receiving video and audio streams from the hardware, browsers need to encode them, improve them (for example cancelling noise), handle their quality and send them over a network with changing bitrate and bandwidth.

    这种项目的第一个挑战是处理视频和音频流。 这是一家名为Global IP Solutions的公司在2010年被Google收购时正在进行的工作。要使浏览器之间可以进行视频会议,浏览器首先需要访问用户的硬件。 一旦从硬件接收到视频和音频流,浏览器就需要对其进行编码,改进(例如消除噪声),处理它们的质量并通过变化的比特率和带宽通过网络发送它们。

    When receiving a stream, the browser needs to decode it and render it to the user with an acceptable quality, even though network conditions can be bad and packets might have gotten delayed or lost. Protocols and standards were developed in order for it to work and browsers now take care of all this work. When implementing a tool over WebRTC, a developer has a JavaScript API available, MediaStream, from which she simply can get an already improved and encoded stream.

    接收流时,浏览器需要解码它,并以可接受的质量将其呈现给用户,即使网络条件可能不好并且数据包可能已延迟或丢失。 开发协议和标准是为了使其能够正常工作,现在浏览器会处理所有这些工作。 通过WebRTC实施工具时,开发人员可以使用JavaScript API MediaStream ,从中她可以简单地获取已经改进并编码的流。

    在浏览器之间建立连接 (Establish a Connection between Browsers)

    发信号 (Signaling)

    The next challenge was to actually enable connections between browsers. Three types of information have to be exchanged between clients for a connection to be established:

    下一个挑战是实际启用浏览器之间的连接。 客户端之间必须交换三种类型的信息才能建立连接:

    • Media data: which type of media do you want to share (audio only or video), with which constraints (quality for example).

      媒体数据:您要共享哪种媒体类型(仅音频或视频),具有哪些限制条件(例如质量)。
    • Session control data: to open and close the communication.

      会话控制数据:打开和关闭通讯。
    • Network data: users need to get each other’s IP addresses and ports and check if they can establish a peer-to-peer connection.

      网络数据:用户需要获取彼此的IP地址和端口,并检查是否可以建立对等连接。

    This exchange is called the signaling process. These data have to be exchanged in order to open a peer-to-peer connection but how they are to be exchanged is completely up to the developer. She could use any communication means she already has established, but a common solution is to use websockets.

    这种交换称为信令过程。 这些数据必须进行交换才能打开对等连接,但是如何交换它们完全取决于开发人员。 她可以使用已经建立的任何通信方式,但是一个常见的解决方案是使用websocket。

    Concretely, let’s say you want to establish a WebRTC connection between Bob and Alice. Bob and Alice are both logged in into your website, and they both click a button to start a video chat. They both need to establish a connection to a websocket server first. Bob then requests audio and video streams from the MediaStream API, creates an WebRTC offer and sends it to Alice over the signaling medium, the websocket server in this example. Such an offer is a string containing information about the media data. Alice receives this offer, requests her audio and video streams, creates an answer and sends it to Bob.

    具体来说,假设您要在Bob和Alice之间建立WebRTC连接。 Bob和Alice都已登录到您的网站,并且都单击了按钮以开始视频聊天。 他们俩都需要首先建立与Websocket服务器的连接。 然后,Bob从MediaStream API请求音频和视频流,创建WebRTC服务,并通过信令介质(在此示例中为Websocket服务器)将其发送给Alice。 这样的报价是包含有关媒体数据的信息的字符串。 爱丽丝收到此要约,请求她的音频和视频流,创建答案并将其发送给鲍勃。

    Alice and Bob have now exchanged the media data, and notified each other that they want to start a video chat. But here comes the next challenge: we want a direct peer-to-peer connection, not a connection through a websocket server. How do we establish such a connection?

    爱丽丝(Alice)和鲍勃(Bob)现在已经交换了媒体数据,并互相通知他们要开始视频聊天。 但是,下一个挑战就来了:我们需要直接的对等连接,而不是通过Websocket服务器的连接。 我们如何建立这种联系?

    (ICE)

    The Internet is made of computers communicating together over a network. Connecting two computers together doesn’t sound like a big issue. Thing is, you usually connect a client to a server. A server has a well known IP address and the client (the computer requesting a website) knows exactly where to send its requests. When connecting two clients though, they first have to find each other’s IP addresses and it is more complicated than it sounds.

    互联网由通过网络相互通信的计算机组成。 将两台计算机连接在一起听起来并不是什么大问题。 事实是,您通常将客户端连接到服务器。 服务器具有众所周知的IP地址,客户端(请求网站的计算机)确切知道将请求发送到何处。 但是,当连接两个客户端时,它们首先必须找到彼此的IP地址,这比听起来要复杂得多。

    Because of the historic lack of IP addresses (only around 4 billions addresses were available with IPv4), users are grouped under one public address, behind a router translating addresses in the packets going through it. This process is called Network Address Translation (NAT). There are different types of NATs, but some of them allocates a public IP address and a port for UDP flows (what we need). WebRTC uses the ICE (Interactive Connectivity Establishment) framework to discover and communicate the user’s public IP address to her peer.

    由于历史上缺乏IP地址(IPv4仅提供约40亿个地址),因此将用户分组在一个公共地址下,位于路由器后面,它将转换通过该地址的数据包中的地址。 此过程称为网络地址转换(NAT)。 NAT有不同的类型,但是其中一些为UDP流分配了一个公共IP地址和一个端口(我们需要)。 WebRTC使用ICE(交互式连接建立)框架来发现用户的公共IP地址并将其传达给其对等方。

    ICE does so using a STUN (Session Traversal Utilities for NAT) server. Such a server does nothing much, you simply send requests to it. If you are behind a NAT, a request will go through it and the NAT will set its own public address and port on it. The STUN server receives that request and returns it to you, you now have the NAT public address and port. In the best case scenario, that is enough. You communicate this address to your peer, he sends you his own address and you establish a peer-to-peer connection.

    ICE使用STUN(用于NAT的会话遍历实用程序)服务器进行此操作。 这样的服务器无济于事,您只需向它发送请求。 如果您在NAT后面,则将通过该请求,并且NAT将在其上设置其自己的公共地址和端口。 STUN服务器接收到该请求并将其返回给您,您现在有了NAT公共地址和端口。 在最佳情况下,这就足够了。 您将此地址传达给您的对等方,他将您自己的地址发送给您,并且您建立了对等连接。

    But not all NATs let you establish a peer-to-peer connection. Some allocate a public IP address and a port to each external source. That means that the public address and the port that were allocated for messages from the TURN server will not work for the peer you are trying to establish a connection with. In cases like this, you need another solution: the communication has to go through a TURN server. TURN stands for Traversal Using Relays around NAT. As the name says, the connection will go through a relay server and is not technically a peer-to-peer connection anymore.

    但是,并非所有NAT都允许您建立对等连接。 有些分配给每个外部源一个公共IP地址和一个端口。 这意味着为来自TURN服务器的消息分配的公用地址和端口不适用于您试图与其建立连接的对等方。 在这种情况下,您需要另一种解决方案:通信必须通过TURN服务器。 TURN表示在NAT周围使用中继进行遍历。 顾名思义,该连接将通过中继服务器,从技术上讲,它不再是对等连接。

    The good news is, you don’t have to take care of it yourself. The ICE agent takes care of this exploration and decision making for you, checks the possibility of a direct connection, and if it can’t be done, establishes the connection over a TURN server. The ICE agent comes up with candidates, the only thing you have to do is send these candidates over the signaling medium. Once the best candidate has been selected, the WebRTC connection is established and users can start their video call.

    好消息是,您不必自己照顾它。 ICE代理会为您进行这种探索和决策,检查直接连接的可能性,如果无法完成,则通过TURN服务器建立连接。 ICE代理提出了候选对象,您唯一要做的就是通过信令介质发送这些候选对象。 选择最佳候选者后,将建立WebRTC连接,用户可以开始视频通话。

    That is all there is to know to understand the basics of WebRTC. If you want to learn more about NATs, ICE, STUN and TURN you can check this article. It goes into more details and shows with JavaScript code examples how this is handled in an application using WebRTC.

    了解WebRTC的基础知识就是这些。 如果您想了解有关NAT,ICE,STUN和TURN的更多信息,可以查看本文 。 它有更多细节,并通过JavaScript代码示例显示了如何在使用WebRTC的应用程序中对此进行处理。

    To build your own video chat using WebRTC you can follow this series of articles:

    要使用WebRTC建立自己的视频聊天,您可以阅读以下系列文章:

    Each step is pretty detailed. I am working on a more concise tutorial showing how to establish a WebRTC connection (step 1, 2 and 3) in a few lines of code. article will come out soon, you can wait for it if you are looking for a fast dive-in into implementing your own video chat over WebRTC.

    每个步骤都非常详细。 我正在编写一个更简洁的教程,该教程显示了如何用几行代码来建立WebRTC连接(步骤1、2和3)。 文章很快就会发布,如果您希望快速了解如何通过WebRTC实现自己的视频聊天,可以等待。

    翻译自: https://levelup.gitconnected.com/webrtc-basic-overview-for-developers-435ed9703550

    webrtc开发

    展开全文
  • 这是基于asp.net开发的SuperWebSocket和WebRtc结合的Web网页版视频聊天实例,分享出来供大家学习。
  • 基于webrtc开发的多人视频会议,信令服务器使用 java websocket, springboot架构。访问地址 https://IP/mcu.html
  • WebRTC是一个支持网络浏览器进行实时语音对话或视频对话的软件架构。本书使用形象的案例介绍,逐步深入地阐述了 WebRTC 的幕后工作原理。通过阅读本书,读者可以快速、有效地掌握创建一个 WebRTC 应用所必需的知识,...
  • webrtc网页视频开发帮助工具 simplewebrtc.js
  • windows webrtc 开发环境搭建

    千次阅读 2020-06-03 17:11:45
    以管理员身份打开 Developer Command Prompt for VS 2019(vs2019开发人员命令提示符) 2.定位到你的vs2019的安装目录 例:C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\Common7\IDE\...

    下载 安装depot tools

    git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git

    depot_tools依赖python2.7

    git代理设置:

    	git config --global http.proxy http://127.0.0.1:1080
    	git config --global https.proxy https://127.0.0.1:1080
    

    取消代理设置

    	git config --global --unset http.proxy
    	git config --global --unset https.proxy
    

    gclient代理设置:

    	set https_proxy=http://localhost:1080 
    	set http_proxy=http://localhost:1080 
    

    **注意:**https_proxy 不要设置成https://localhost:1080,否则会报下列错误:

    RPC failed transiently. Will retry in 1s
    {“error”:“failed to send request: Post https://chrome-infra-packages.appspot.co
    m/prpc/cipd.Repository/ResolveVersion: dial tcp 75.126.2.43:443: connectex: A co
    nnection attempt failed because the connected party did not properly respond aft
    er a period of time, or established connection failed because connected host has
    failed to respond.”, “host”:“chrome-infra-packages.appspot.com”, “method”:“Reso
    lveVersion”, “service”:“cipd.Repository”, “sleepTime”:“1s”}

    代码拉取

    设置:set DEPOT_TOOLS_WIN_TOOLCHAIN=0 (调用gn的时候也需要设置这个变量)

    作用:“Also, add a DEPOT_TOOLS_WIN_TOOLCHAIN system variable in the same way, and set it to 0. This tells depot_tools to use your locally installed version of Visual Studio (by default, depot_tools will try to use a google-internal version).”

    mkdir webrtc-checkout
    cd webrtc-checkout
    

    Windows

    //有path过长文件会拉取失败
    git config --system core.longpaths true
    fetch --nohooks webrtc
    gclient.bat sync
    

    生成vs工程

    set DEPOT_TOOLS_WIN_TOOLCHAIN=0

    cd src
    gn gen out/Default -–ide=vs2019
    

    查看编译参数,可以把它保存到文件,方便查看

    gn args out/Default --list
    gn args out/Default --list > gn_param_list.txt
    

    修改编译参数,修改后再查看是否成功

    gn gen out/Default -ide=vs2019 --args="is_debug=true is_component_build=true target_cpu=\"x86\" use_rtti=true is_clang=false rtc_build_tools=false rtc_include_tests=false rtc_build_examples=false"
    gn args out/Default --list
    

    支持H264编码

    设置参数:

    gn gen out/Default -ide=vs2019 --args="rtc_use_h264=true proprietary_codecs=true"
    

    参数说明:

    rtc_use_h264,这个开关控制了是否使用 H264 (对应C++代码中的宏 WEBRTC_USE_H264);

    在 webrtc/webrtc.gni 文件中定义:

    rtc_use_h264 = proprietary_codecs && !is_android && !is_ios && !(is_win && !is_clang)

    proprietary_codecs 在 build/config/features.gni 中定义:

    proprietary_codecs = is_chrome_branded || is_chromecast

    默认windows下proprietary_codecs 为fasle,所以没有打开

    VS打开工程

    进入out\Default目录,用VS打开all.sln文件

    工程打开失败错误**“对COM组件的调用返回了错误HRESULT E_FAIL”**解决办法:

    1.以管理员身份打开 Developer Command Prompt for VS 2019(vs2019开发人员命令提示符)
    2.定位到你的vs2019的安装目录
    例:C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\Common7\IDE\PublicAssemblies
    先输入cd c: 切换到c盘 再cd C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\Common7\IDE\PublicAssemblies
    3.执行下面的代码
    gacutil -i Microsoft.VisualStudio.Shell.Interop.12.0.dll

    分支切换

    通过https://chromiumdash.appspot.com/releases?platform=Windows查看 stable或beta版,获取版本号74.0.3729.169

    git fetch --tags  
    git checkout -b branch_heads_3729_m74 74.0.3729.169
    gclient sync --with_branch_heads --with_tags
    
    展开全文
  • :rocket: 该项目使用nodejs,socket和webrtc开发视频通话应用程序 我该如何运行? :rocket: 克隆此存储库 :rocket: 按照.env-example配置.env(输入PORT) :rocket: 在前端中编辑端口:server / client / index....
  • Learning WebRTC中文版_用WebRTC开发交互实时通信应用(2018)最新版
  • Android WebRTC开发入门

    千次阅读 2019-04-17 16:19:02
    在学习 WebRTC 的过程中,学习的一个基本步骤是先通过 JS 学习 WebRTC的整体流程,在熟悉了整体流程之后,再学习其它端如何使用 WebRTC 进行互联互通。 申请权限 Camera 权限 Record Audio 权限 Intenet ...

    在学习 WebRTC 的过程中,学习的一个基本步骤是先通过 JS 学习 WebRTC的整体流程,在熟悉了整体流程之后,再学习其它端如何使用 WebRTC 进行互联互通。

     

    申请权限

     

    • Camera 权限
    • Record Audio 权限
    • Intenet 权限

    在Android中,申请权限分为静态权限申请和动态权限申请,这对于做 Android 开发的同学来说已经是习以为常的事情了。下面我们就看一下具体如何申请权限:

    静态权限申请

    在 Android 项目中的 AndroidManifest.xml 中增加以下代码:

    ... <uses-feature android:name="android.hardware.camera" /> <uses-feature android:glEsVersion="0x00020000" android:required="true" /> <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.INTENET" /> ...

    动态权限申请

    随着 Android 的发展,对安全性要求越来越高。除了申请静态权限之外,还需要动态申请权限。代码如下:

    void requestPermissions(String[] permissions, intrequestCode);

    实际上,对于权限这块的处理真正做细了要写不少代码,好在 Android 官方给我们又提供了一个非常好用的库 EasyPermissions , 有了这个库我们可以少写不少代码。使用 EasyPermissions 非常简单,在MainActivity中添加代码如下:

    ... protected void onCreate ( Bundle savedInstanceState ) { ... String[] perms = { Manifest.permission.CAMERA, Manifest.permission.RECORD_AUDIO }; if (!EasyPermissions.hasPermissions(this, perms)) { EasyPermissions.requestPermissions(this, "Need permissions for camera & microphone", 0, perms); } } @Override public void onRequestPermissionsResult(int requestCode, String[] permissions, int[] grantResults) { super.onRequestPermissionsResult(requestCode, permissions, grantResults); EasyPermissions.onRequestPermissionsResult(requestCode, permissions, grantResults, this); } ...

    通过添加以上代码,就将权限申请好了,是不是非常简单?

     

    第二步,看在 Android 下如何引入 WebRTC 库。

     

    第一个是 WebRTC 库,第二个是 socket.io 库,用它来与信令服务器互联。

    首先我们看一下如何引入 WebRTC 库(我这里使用的是最新 Android Studio 3.3.2)。在 Module 级别的 build.gradle 文件中增加以下代码:

    ... dependencies { ... implementation 'org.webrtc:google-webrtc:1.0.+' ... }

     

    接下来要引入 socket.io 库,用它来与 Nodejs 搭建的信令服务器进行对接。再加上前面用到的EasyPermissions库,所以真正的代码应写成下面的样子:

    ... dependencies { ... implementation 'io.socket:socket.io-client:1.0.0' implementation 'org.webrtc:google-webrtc:1.0.+' implementation 'pub.devrel:easypermissions:1.1.3' }

     

    WebRTC程序的起源就是PeerConnectionFactory。这也是与使用 JS 开发 WebRTC 程序最大的不同点之一,因为在 JS 中不需要使用 PeerConnectionFactory 来创建 PeerConnection 对象。

    而在 Android/iOS 开发中,我们使用的 WebRTC 中的大部分对象基本上都是通过 PeerConnectionFactory 创建出来的。下面这张图就清楚的表达了 PeerConnectionFactory 在 WebRTC 中的地位。

    PeerConnectionFactory.png824×618 33.8 KB

    通过该图我们可以知道,WebRTC中的核心对象 PeerConnection、LocalMediaStream、LocalVideoTrack、LocalAudioTrack都是通过 WebRTC 创建出来的。

    PeerConnectionFactory的初始化与构造

    在 WebRTC 中使用了大量的设计模式,对于 PeerConnectionFactory 也是如此。它本身就是工厂模式,而这个构造 PeerConnection 等核心对象的工厂又是通过 builder 模式构建出来的。

    下面我们就来看看如何构造 PeerConectionFactory。在我们构造 PeerConnectionFactory 之前,首先要对其进行初始化,其代码如下:

    PeerConnectionFactory.initialize(...);

    初始化之后,就可以通过 builder 模式来构造 PeerConnecitonFactory 对象了。

    ... PeerConnectionFactory.Builder builder = PeerConnectionFactory.builder() .setVideoEncoderFactory(encoderFactory) .setVideoDecoderFactory(decoderFactory); ... return builder.createPeerConnectionFactory();

    通过上面的代码,大家也就能够理解为什么 WebRTC 要使用 buider 模式来构造 PeerConnectionFactory 了吧?主要是方便调整建造 PeerConnectionFactory的组件,如编码器、解码器等。

    从另外一个角度我们也可以了解到,要更换WebRTC引警的编解码器该从哪里设置了哈!

    音视频数据源

    有了PeerConnectionFactory对象,我们就可以创建数据源了。实际上,数据源是 WebRTC 对音视频数据的一种抽象,表示数据可以从这里获取。

    使用过 JS WebRTC API的同学都非常清楚,在 JS中 VideoTrack 和 AudioTrack 就是数据源。而在 Android 开发中我们可以知道 Video/AudioTrack 就是 Video/AudioSouce的封装,可以认为他们是等同的。

    创建数据源的方式如下:

    ... VideoSource videoSource = mPeerConnectionFactory.createVideoSource(false); mVideoTrack = mPeerConnectionFactory.createVideoTrack( VIDEO_TRACK_ID, videoSource); ... AudioSource audioSource = mPeerConnectionFactory.createAudioSource(new MediaConstraints()); mAudioTrack = mPeerConnectionFactory.createAudioTrack( AUDIO_TRACK_ID, audioSource); ...

    数据源只是对数据的一种抽象,它是从哪里获取的数据呢?对于音频来说,在创建 AudioSource时,就开始从音频设备捕获数据了。对于视频来说我们可以指定采集视频数据的设备,然后使用观察者模式从指定设备中获取数据。

    接下来我们就来看一下如何指定视频设备。

    视频采集

    在 Android 系统下有两种 Camera,一种称为 Camera1, 是一种比较老的采集视频数据的方式,别一种称为 Camera2, 是一种新的采集视频的方法。它们之间的最大区别是 Camera1使用同步方式调用API,Camera2使用异步方式,所以Camera2更高效。

    我们看一下 WebRTC 是如何指定具体的 Camera 的:

    private VideoCapturer createVideoCapturer() { if (Camera2Enumerator.isSupported(this)) { return createCameraCapturer(new Camera2Enumerator(this)); } else { return createCameraCapturer(new Camera1Enumerator(true)); } } private VideoCapturer createCameraCapturer(CameraEnumerator enumerator) { final String[] deviceNames = enumerator.getDeviceNames(); // First, try to find front facing camera Log.d(TAG, "Looking for front facing cameras."); for (String deviceName : deviceNames) { if (enumerator.isFrontFacing(deviceName)) { Logging.d(TAG, "Creating front facing camera capturer."); VideoCapturer videoCapturer = enumerator.createCapturer(deviceName, null); if (videoCapturer != null) { return videoCapturer; } } } // Front facing camera not found, try something else Log.d(TAG, "Looking for other cameras."); for (String deviceName : deviceNames) { if (!enumerator.isFrontFacing(deviceName)) { Logging.d(TAG, "Creating other camera capturer."); VideoCapturer videoCapturer = enumerator.createCapturer(deviceName, null); if (videoCapturer != null) { return videoCapturer; } } } return null; }

    上面代码的逻辑也比较简单:

    • 首先看 Android 设备是否支持 Camera2.
    • 如果支持就使用 Camera2, 如果不支持就使用 Camera1.
    • 在获到到具体的设备后,再看其是否有前置摄像头,如果有就使用
    • 如果没有有效的前置摄像头,则选一个非前置摄像头。

    通过上面的方法就可以拿到使用的摄像头了,然后将摄像头与视频源连接起来,这样从摄像头获取的数据就源源不断的送到 VideoTrack 里了。

    下面我们来看看 VideoCapture 是如何与 VideoSource 关联到一起的:

    ... mSurfaceTextureHelper = SurfaceTextureHelper.create("CaptureThread", mRootEglBase.getEglBaseContext()); mVideoCapturer.initialize(mSurfaceTextureHelper, getApplicationContext(), videoSource.getCapturerObserver()); ... mVideoTrack.setEnabled(true); ...

    上面的代码中,在初始化 VideoCaptuer 的时候,可以过观察者模式将 VideoCapture 与 VideoSource 联接到了一起。因为 VideoTrack 是 VideoSouce 的一层封装,所以此时我们开启 VideoTrack 后就可以拿到视频数据了。

    当然,最后还要调用一下 VideoCaptuer 对象的 startCapture 方法真正的打开摄像头,这样 Camera 才会真正的开始工作哈,代码如下:

    @Override protected void onResume() { super.onResume(); mVideoCapturer.startCapture(VIDEO_RESOLUTION_WIDTH, VIDEO_RESOLUTION_HEIGHT, VIDEO_FPS); }

    拿到了视频数据后,我们如何将它展示出来呢?

    渲染视频

    Android 下 WebRTC 使用OpenGL ES 进行视频渲染,用于展示视频的控件是 WebRTC 对 Android 系统控件 SurfaceView 的封装。

    WebRTC 封装后的 SurfaceView 类为 org.webrtc.SurfaceViewRenderer。在界面定义中应该定义两个SurfaceViewRenderer,一个用于显示本地视频,另一个用于显示远端视频。

    其定义如下:

    ... <org.webrtc.SurfaceViewRenderer android:id="@+id/LocalSurfaceView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" /> <org.webrtc.SurfaceViewRenderer android:id="@+id/RemoteSurfaceView" android:layout_width="120dp" android:layout_height="160dp" android:layout_gravity="top|end" android:layout_margin="16dp"/> ...

    通过上面的代码我们就将显示视频的 View 定义好了。光定义好这两个View 还不够,还要对它做进一步的设置:

    ... mLocalSurfaceView.init(mRootEglBase.getEglBaseContext(), null); mLocalSurfaceView.setScalingType(RendererCommon.ScalingType.SCALE_ASPECT_FILL); mLocalSurfaceView.setMirror(true); mLocalSurfaceView.setEnableHardwareScaler(false /* enabled */); ...

    其含义是:

    • 使用 OpenGL ES 的上下文初始化 View。
    • 设置图像的拉伸比例。
    • 设置图像显示时反转,不然视频显示的内容与实际内容正好相反。
    • 是否打开便件进行拉伸。

    通过上面的设置,我们的 view 就设置好了,对于远端的 Veiw 与本地 View 的设置是一样的,

    接下来将从摄像头采集的数据设置到该view里就可以显示了。设置非常的简单,代码如下:

    ... mVideoTrack.addSink(mLocalSurfaceView); ...

    对于远端来说与本地视频的渲染显示是类似的,只不过数据源是从网络获取的。

    通过以上讲解,大家应该对 WebRTC 如何采集数据、如何渲染数据有了基本的认识。下面我们再看来下远端的数据是如何来的。

    创建 PeerConnection

    要想从远端获取数据,我们就必须创建 PeerConnection 对象。该对象的用处就是与远端建立联接,并最终为双方通讯提供网络通道。

    我们来看下如何创建 PeerConnecion 对象。

    ... PeerConnection.RTCConfiguration rtcConfig = new PeerConnection.RTCConfiguration(iceServers); ... PeerConnection connection = mPeerConnectionFactory.createPeerConnection(rtcConfig, mPeerConnectionObserver); ... connection.addTrack(mVideoTrack, mediaStreamLabels); connection.addTrack(mAudioTrack, mediaStreamLabels); ...

    PeerConnection 对象的创建还是要使用我们之前讲过的 PeerConnectionFactory 来创建。WebRTC 在建立连接时使用 ICE 架构,一些参数需要在创建 PeerConnection 时设置进去。

    另外,当 PeerConnection 对象创建好后,我们应该将本地的音视频轨添加进去,这样 WebRTC 才能帮我们生成包含相应媒体信息的 SDP,以便于后面做媒体能力协商使用。

    通过上面的方式,我们就将 PeerConnection 对象创建好了。

    与 JS 中的 PeerConnection 对象一样,当其创建好之后,可以监听一些我们感兴趣有事件了,如收到 Candidate 事件时,我们要与对方进行交换。

    PeerConnection 事件的监听与 JS 还是有一点差别的。在 JS 中,监听 PeerConnection的相关事件非常直接,直接实现peerconnection.onXXX就好了。而 Android 中的方式与 JS 略有区别,它是通过观察者模式来监听事件的。大家这点一定要注意!

    双方都创建好 PeerConnecton 对象后,就会进行媒体协商,协商完成后,数据在底层就开始传输了。

     

    信令驱动

    双方交互的过程中,其业务逻辑的核心是信令, 所有的模块都是通过信令串联起来的。

    以 PeerConnection 对象的创建为例,该在什么时候创建 PeerConnection 对象呢?最好的时机当然是在用户加入房间之后了 。

    下面我们就来看一下,对于两人通讯的情况,信令该如何设计。在我们这个例子中,可以将信令分成两大类。第一类为客户端命令;第二类为服务端命令;

    客户端命令有:

    • join: 用户加入房间
    • leave: 用户离开房间
    • message: 端到端命令(offer、answer、candidate)

    服务端命令:

    • joined: 用户已加入
    • leaved: 用户已离开
    • other_joined:其它用户已加入
    • bye: 其它用户已离开
    • full: 房间已满

    通过以上几条信令就可以实现一对一实时互动的要求

    在本例子中我们仍然是通过socket.io与之前搭建的信令服备器互联的。由于 socket.io 是跨平台的,所以无论是在 js 中,还是在 Android 中,我们都可以使用其客户端与服务器相联,非常的方便。

    下面再来看一下,收到不同信令后,客户端的状态变化:

    直播系统客户端状态机.png715×558 27.9 KB

    客户端一开始的时候处于 Init/Leave 状态。当发送 join 消息,并收到服务端的 joined 后,其状态变为 joined。

    此时,如果第二个用户加入到房间,则客户端的状态变为了 joined_conn, 也就是说此时双方可以进行实时互动了。

    如果此时,该用户离开,则其状态就变成了 初始化状态。其它 case 大家可以根据上面的图自行理解。

     

    IM和视频聊天的,可以参考下这个 https://github.com/starrtc/starrtc-android-demo

     

    https://rtcdeveloper.com/t/topic/14040/1

     

     

     

     

    展开全文
  • WebRTC 是一个支持网络浏览器进行实时语音对话或视频对话的软件架构。 《Learning WebRTC 中文版》使用形象的案例介绍,逐步深入地阐述了WebRTC 的幕后工作原理。通过阅读本书,读者可以快速、有效地掌握创建一个...
  • 本文是 Piasy 原创,发表于 https://blog.piasy.com,请阅读...在刚刚落幕的 WWDC17 上,苹果为我们带来了一个不小的惊喜 —— 其浏览器内核WebKit将正式支持 WebRTC,而未来基于 WebKit 内核的苹果浏览器,比如m...
  • inter公司基于webrtc技术开发的网络音视频通信的服务器套件。主要内容如下: 1.mcu服务器 2.android、ios、javascripte的客户端SDK
  • 前两周刚刚更新了iOS15.4的系统,然后就发现了一个奇怪的问题,在...3、难道是iOS15.4系统与WebRTC不匹配,所以WebRTC丢掉了部分帧? 根据这些猜想和疑问,在采集和编码处分别添加输出语句,测试多次发现:设置帧率1
  • 当你入门 WebRTC 之后,很快就会接触到一个名词,叫做:SFU,你可能很容易就在网上寻找到很多 SFU 的开源实现,并并兴致勃勃地开始编译、部署和测试这些服务器,但是可曾想过,为啥我们的 WebRTC 应用需要 SFU ...
  • 本文中提供下载的《WebRTC 零基础开发者教程》将以一个初学者的角度,从0开始逐步引导你掌握WebRTC开发的方方面面(当然,教程中更多的是操作性的内容,具体到技术原理和实现,显然不是本教程的讨论范畴)。...
  • Electron 技术的出现解决了这一难题,只需前端开发就能完成一个跨平台的 PC 端应用。本文主要介绍使用 Electron + WebRTC 搭建跨平台的视频会议应用的技术方案。 作者| 峻崎 审校| 泰一 什么是 Electron? ...
  • 我的路径是/home/lqf/webrtc/node-v10.16.0-linux-x64 # 查看是否安装,安装正常则打印版本号 node -v npm -v 关注+后台私信我,领取2022最新最全学习提升资料包《Andoird音视频开发必备手册+音视频最新学习视频+...
  • WebRTC 是一个免费开源的跨平台项目,由 Google,Mozilla,Opera 等支持,支持 Chrome,Firefox,Opera 以及 Android 和 iOS 平台,能够给浏览器、手机应用和物联网设备提供了实时互动能力。 WebRTC 是一组协议和 ...
  • 最近开始弄WebRtc与网页端传输视频的项目了,现在进入测试阶段,故而记录一下开发过程中遇到的坑。 首先先吐槽一波,WebRtc的项目对于c++开发来说实在是不太友好,文档也不全,弄懂全靠读代码注释,除了封装的...
  • webrtc开发

    2016-09-02 14:13:19
    准备:信令服务器 + 浏览器客户端 android 客户端采用AppRtcDemo + socket.io建立p2p: 流程可参考:http://www.cnblogs.com/welen/articles/5241167.html
  • Webrtc定制开发(一)

    2021-05-31 20:59:54
    前一篇《webrtc方案漫谈》我们分析了webrtc的方案特点,根据实际的应用场景我们需要对webrtc native代码进行定制开发,下面对webrtc常规需求进行定制。
  • flutter-webrtc-demo Flutter WebRTC插件演示 在线演示: : : 用法 git clone https://github.com/cloudwebrtc/flutter-webrtc-demo cd flutter-webrtc-demo flutter packages get flutter run 笔记 如果要测试...
  • 2018年01月12日 00:00:00 阅读数:603   ...也许对于大部分WebRTC的...WebRTC技术服务商“WebRTC.Ventures”撰文,预测了2018年WebRTC的5大趋势,从一个海外技术服务商的视角展现WebRTC可能的机会,LiveVide...
  • CSDN技术主题月第一期-《直播技术架构新解读》嘉宾PPT
  • 在上一篇文章 WebRTC 开发(五)编译与运行 Mac 工程 中,我们编译了 WebRTC 的工程 AppRTCMobile,也看到了 App 启动后的初始界面。本文基于 WebRTC M76 ,将通过展示两人加入视频会议的 App 界面来分析视频画面的...
  • webrtc权威指南完整版

    2018-06-22 13:14:35
    webrtc权威指南,完整版,涉及网络结构,开发手册,协议介绍
  • 以一个初学者的角度,从0开始逐步引导你掌握WebRTC开发的方方面面
  • 上一篇文章《WebRTC 开发实践:为什么你需要 SFU 服务器》我们了解了 WebRTC SFU 服务器的基本原理和必要性,解决了 What 和 Why,本文则更近一步,探究一下实现 SFU 服务器的关键技术点有哪些 ?重点解决一下 How 1...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,733
精华内容 4,293
关键字:

webrtc开发

友情链接: SMIB.rar