时间戳

首页 > 解决方案 > 如何修改示例应用程序以使 RTMP 注入视频在 UI 中排在首位？

agora.io - 如何修改示例应用程序以使 RTMP 注入视频在 UI 中排在首位？

问题描述

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

标签： agora.io

解决方案

您可以使用 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'})
      )
    )
  );
}

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

推荐阅读