如何修改示例应用程序，以使RTMP注入视频首先出现在UI中？

问题描述

我正在使用示例RTMP Injection应用程序进行测试。我想修改应用程序，使注入的RTMP流应该是在远程流网格中出现的第一个视频。有人可以帮忙吗？

解决方法

您可以使用Vanilla JS使用agora-broadcast-client.js中https://github.com/digitallysavvy/agora-web-broadcast-demo中类似的代码来设置网格的第一项：

// RTMP Connection (UI Component)
function addExternalTransmitionMiniView(rtmpUrl){
  var container = $('#rtmp-controlers');
  // append the remote stream template to #remote-streams
  container.append(
    $('<div/>',{'id': 'rtmp-container','class': 'container row justify-content-end mb-2'}).append(
      $('<div/>',{'class': 'pulse-container'}).append(
          $('<button/>',{'id': 'rtmp-toggle','class': 'btn btn-lg col-flex pulse-button pulse-anim mt-2'})
      ),$('<input/>',{'id': 'rtmp-url','val': rtmpUrl,'class': 'form-control col-flex" value="rtmps://live.facebook.com','type': 'text','disabled': true}),$('<button/>',{'id': 'removeRtmpUrl','class': 'btn btn-lg col-flex close-btn'}).append(
        $('<i/>',{'class': 'fas fa-xs fa-trash'})
      )
    )
  );
}

因此，您可以设置要在何处注入流。