Flutter视频上传插件video_uploader的使用

Table of contents

• 项目描述
• 开始使用
  • 安装
  • Android配置
    • 权限
    • 通知
  • 代码示例
• 依赖项
• 常见问题解答

项目描述

api.video 是为产品构建者提供的视频基础设施。它提供了快速的视频API，用于在您的应用程序中集成、扩展和管理按需和低延迟直播功能。

api.video 的 Flutter 上传器通过委托上传令牌或 API 密钥将视频上传到 api.video。它支持两种上传方式：

• 标准上传：一次性发送整个视频文件。
• 渐进式上传：分块发送视频文件，无需知道最终文件大小。

开始使用

安装

在项目的根目录下运行以下命令以添加 video_uploader 插件：

flutter pub add video_uploader

这将在 pubspec.yaml 文件中添加以下内容：

dependencies:
  video_uploader: ^1.3.0

Android配置

权限

• 对于 Android API 33 及以上版本，需要请求 android.permission.READ_MEDIA_VIDEO 权限。
• 对于 Android API 33 以下版本，需要请求 android.permission.READ_EXTERNAL_STORAGE 权限。

此外，如果您的应用目标是 Android 33 及以上版本，您可能还需要请求 android.permission.POST_NOTIFICATIONS 权限。

对于 Android API 34 及以上版本，在 AndroidManifest.xml 文件的 <application> 标签中添加以下服务声明：

<service 
    android:name="androidx.work.impl.foreground.SystemForegroundService"
    android:exported="false" 
    android:foregroundServiceType="dataSync" />

通知

为了自定义通知样式，您可以覆盖以下资源：

• 图标：R.drawable.ic_upload_notification
• 颜色：R.color.upload_notification_color
• 通道名称：R.string.upload_notification_channel_name

代码示例

以下是一个完整的示例代码，展示了如何使用 video_uploader 插件来选择并上传视频文件，并显示上传进度。

import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:image_picker/image_picker.dart';
import 'package:video_uploader/video_uploader.dart';

const primaryColor = Color(0xFFFA5B30);
const secondaryColor = Color(0xFFFFB39E);

void main() {
  runApp(const UploaderDemo());
}

class UploaderDemo extends StatelessWidget {
  const UploaderDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: primaryColor,
      ),
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: primaryColor,
          title: const Text('Uploader Example'),
        ),
        body: const UploaderPage(),
      ),
    );
  }
}

class UploaderPage extends StatefulWidget {
  const UploaderPage({Key? key}) : super(key: key);

  @override
  UploaderPageState createState() => UploaderPageState();
}

class UploaderPageState extends State<UploaderPage> {
  final _tokenTextController = TextEditingController();
  final ImagePicker _picker = ImagePicker();
  double _progressValue = 0;
  bool _hasUploadStarted = false;

  void setProgress(double value) async {
    setState(() {
      _progressValue = value;
    });
  }

  @override
  void dispose() {
    _tokenTextController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            const SizedBox(height: 52),
            TextField(
              cursorColor: primaryColor,
              decoration: const InputDecoration(
                border: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.white, width: 2.0),
                ),
                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: primaryColor, width: 2.0),
                ),
                hintText: 'Your upload token',
              ),
              controller: _tokenTextController,
            ),
            MaterialButton(
              color: primaryColor,
              child: const Text(
                "Pick Video",
                style: TextStyle(color: Colors.white70, fontWeight: FontWeight.bold),
              ),
              onPressed: () async {
                var source = ImageSource.gallery;
                XFile? image = await _picker.pickVideo(source: source);
                if (image != null) {
                  setState(() {
                    _hasUploadStarted = true;
                  });
                  try {
                    var video = await ApiVideoUploader.uploadWithUploadToken(
                        _tokenTextController.text, image.path,
                        onProgress: (progress) {
                      log("Progress :$progress");
                      setProgress(progress);
                    });
                    log("VideoId : ${video.videoId}");
                    log("Video : $video");
                    if (context.mounted) {
                      showSuccessSnackBar(context, "Video ${video.videoId} uploaded");
                    }
                  } on Exception catch (e) {
                    log("Failed to upload video: $e");
                    if (context.mounted) {
                      showErrorSnackBar(context, "Failed to upload video: ${e.message}");
                    }
                  } catch (e) {
                    log("Failed to upload video: $e");
                    if (context.mounted) {
                      showErrorSnackBar(context, "Failed to upload video $e");
                    }
                  }
                }
              },
            ),
            _hasUploadStarted
                ? LinearProgressIndicator(
                    color: primaryColor,
                    backgroundColor: secondaryColor,
                    value: _progressValue,
                  )
                : Container(),
            _hasUploadStarted
                ? MaterialButton(
                    color: primaryColor,
                    child: const Text(
                      "Cancel",
                      style: TextStyle(color: Colors.white70, fontWeight: FontWeight.bold),
                    ),
                    onPressed: () async {
                      try {
                        await ApiVideoUploader.cancelAll();
                      } catch (e) {
                        log("Failed to cancel video: $e");
                      }
                    },
                  )
                : Container(),
          ],
        ),
      ),
    );
  }

  void showSuccessSnackBar(BuildContext context, String message) {
    context.showSnackBar(message, backgroundColor: Colors.green);
  }

  void showErrorSnackBar(BuildContext context, String message) {
    context.showSnackBar(message,
        backgroundColor: Colors.red,
        duration: const Duration(seconds: 60),
        showCloseIcon: true);
  }
}

extension ErrorExtension on Exception {
  String get message {
    if (this is PlatformException) {
      return (this as PlatformException).message ?? "Unknown error";
    }
    return toString();
  }
}

extension BuildContextSnachBarExtension on BuildContext {
  void showSnackBar(String message,
      {Color? backgroundColor,
      Duration duration = const Duration(seconds: 4),
      bool showCloseIcon = false}) {
    ScaffoldMessenger.of(this).showSnackBar(
      SnackBar(
        content: Text(message),
        backgroundColor: backgroundColor,
        duration: duration,
        showCloseIcon: showCloseIcon,
      ),
    );
  }
}

依赖项

此项目使用了以下外部库：

常见问题解答

如果您有任何问题，请访问 社区 或使用 Issues 提问。