Zenn
📸

Flutterで音量ボタンによるカメラシャッター機能を実装する方法

に公開
Android
Flutter
iOS
UX
camera
tech

Flutterで音量ボタンによるカメラシャッター機能を実装する方法

概要

  • ターゲット読者: Flutterでカメラアプリを開発している開発者
  • この記事で得られること:
    • 音量ボタンでカメラシャッターを切る機能の実装方法
    • VolumeControllerを使った音量変化の検知と制御
    • 撮影後の音量復元処理の実装パターン

環境

ツール バージョン
Flutter 3.22.1
volume_controller ^0.1.2
permission_handler ^11.0.1

背景

この前、開発で音量ボタンでカメラのシャッターを切れるようにしないといけない時に、Flutterで実践している記事を探したんですが、見つからなかったりしていたので今回は自分がどのようにシャッターボタンでカメラのシャッターを切れるようにしたのかを記事に書いてみようと思います！！

またiosでのビルドを前提に書いていますのでご容赦ください🙇

実装手順

1. セットアップ

まず、必要なパッケージをpubspec.yamlに追加します

dependencies:
  volume_controller: ^0.1.2
  permission_handler: ^11.0.1

2. VolumeControllerの初期化

class CameraPage extends StatefulWidget {
  @override
  _CameraPageState createState() => _CameraPageState();
}

class _CameraPageState extends State<CameraPage> {
  VolumeController? volumeController;
  double? initialVolume;
  bool isVolumeRestoring = false;
  bool isCapturing = false;
  int? cameraTextureId;

  @override
  void initState() {
    super.initState();
    setupVolumeController();
  }

  void setupVolumeController() {
    volumeController = VolumeController();
    initializeVolumeListener();
  }
}

3. 音量変化リスナーの実装

音量ボタンが押された時の処理を実装します

Future<void> initializeVolumeListener() async {
  try {
    if (volumeController == null) return;

    // 現在の音量を保存
    initialVolume = await volumeController!.getVolume();

    // 音量変化を監視
    volumeController!.listener((currentVolume) {
      handleVolumeChange(currentVolume);
    });
  } catch (e) {
    print('音量リスナー初期化エラー: $e');
  }
}

void handleVolumeChange(double currentVolume) {
  // 音量復元中は処理をスキップ
  if (isVolumeRestoring) {
    initialVolume = currentVolume;
    return;
  }

  // 音量が変化した場合（ボタンが押された）
  if (initialVolume != null && initialVolume != currentVolume) {
    if (canTakePicture()) {
      executeShutter();
    }
  }

  initialVolume = currentVolume;
}

bool canTakePicture() {
  return !isCapturing && 
         cameraTextureId != null && 
         !isVolumeRestoring;
}

void executeShutter() {
  isVolumeRestoring = true;
  takePicture();
  restoreVolumeAfterDelay();
}

4. 音量復元機能の実装

撮影後に音量を元に戻す処理を実装します：

void restoreVolumeAfterDelay() {
  Future.delayed(Duration(milliseconds: 150), () {
    if (!mounted) return;
    
    restoreVolume();
    
    Future.delayed(Duration(milliseconds: 100), () {
      if (mounted) {
        isVolumeRestoring = false;
      }
    });
  });
}

void restoreVolume() {
  if (initialVolume != null && volumeController != null) {
    volumeController!.setVolume(initialVolume!);
    print('音量を復元しました: $initialVolume');
  }
}

5. 撮影処理の実装

Future<void> takePicture() async {
  if (isCapturing) return;

  setState(() {
    isCapturing = true;
  });

  try {
    // カメラで撮影
    final imagePath = await captureImage();
    
    if (imagePath != null) {
      // 撮影成功時の処理
      handleSuccessfulCapture(imagePath);
    }
  } catch (e) {
    print('撮影エラー: $e');
  } finally {
    if (mounted) {
      setState(() {
        isCapturing = false;
      });
    }
  }
}

Future<String?> captureImage() async {
  // 実際のカメラ撮影処理
  // ここでは例として固定値を返す
  return '/path/to/captured/image.jpg';
}

void handleSuccessfulCapture(String imagePath) {
  // 撮影成功時の処理（画面遷移など）
  print('撮影完了: $imagePath');
}

6. リソースのクリーンアップ

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

void cleanupVolumeController() {
  volumeController?.removeListener();
  volumeController = null;
}

つまずきポイント & 解決策

1. 音量復元のタイミング問題

問題: 音量ボタンを押した後、音量が元に戻らない

原因: 音量復元処理のタイミングが早すぎる

解決策:

// 適切な遅延時間を設定
Future.delayed(Duration(milliseconds: 150), () {
  restoreVolume();
});

2. 重複撮影の防止

問題: 音量ボタンを連続で押すと複数回撮影される

原因: 撮影状態の管理が不十分

解決策:

bool canTakePicture() {
  return !isCapturing && 
         cameraTextureId != null && 
         !isVolumeRestoring;
}

3. カメラ状態の管理

問題: カメラが初期化中やエラー状態でも音量ボタンが反応する

原因: カメラの状態チェックが不十分

解決策: 複数の状態フラグを組み合わせて条件分岐

  • isCapturing: 撮影中かどうか
  • cameraTextureId: カメラが初期化済みかどうか
  • isVolumeRestoring: 音量復元中でないか

まとめ

  • 音量ボタンによるシャッター機能はvolume_controllerパッケージで簡単に実装できる
  • 音量復元処理には適切なタイミング制御とフラグ管理が重要
  • カメラの状態管理を適切に行うことで、安定した撮影体験を提供できる

注意

音量ボタンをカメラのシャッターボタンに置き換えることはappleの審査を通過できない可能性があるそうです。
今回の場合は音量ボタンを押した際の音量の変更の機能自体は阻止していないので審査に問題ないと思いますが、審査で指摘された場合は違うアプローチをお勧めします。

参考リンク:

Discussion