CRIADO PARA FLUTTER

UI Kit de streaming ao vivo para Flutter

Conecte criadores e espectadores com o Flutter Live Streaming UI Kit da Tencent RTC. Adicione widgets do TUILiveKit à sua aplicação Flutter para transmitir, assistir e descobrir salas.

RECURSOS PARA DESENVOLVEDORES

Documentação e exemplos de UI Kit de streaming ao vivo para Flutter

Demonstrações de produtos ao vivo no Flutter

Permita que os espectadores acompanhem a demonstração de produto de um criador e participem da conversa. Seu aplicativo gerencia o catálogo e a experiência de compra.

Visualização de eventos ao vivo no Flutter

Leve uma apresentação e seu público para sua aplicação Flutter. Conecte a tela de visualização à sala para que as pessoas possam acompanhar o evento ao vivo.

RECURSOS DE FLUTTER LIVE

Recursos de transmissão ao vivo em Flutter

Iniciar transmissão ao vivo

  • Funções de anfitrião e público
  • Gerenciamento do ciclo de vida da sala

Aproxime as pessoas

  • Reprodução de vídeo ao vivo
  • Participação do público

Deixe com a sua cara

  • Layout flexível do aplicativo
  • Blocos de construção específicos para cada plataforma

Explore os componentes de streaming ao vivo para Flutter

Conecte a visualização do anfitrião, a visualização do público e a lista de salas ao vivo à navegação do seu aplicativo.

Pré-visualização do anfitrião

Ofereça aos criadores um ponto de partida

Adicione a tela de preparação do host em Flutter para que os criadores visualizem a câmera antes da transmissão. Conecte a tela à sua conta de host autenticada.

Leia a documentação
live_page.dart
import 'package:tencent_live_uikit/tencent_live_uikit.dart';

Navigator.push(context, MaterialPageRoute(
  builder: (_) => TUILiveRoomAnchorOverlay(roomId: liveID),
));

PERSONALIZAÇÃO

Personalize seu Flutter Live UI Kit

Organize o vídeo, as interações do público e a navegação em torno da experiência ao vivo no seu aplicativo Flutter.

Sua identidade visual

Ajuste a apresentação visual usando as opções de personalização disponíveis na sua plataforma.

Leia a documentação

COMECE AGORA

Adicione transmissões ao vivo ao seu aplicativo Flutter

  1. 01

    Crie seu app

    Ative Live para a aplicação e os utilizadores de teste.

    Abrir a consola de Live
  2. 02

    Adicione UI Kit de streaming ao vivo para Flutter

    Siga o guia da plataforma para conectar seu projeto.

    Siga o Guia de Integração
  3. 03

    Conecte-se à sua primeira sala

    Use uma conta para transmitir e outra para assistir.

    Configure a autenticação
Flutter Live UI Kit
Terminal
flutter pub add tencent_live_uikit
live_page.dart
import 'package:atomic_x_core/atomicxcore.dart';

await LoginStore.shared.login(
  sdkAppID: SDKAppID, userID: userID, userSig: userSig,
);

Perguntas frequentes sobre UI Kit de streaming ao vivo para Flutter

O que posso criar com o Flutter Live UI Kit?

O Flutter Live Streaming UI Kit inclui interfaces para o anfitrião, o público e a lista de salas. Conecte esses componentes do TUILiveKit às contas dos usuários e à navegação do Flutter para criar um fluxo de visualização completo.

Como este UI Kit funciona com o SDK?

O UI Kit fornece componentes de interface sobre o serviço subjacente. Escolha o SDK quando precisar de mais controle sobre a interface do seu próprio aplicativo.

Como conectar um visualizador ao vivo em Flutter a uma transmissão?

Ative o serviço Live, autentique o espectador e entre na sala criada pelo apresentador. Use contas separadas para testar a tela do público no Flutter e siga o guia da plataforma para fazer a configuração.

Como autentico os usuários do Flutter Live Streaming UI Kit?

Crie um UserSig em seu servidor e envie-o ao cliente após a conclusão do seu próprio fluxo de login. Mantenha sempre o segredo do aplicativo no servidor.

O Flutter Live Streaming UI Kit pode ser usado gratuitamente?

A interface e o serviço Live hospedado desempenham funções diferentes. Ative o serviço para seu aplicativo e consulte o plano atual, a disponibilidade dos recursos e as cobranças de uso.

Como integro UI Kit de transmissão em direto Flutter com Dart?

Instale o pacote Flutter documentado e configure o projeto nativo de cada destino. Teste o ciclo de vida dos widgets junto ao comportamento subjacente de iOS e Android.

Como testo UI Kit de transmissão em direto Flutter antes de lançar a minha aplicação?

Teste papéis de anfitrião e espectador, eventos compatíveis de publicação ou reprodução e reconexão.

Como personalizo a interface de UI Kit de transmissão em direto Flutter?

Personalize os assets PNG e os arquivos de localização ARB da página do apresentador em uma cópia do código-fonte sob sua manutenção. Por exemplo, altere um rótulo em livekit_en.arb e execute flutter gen-l10n para regenerar o código de localização. Mantenha ComponentTheme e o observador de navegação do LiveKit conectados. TUILiveRoomAnchorOverlay deve ser aberto como uma rota independente, e não aninhado em Container ou Stack, pois gerencia sua própria sobreposição e o comportamento de janela flutuante.

Suporte à integração de Flutter Live

Leve transmissões ao vivo ao seu aplicativo Flutter

Conecte criadores e públicos com o Flutter Live Streaming UI Kit e seus guias de plataforma.