Flutter全景相机功能插件camera_360的使用

camera_360 插件允许用户通过手机摄像头拍摄360度全景图像。它利用OpenCV将多个图像拼接在一起，并提供一个简单的UI来指导用户完成整个过程。

Demo

您可以查看 Tridiar - Virtual Tours 应用程序在 iOS 和 Android 上的效果。

安装

iOS

在 Info.plist 文件中添加以下内容：

<key>NSCameraUsageDescription</key>
<string>This application needs access to your Camera in order to capture 360 Images</string>
<key>NSMicrophoneUsageDescription</key>
<string>This application needs access to your Microphone in order to capture videos</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>This application needs access to your Photo Library in order to save the captured images</string>

Android

注意事项

由于OpenCV为不同的CPU架构构建，建议在构建发布版本时运行以下命令以生成多个APK文件：

flutter build apk --split-per-abi --release

在 android/app/build.gradle 文件中将最低的Android SDK版本设置为21（或更高）：

minSdkVersion 21

在 AndroidManifest.xml 文件中添加以下权限：

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Dart

导入 camera_360 插件并使用如下代码：

import 'package:camera_360/camera_360.dart';
import 'package:image_picker/image_picker.dart';

Camera360(
  // 文本：正在准备全景图
  userLoadingText: "Preparing panorama...",
  // 文本：请将摄像头对准点
  userHelperText: "Point the camera at the dot",
  // 文本：请向左倾斜设备
  userHelperTiltLeftText: "Tilt left",
  // 文本：请向右倾斜设备
  userHelperTiltRightText: "Tilt Right",
  // iPhone >= 11 建议使用键值 2 选择广角摄像头
  // 在安卓设备上目前无法切换摄像头，因此建议使用键值 0
  userSelectedCameraKey: 2,
  // 摄像头选择器可见性
  cameraSelectorShow: true,
  // 摄像头选择器信息可见性
  cameraSelectorInfoPopUpShow: true,
  // 摄像头选择器信息小部件
  cameraSelectorInfoPopUpContent: const Text(
    "Select the camera with the widest viewing angle below.",
    textAlign: TextAlign.center,
    style: TextStyle(
      color: Color(0xffEFEFEF),
    ),
  ),
  // 自定义消息：如果摄像头未找到或未准备好
  cameraNotReadyContent: const Center(
    child: Padding(
      padding: EdgeInsets.symmetric(horizontal: 10, vertical: 20),
      child: Text(
        "Camera not ready",
        style: TextStyle(fontWeight: FontWeight.bold),
      ),
    ),
  ),
  // 回调函数：当360度捕捉结束时调用
  onCaptureEnded: (data) {
    if (data['success'] == true) {
      XFile panorama = data['panorama'];
      print("Final image returned ${panorama.toString()}");
    } else {
      print("Final image failed");
    }
  },
  // 回调函数：当摄像头镜头改变时调用
  onCameraChanged: (cameraKey) {
    print("Camera changed ${cameraKey.toString()}");
  },
  // 回调函数：当捕捉进度改变时调用
  onProgressChanged: (newProgressPercentage) {
    debugPrint("'Panorama360': Progress changed: $newProgressPercentage");
  },
)

示例代码

以下是一个完整的示例应用，展示了如何使用 camera_360 插件：

import 'package:camera_360/camera_360.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:gallery_saver/gallery_saver.dart';

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

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

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

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('360 Camera App'),
        ),
        body: const CameraPage(),
      ),
    );
  }
}

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

  [@override](/user/override)
  State<CameraPage> createState() => _CameraPageState();
}

class _CameraPageState extends State<CameraPage> {
  int progressPecentage = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    void displayPanoramaMessage(context, String message) {
      final snackBar = SnackBar(
        content: Text(message),
      );
      ScaffoldMessenger.of(context).showSnackBar(snackBar);
    }

    return Stack(
      children: [
        Camera360(
          // 文本：正在准备全景图
          userLoadingText: "Preparing panorama...",
          // 文本：请将摄像头对准点
          userHelperText: "Point the camera at the dot",
          // 文本：请向左倾斜设备
          userHelperTiltLeftText: "Tilt left",
          // 文本：请向右倾斜设备
          userHelperTiltRightText: "Tilt Right",
          // iPhone >= 11 建议使用键值 2 选择广角摄像头
          // 在安卓设备上目前无法切换摄像头，因此建议使用键值 0
          userSelectedCameraKey: 2,
          // 摄像头选择器可见性
          cameraSelectorShow: true,
          // 摄像头选择器信息可见性
          cameraSelectorInfoPopUpShow: true,
          // 摄像头选择器信息小部件
          cameraSelectorInfoPopUpContent: const Column(
            children: [
              Padding(
                padding: EdgeInsets.only(bottom: 10),
                child: Text(
                  "Notice: This feature only works if your phone has a wide angle camera.",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Color(0xffDB4A3C),
                  ),
                ),
              ),
              Text(
                "Select the camera with the widest viewing angle below.",
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: Color(0xffEFEFEF),
                ),
              ),
            ],
          ),
          // 回调函数：当360度捕捉结束时调用
          onCaptureEnded: (data) {
            if (data['success'] == true) {
              // 将图像保存到相册
              XFile panorama = data['panorama'];
              GallerySaver.saveImage(panorama.path);
              displayPanoramaMessage(context, 'Panorama saved!');
            } else {
              displayPanoramaMessage(context, 'Panorama failed!');
            }
            print(data);
          },
          // 回调函数：当摄像头镜头改变时调用
          onCameraChanged: (cameraKey) {
            displayPanoramaMessage(
                context, "Camera changed ${cameraKey.toString()}");
          },
          // 回调函数：当捕捉进度改变时调用
          onProgressChanged: (newProgressPercentage) {
            debugPrint(
                "'Panorama360': Progress changed: $newProgressPercentage");
            setState(() {
              progressPecentage = newProgressPercentage;
            });
          },
        ),
        Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Text(
              "Progress: $progressPecentage",
              style: const TextStyle(
                  color: Colors.white, backgroundColor: Colors.black),
            )
          ],
        ),
      ],
    );
  }
}