如何修改示例应用程序，使RTMP注入视频在UI中排在第一位？

Question

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

Answer 1

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

​

// 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'})
      )
    )
  );
}

​

因此，您可以设置要将流注入的位置。