Flutter生成人类头像插件human_avatar的使用

介绍

human_avatar 是一个用于创建人类头像和视频的 Flutter 插件。

安装

要使用此插件，在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  human_avatar: any

开始使用

在开始使用 human_avatar 之前，你需要在 Elai 平台上注册并生成你的密钥。请参阅文档以获取更多信息。

创建头像

使用以下代码创建头像：

await _humanAvatarPlugin.createAvatar(
  secretKey: secretKey,
  gender: "male",
  photoName: photo.name,
  photoData: _base64String,
);

创建视频

使用以下代码创建视频：

await _humanAvatarPlugin.createVideoAvatar(
  secretKey: secretKey,
  imageUrl: data?.frontendConfig?.canvas ?? '',
  speechText: "this is my first text video",
  gender: "male",
  avatarName: "",
  avatarId: data?.avatarDataId ?? '',
  onRender: (value) {
    print(value.url);
    createVideoAvatarData = value;
  }
);

示例代码

以下是完整的示例代码：

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:human_avatar/human_avatar.dart';
import 'package:human_avatar/models/AvatarData.dart';
import 'package:human_avatar/models/CreateVideoAvatarData.dart';
import 'package:human_avatar_example/video_player_view.dart';
import 'package:image_picker/image_picker.dart';

void main() {
  runApp(const MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final secretKey = 'Z0BHr9hDpHw0yl9pQsiMHTN6cXdfgdfga'; // 你的密钥

  /// 初始化 HumanAvatar 插件
  final _humanAvatarPlugin = HumanAvatar();

  /// 用于处理创建头像的响应
  AvatarData? data;

  /// 用于处理创建头像视频的响应
  CreateVideoAvatarData? createVideoAvatarData;

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Plugin example app'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            createVideoAvatarData?.url ?? "No url found",
            style: const TextStyle(color: Colors.black),
          ),
          if (createVideoAvatarData?.url == null) ...{
            GestureDetector(
              onTap: () async {
                /// 导航到视频播放器，并传入创建的视频 URL
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) =>
                            VideoPlayerView(createVideoAvatarData?.url ?? '')));
              },
              child: Container(
                  margin:
                      const EdgeInsets.symmetric(horizontal: 30, vertical: 10),
                  height: 50,
                  width: double.infinity,
                  color: Colors.black,
                  child: const Center(
                      child: Text(
                    '查看视频',
                    style: TextStyle(color: Colors.white),
                  ))),
            ),
          },
          GestureDetector(
            onTap: () async {
              /// 打开设备相机
              final XFile? photo =
                  await ImagePicker().pickImage(source: ImageSource.camera);
              if (photo != null) {
                Uint8List bytes = await photo.readAsBytes();
                String base64String = base64.encode(bytes);

                /// 调用创建图像头像
                data = await _humanAvatarPlugin.createAvatar(
                    secretKey: secretKey,
                    gender: "male",
                    photoName: photo.name,
                    photoData: base64String // 图像数据以 base64 编码
                    );
                if (data != null) {
                  setState(() {});
                }
              }
            },
            child: Container(
                margin:
                    const EdgeInsets.symmetric(horizontal: 30, vertical: 20),
                height: 50,
                width: double.infinity,
                color: Colors.black,
                child: const Center(
                    child: Text(
                  '创建头像',
                  style: TextStyle(color: Colors.white),
                ))),
          ),
          if (data?.frontendConfig?.thumbnail != null) ...{
            GestureDetector(
              onTap: () async {
                /// 调用创建视频，使用你的头像 URL
                await _humanAvatarPlugin.createVideoAvatar(
                    secretKey: secretKey,
                    imageUrl: data?.frontendConfig?.canvas ?? '',
                    speechText: "this is my first text video",
                    gender: data?.frontendConfig?.gender ?? '',
                    avatarName: "",
                    avatarId: data?.avatarDataId ?? '',
                    onRender: (value) {
                      createVideoAvatarData = value;
                      setState(() {});
                    });
              },
              child: Container(
                  margin:
                      const EdgeInsets.symmetric(horizontal: 30, vertical: 10),
                  height: 50,
                  width: double.infinity,
                  color: Colors.black,
                  child: const Center(
                      child: Text(
                    '创建头像视频',
                    style: TextStyle(color: Colors.white),
                  ))),
            ),
          }
        ],
      ),
    );
  }
}