WebRTC中Android Demo中的遠程視頻流的獲取到傳輸

 　

　　1.CallActivity#onCreate 執行startCall開始連接或創建房間

 

　　2.WebSocketClient#connectToRoom 請求一次服務器

 

　　3.回調到CallActivity#onConnectToRoom 開始創建對等連接，同時將視頻采集對象，本地和遠程的VideoSink，相關參數傳入

 

 

　　　　localProxyVideoSink代理本地視頻渲染器

　　　　remoteSinks是代理遠程視頻的渲染器，這里是一個集合

　　　　videoCapture是本地視頻采集器

 

      4.PeerConnectionClient#createPeerConnectionInternal 創建PeerConnection對象和創建視頻軌道

 　　factory是在CallActivity#onCreate中創建的

　 　pcObserver是一個對等連接觀察者，用於底層消息的回調

 

　　如果開啟了視頻功能，則將本地采集的數據添加到軌道（通過C++底層完成）

　　如果是遠程的數據，通過(getRemoteVideoTrack調用C++底層方法)獲取到遠程視頻軌道，添加傳入進來的remoteSinks

 

　　這里繼續添加音頻軌道。

　　到這里，可以預覽到本地攝像頭預覽幀。

 

　　中間還有一個復雜的過程，就是建立連接的過程。

　　主要有以下幾個步驟吧。

　　1️⃣ 創建者創建一個連接房間。

　　　　i.請求Server(WebSocketRTCClient#connectToRoom)

　　　　ii.創建Offer信令（PeerConnection來創建，通過sdpObserver來回調結果）

　　　　iii.設置本地SDP，通過sdpObserver來回調結果

　　　　iv.發送Offer信令，給服務器（等待別人連接）

　　2️⃣ 加入者加入該房間。

　　　　i.請求Server(有人創建了房間，那就只有加入了)，突然還收到一個Offer（創建者給服務器的）呢。

　　　　ii.設置遠程SDP,通過sdpObserver來回調結果。

　　　　iii.創建Answer信令，通過sdpObserver來回調結果。

　　　　iv.發送Answer信令，發送給服務器（主要給房間創建者的）

　　3️⃣ 創建者知道有人加入后。

　　　　i.WebSocketRTCClient#onWebSocketMessage(接收到Answer信令和一些ICE數據包)

　　　　ii.設置遠程SDP，通過sdpObserver來回調結果。

　　　　iii.開始添加ICE Candidate。

　　4️⃣ 然后就是ICE之間的連接，這里的具體邏輯不是特別清楚。以后再補充。

　　5️⃣ P2P連接建立完畢，可以互相實時視頻聊天了哦。　　

　　參考文章：WebRTC Native源碼導讀。

 

　　5.那么如何獲取到遠程的視頻流數據呢？或者說怎么將遠程的數據渲染出來顯示到SurfaceViewRender中？

　　　　在demo中，預覽本地的視頻和遠程的視頻都是用SurfaceViewRender自定義視圖完成的。　

public class SurfaceViewRenderer extends SurfaceView
    implements SurfaceHolder.Callback, VideoSink, RendererCommon.RendererEvents {
  private static final String TAG = "SurfaceViewRenderer";

  // Cached resource name.
  private final String resourceName;
  private final RendererCommon.VideoLayoutMeasure videoLayoutMeasure =
      new RendererCommon.VideoLayoutMeasure();
  private final SurfaceEglRenderer eglRenderer;

  // Callback for reporting renderer events. Read-only after initilization so no lock required.
  private RendererCommon.RendererEvents rendererEvents;

  // Accessed only on the main thread.
  private int rotatedFrameWidth;
  private int rotatedFrameHeight;
  private boolean enableFixedSize;
  private int surfaceWidth;
  private int surfaceHeight;

  /**
   * Standard View constructor. In order to render something, you must first call init().
   */
  public SurfaceViewRenderer(Context context) {
    super(context);
    this.resourceName = getResourceName();
    eglRenderer = new SurfaceEglRenderer(resourceName);
    getHolder().addCallback(this);
    getHolder().addCallback(eglRenderer);
  }

  /**
   * Standard View constructor. In order to render something, you must first call init().
   */
  public SurfaceViewRenderer(Context context, AttributeSet attrs) {
    super(context, attrs);
    this.resourceName = getResourceName();
    eglRenderer = new SurfaceEglRenderer(resourceName);
    getHolder().addCallback(this);
    getHolder().addCallback(eglRenderer);
  }

  /**
   * Initialize this class, sharing resources with |sharedContext|. It is allowed to call init() to
   * reinitialize the renderer after a previous init()/release() cycle.
   */
  public void init(EglBase.Context sharedContext, RendererCommon.RendererEvents rendererEvents) {
    init(sharedContext, rendererEvents, EglBase.CONFIG_PLAIN, new GlRectDrawer());
  }

  /**
   * Initialize this class, sharing resources with |sharedContext|. The custom |drawer| will be used
   * for drawing frames on the EGLSurface. This class is responsible for calling release() on
   * |drawer|. It is allowed to call init() to reinitialize the renderer after a previous
   * init()/release() cycle.
   */
  public void init(final EglBase.Context sharedContext,
      RendererCommon.RendererEvents rendererEvents, final int[] configAttributes,
      RendererCommon.GlDrawer drawer) {
    ThreadUtils.checkIsOnMainThread();
    this.rendererEvents = rendererEvents;
    rotatedFrameWidth = 0;
    rotatedFrameHeight = 0;
    eglRenderer.init(sharedContext, this /* rendererEvents */, configAttributes, drawer);
  }

  /**
   * Block until any pending frame is returned and all GL resources released, even if an interrupt
   * occurs. If an interrupt occurs during release(), the interrupt flag will be set. This function
   * should be called before the Activity is destroyed and the EGLContext is still valid. If you
   * don't call this function, the GL resources might leak.
   */
  public void release() {
    eglRenderer.release();
  }

  /**
   * Register a callback to be invoked when a new video frame has been received.
   *
   * @param listener The callback to be invoked. The callback will be invoked on the render thread.
   *                 It should be lightweight and must not call removeFrameListener.
   * @param scale    The scale of the Bitmap passed to the callback, or 0 if no Bitmap is
   *                 required.
   * @param drawer   Custom drawer to use for this frame listener.
   */
  public void addFrameListener(
      EglRenderer.FrameListener listener, float scale, RendererCommon.GlDrawer drawerParam) {
    eglRenderer.addFrameListener(listener, scale, drawerParam);
  }

  /**
   * Register a callback to be invoked when a new video frame has been received. This version uses
   * the drawer of the EglRenderer that was passed in init.
   *
   * @param listener The callback to be invoked. The callback will be invoked on the render thread.
   *                 It should be lightweight and must not call removeFrameListener.
   * @param scale    The scale of the Bitmap passed to the callback, or 0 if no Bitmap is
   *                 required.
   */
  public void addFrameListener(EglRenderer.FrameListener listener, float scale) {
    eglRenderer.addFrameListener(listener, scale);
  }

  public void removeFrameListener(EglRenderer.FrameListener listener) {
    eglRenderer.removeFrameListener(listener);
  }

  /**
   * Enables fixed size for the surface. This provides better performance but might be buggy on some
   * devices. By default this is turned off.
   */
  public void setEnableHardwareScaler(boolean enabled) {
    ThreadUtils.checkIsOnMainThread();
    enableFixedSize = enabled;
    updateSurfaceSize();
  }

  /**
   * Set if the video stream should be mirrored or not.
   */
  public void setMirror(final boolean mirror) {
    eglRenderer.setMirror(mirror);
  }

  /**
   * Set how the video will fill the allowed layout area.
   */
  public void setScalingType(RendererCommon.ScalingType scalingType) {
    ThreadUtils.checkIsOnMainThread();
    videoLayoutMeasure.setScalingType(scalingType);
    requestLayout();
  }

  public void setScalingType(RendererCommon.ScalingType scalingTypeMatchOrientation,
      RendererCommon.ScalingType scalingTypeMismatchOrientation) {
    ThreadUtils.checkIsOnMainThread();
    videoLayoutMeasure.setScalingType(scalingTypeMatchOrientation, scalingTypeMismatchOrientation);
    requestLayout();
  }

  /**
   * Limit render framerate.
   *
   * @param fps Limit render framerate to this value, or use Float.POSITIVE_INFINITY to disable fps
   *            reduction.
   */
  public void setFpsReduction(float fps) {
    eglRenderer.setFpsReduction(fps);
  }

  public void disableFpsReduction() {
    eglRenderer.disableFpsReduction();
  }

  public void pauseVideo() {
    eglRenderer.pauseVideo();
  }

  // VideoSink interface.
  @Override
  public void onFrame(VideoFrame frame) {
    eglRenderer.onFrame(frame);
  }

  // View layout interface.
  @Override
  protected void onMeasure(int widthSpec, int heightSpec) {
    ThreadUtils.checkIsOnMainThread();
    Point size =
        videoLayoutMeasure.measure(widthSpec, heightSpec, rotatedFrameWidth, rotatedFrameHeight);
    setMeasuredDimension(size.x, size.y);
    logD("onMeasure(). New size: " + size.x + "x" + size.y);
  }

  @Override
  protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
    ThreadUtils.checkIsOnMainThread();
    eglRenderer.setLayoutAspectRatio((right - left) / (float) (bottom - top));
    updateSurfaceSize();
  }

  private void updateSurfaceSize() {
    ThreadUtils.checkIsOnMainThread();
    if (enableFixedSize && rotatedFrameWidth != 0 && rotatedFrameHeight != 0 && getWidth() != 0
        && getHeight() != 0) {
      final float layoutAspectRatio = getWidth() / (float) getHeight();
      final float frameAspectRatio = rotatedFrameWidth / (float) rotatedFrameHeight;
      final int drawnFrameWidth;
      final int drawnFrameHeight;
      if (frameAspectRatio > layoutAspectRatio) {
        drawnFrameWidth = (int) (rotatedFrameHeight * layoutAspectRatio);
        drawnFrameHeight = rotatedFrameHeight;
      } else {
        drawnFrameWidth = rotatedFrameWidth;
        drawnFrameHeight = (int) (rotatedFrameWidth / layoutAspectRatio);
      }
      // Aspect ratio of the drawn frame and the view is the same.
      final int width = Math.min(getWidth(), drawnFrameWidth);
      final int height = Math.min(getHeight(), drawnFrameHeight);
      logD("updateSurfaceSize. Layout size: " + getWidth() + "x" + getHeight() + ", frame size: "
          + rotatedFrameWidth + "x" + rotatedFrameHeight + ", requested surface size: " + width
          + "x" + height + ", old surface size: " + surfaceWidth + "x" + surfaceHeight);
      if (width != surfaceWidth || height != surfaceHeight) {
        surfaceWidth = width;
        surfaceHeight = height;
        getHolder().setFixedSize(width, height);
      }
    } else {
      surfaceWidth = surfaceHeight = 0;
      getHolder().setSizeFromLayout();
    }
  }

  // SurfaceHolder.Callback interface.
  @Override
  public void surfaceCreated(final SurfaceHolder holder) {
    ThreadUtils.checkIsOnMainThread();
    surfaceWidth = surfaceHeight = 0;
    updateSurfaceSize();
  }

  @Override
  public void surfaceDestroyed(SurfaceHolder holder) {}

  @Override
  public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {}

  private String getResourceName() {
    try {
      return getResources().getResourceEntryName(getId());
    } catch (NotFoundException e) {
      return "";
    }
  }

  /**
   * Post a task to clear the SurfaceView to a transparent uniform color.
   */
  public void clearImage() {
    eglRenderer.clearImage();
  }

  @Override
  public void onFirstFrameRendered() {
    if (rendererEvents != null) {
      rendererEvents.onFirstFrameRendered();
    }
  }

  @Override
  public void onFrameResolutionChanged(int videoWidth, int videoHeight, int rotation) {
    if (rendererEvents != null) {
      rendererEvents.onFrameResolutionChanged(videoWidth, videoHeight, rotation);
    }
    int rotatedWidth = rotation == 0 || rotation == 180 ? videoWidth : videoHeight;
    int rotatedHeight = rotation == 0 || rotation == 180 ? videoHeight : videoWidth;
    // run immediately if possible for ui thread tests
    postOrRun(() -> {
      rotatedFrameWidth = rotatedWidth;
      rotatedFrameHeight = rotatedHeight;
      updateSurfaceSize();
      requestLayout();
    });
  }

  private void postOrRun(Runnable r) {
    if (Thread.currentThread() == Looper.getMainLooper().getThread()) {
      r.run();
    } else {
      post(r);
    }
  }

  private void logD(String string) {
    Logging.d(TAG, resourceName + ": " + string);
  }
}

　　　　在CallActivity#onCreate中會調用SurfaceViewRender#init方法來進行初始化。

　　　　在CallActivity#onCreate中也會調用SurfaceViewRender#setEnableHardwareScaler方法進行硬件加速。

　　　　數據是怎么顯示到該視圖的呢？

　　　　在CallActivity#setSwappedFeeds中

　　

　　　　可以知道：

　　　　localProxyVideoSink就是本地視頻數據流的渲染器代理，它的目標視圖就是SurfaceViewRender。

　　　　remoteProxyRenderer就是遠程視頻數據流的渲染器代理，它的目標視圖也是SurfaceViewRender。

 

　　6.首先來跟蹤一下本地視頻數據流渲染器的代理==>localProxyVideoSink。

　　　　在CallActivity#ProxyVideoSink中，實現了VideoSink接口。（VideoSink接口中只有一個方法onFrame會被native代碼調用實現渲染的方法）

　　　　

　　　　這個靜態類部類共兩個方法，都加鎖了。

　　　　一個渲染onFrame，一個設置目標（所以這里知道了SurfaceViewRender視圖類為什么會繼承VideoSink了）。

　　　　

　　　　然后就是最關鍵的一步了。CallActivity#onConnectedToRoomInternal。

　　　　

　　　　由上可知，在創建對等連接的時候，就已經將攝像頭采集的數據（videoCapturer）關聯到本地視頻視圖的代理類(localProxyVideoSink)中了。

　　　　

　　　　所以在PeerConnectionClient得接收一下這幾個非常關鍵的參數。

　　　　PeerConnectionClient#createPeerConnection

　　　　

　　　　所以在PeerConnectionClient#localRender==>本地視頻流數據渲染器代理類。

　　　　　　   PeerConnectionClient#remoteSinks==>遠程視頻流數據渲染器代理類。

　　　　　　　PeerConnectionClient#videoCapturer==>本地攝像頭采集器（可能不是攝像頭，可能是文件或屏幕，我喜歡說成攝像頭）

　　　　　　　PeerConnectionClient#signalingParameters==>相關參數。

 

　　　　然后呢？localRender去哪里了？

　　　　在這里 PeerConnectionClient#createPeerConnectionInternal

　　　　

　　　　這里沒有localRender啊！別急，再看這里 PeerConnectionClient#createVideoTrack

　　　　

　　　　這里也是非常關鍵的一步，將本地采集的數據->VideoTrack對象。通過底層代碼實現。

　　　　然后localRender之旅到此結束，下面看看remoteSinks。

 

　　7.然后跟蹤一下遠程視頻流數據渲染器代理==>remoteSinks。

　　　　首先它是什么呢？它是一個List<VideoSink>集合，然而localRender是一個VideoSink。

　　　　為什么本地只有一個VideoSink，而遠程的是一個集合呢？

　　　　我也不知道。。但是可以猜測一下嘛：本地只能通過一種確定的方式采集數據，而遠程的數據流無法確定采集的方式，故只能用一個集合來記錄。

　　　　看看傳入遠程視頻流代理。　　　

　　　　

　　　　同樣地，在PeerConnectionClient#createPeerConnection中，接收一下傳入的遠程數據流渲染器代理集合（remoteSinks）。

 

　　　　

　　　　這里有兩個點，一個是獲取到遠程數據流返回的一個VideoTrack。一個是將VideoTrack設置給預覽視圖，這樣就能預覽到遠程視頻數據了。

 

　　　　來詳細看一下底層是怎么獲取到遠程數據流的==>PeerConnectionClient#getRemoteVideoTrack。

　　　　

　　　　這里通過peerConnection#getTransceivers獲取到RtpTransceiver(收發器)對象。（英文叫做收發器，姑且就叫它收發器吧）

　　　　通過收發器RtpTransceiver#getReceiver獲取到RTPReceiver對象。

　　　　通過RTPReceiver#track獲取到MediaStreamTrack。它就是我們要的東西。

　　　　哦不，將它強制轉換成VideoTrack才是我們真正要的東西。

 

　　　　注意點：如果ICE沒有正常連接，這里getReceiver估計也是接收不到數據的，所以一定要確保ICE Connected!!!

　　　　remoteSinks之旅就到此結束了。

 

8.剩下還有一個問題：視頻流的傳輸過程。

　　　　這個涉及到底層了。簡單分析一下。

　　　　入口在這里。PeerConnectionClient#createPeerConnectionInternal

　　　　

　　　　然后深入到PeerConnection#addTrack中看看。

　　　　

　　　　這里開始進行native操作了。PeerConnection#nativeAddTrack。

　　　　

　　　　這里傳入一個track和字符串數組，返回一個RtpSender。

 

　　　　那這個RtpSender具體做了什么呢？

　　　　

　　　　在它的構造函數中，就已經創建了一個cachedTrack，姑且叫做一個緩沖區軌道，所以這里面已經有數據了。

　　　　理一下思路：

　　　　　　前面經過了一些SDP,ICE互相傳遞數據后建立了一個通道（Channel）,通道是可以互相發送一些文本信息的。

　　　　　　但是要發送視頻流，環境要更加苛刻，還要Track(軌道)，這樣才能更加順利的發送視頻流。　　　　　　　　

　　

　　9.更加底層的C++源碼分析視頻數據流的傳輸可參考這篇大神寫的文章。

　　　　WebRTC Native源碼導讀（十）