live_flutter_plugin

English | 简体中文

腾讯实时音视频(Tencent Real-Time Communication,TRTC)低延时互动直播方案 凭借行业领先的网络与音视频技术,结合腾讯云优质的节点资源,帮助开发者搭建卡顿率更低、延时1秒以内的互动直播,让直播走进 CDN 2.0 时代。

移动直播Flutter插件主页

功能特性

  • 支持 RTMP, HTTP-FLV, TRTC 以及 WebRTC;
  • 屏幕截图,可以截取当前直播流的视频画面;
  • 延时调节,可以设置播放器缓存自动调整的最小和最大时间;
  • 美颜、滤镜、贴纸,包含多套美颜磨皮算法(自然&光滑)和多款色彩空间滤镜(支持自定义滤镜);
  • Qos 流量控制技术,具备上行网络自适应能力,可以根据主播端网络的具体情况实时调节音视频数据量;

plugin文件说明

.
├── manager
│   ├── tx_audio_effect_manager.dart  背景音乐、短音效和人声特效的管理类
│   ├── tx_beauty_manager.dart  美颜与图像处理参数设置类
│   ├── tx_device_manager.dart  音视频设备管理类
│   └── tx_live_manager.dart  音视频pusher/player生命周期管理模块类
├── v2_tx_live_code.dart  腾讯云直播服务(LVB)错误码和警告码的定义。
├── v2_tx_live_def.dart  腾讯云直播服务(LVB)关键类型定义
├── v2_tx_live_player.dart  腾讯云直播播放器-主要负责从指定的直播流地址拉取音视频数据,并进行解码和本地渲染播放。
├── v2_tx_live_player_observer.dart  腾讯云直播的播放器回调通知。
├── v2_tx_live_premier.dart  SDK配置、授权接口
├── v2_tx_live_pusher.dart  腾讯云直播推流器-主要负责将本地的音频和视频画面进行编码,并推送到指定的推流地址,支持任意的推流服务端。
├── v2_tx_live_pusher_observer.dart 腾讯云直播推流的回调通知。
└── widget
    └── v2_tx_live_video_widget.dart 视频播放视图RenderViewWidget

快速集成SDK

Flutter SDK 已经发布到 pub 库,您可以通过配置 pubspec.yaml 自动下载更新。

1. 在项目的 pubspec.yaml 中写如下依赖:

dependencies:
  live_flutter_plugin: latest version number

2. 开通摄像头和麦克风的权限,即可开启语音通话功能。

iOS

1.需要在 Info.plist 中加入对相机和麦克风的权限申请:

<key>NSCameraUsageDescription</key>
<string>授权摄像头权限才能正常视频通话</string>
<key>NSMicrophoneUsageDescription</key>
<string>授权麦克风权限才能正常语音通话</string>

2. 开通摄像头和麦克风的权限,即可开启语音通话功能。

Android

1. 打开 /android/app/src/main/AndroidManifest.xml 文件。

2. 将 xmlns:tools="http://schemas.android.com/tools" 加入到 manifest 中。

3. 将 tools:replace="android:label" 加入到 application 中。

Note: 若不执行此步,会出现 Android Manifest merge failed 编译失败 问题。

快速开始

1. 配置License授权

import 'package:live_flutter_plugin/v2_tx_live_premier.dart';

 /// 腾讯云License管理页面(https://console.cloud.tencent.com/live/license)
setupLicense() {
  // 当前应用的License LicenseUrl
  var LICENSEURL = "";
  // 当前应用的License Key
  var LICENSEURLKEY = "";
  V2TXLivePremier.setLicence(LICENSEURL, LICENSEURLKEY);
}

2. 设置推流端

note: 请使用一台真机设备,不支持模拟器。

2.1 初始化V2TXLivePusher

import 'package:live_flutter_plugin/v2_tx_live_pusher.dart';

/// V2TXLivePusher 初始化
initPusher() {
  _livePusher = V2TXLivePusher(V2TXLiveMode.v2TXLiveModeRTC);
  /// 设置Pusher回调
  _livePusher.addListener(onPusherObserver);
}

/// pusher回调
onPusherObserver(V2TXLivePusherListenerType type, param) {
  debugPrint("==pusher listener type= ${type.toString()}");
  debugPrint("==pusher listener param= $param");
}

2.2 设置视频渲染RenderView

import 'package:live_flutter_plugin/widget/v2_tx_live_video_widget.dart';

/// 视频渲染View Widget
Widget renderView() {
  return V2TXLiveVideoWidget(
    onViewCreated: (viewId) async {
      /// 设置视频渲染View
      _livePusher.setRenderViewID(_renderViewId);
    },
  );
}

2.3 开始推流

/// 开始推流
startPush() async {
  // 打开摄像头
  await _livePusher.startCamera(true);
  // 打开麦克风
  await _livePusher.startMicrophone();
  // 生成推流地址 RTMP/TRTC
  var url = "";
  // 开始推流
  await _livePusher.startPush(url);
}

2.4 停止推流

/// 停止推流
stopPush() async {
  // 关闭摄像头
  await _livePusher.stopCamera();
  // 关闭麦克风
  await _livePusher.stopMicrophone();
  // 停止推流
  await _livePusher.stopPush();
}

3. 设置拉流端

note: 请使用另外一台设备配合推流端测试。

3.1 初始化V2TXLivePlayer

import 'package:live_flutter_plugin/v2_tx_live_player.dart';
/// 初始化V2TXLivePlayer
initPlayer() {
  _livePlayer = V2TXLivePlayer();
  _livePlayer.addListener(onPlayerObserver);
}

/// Player 回调
onPlayerObserver(V2TXLivePlayerListenerType type, param) {
  debugPrint("==player listener type= ${type.toString()}");
  debugPrint("==player listener param= $param");
}

3.2 设置视频渲染RenderView

import 'package:live_flutter_plugin/widget/v2_tx_live_video_widget.dart';

/// 视频渲染View Widget
Widget renderView() {
  return V2TXLiveVideoWidget(
    onViewCreated: (viewId) async {
      // 设置视频渲染View
      _livePlayer.setRenderViewID(_renderViewId);
    },
  );
}

3.3 开始拉流

/// 开始拉流
startPlay() async {
  // 生成拉流url RTMP/TRTC/Leb
  var url = ""
  // 开始拉流
  await _livePlayer?.startLivePlay(url);
}

3.4 停止拉流

/// 停止拉流
stopPlay() {
  _livePlayer.stopPlay();
}

常见问题

更多常见问题参考文档

iOS无法显示视频(Android是好的)

请确认 io.flutter.embedded_views_preview为YES在你的info.plist中

Android Manifest merge failed编译失败

请打开/example/android/app/src/main/AndroidManifest.xml文件。

1.将xmlns:tools="http://schemas.android.com/tools" 加入到manifest中

2.将tools:replace="android:label"加入到application中。

图示

Libraries

tx_audio_effect_manager
tx_beauty_manager
tx_device_manager
v2_tx_live_code
v2_tx_live_def
v2_tx_live_player
v2_tx_live_player_observer
v2_tx_live_premier
v2_tx_live_pusher
v2_tx_live_pusher_observer
v2_tx_live_video_widget