Flutterで動画の再生を行う Video Player / Image Picker Plugin使い方


# Flutterでの画像・動画取得
大体使い方はImageの時と同じですが、Flutter はデフォルトでは動画再生をサポートしていないため、動画を表示したり再生したりするにはサードパーティのプラグインを使う必要があります。
そこで、動画を再生するためには video_player プラグインを使用します。※後述

## Image Pickerで画像や動画を取得する
画像や動画を端末から取得する方法は、公式が出しているpluginの`Image Picker`を使うのが一番ポピュラーのようです。
Image Pickerっていう名前ですが、`getVideo()`関数が動画も取ってくれます。

### Pluginの追加
pubspec.yamlにimage_pickerプラグインを追加して`flutter pub get`を実行します。
ちなみに以下から最新バージョンはわかります。
https://pub.dev/packages/image_picker

### permissionの追加
指定されたプラグインのように、アンドロイドではパーミッションは必要ありませんが、iOSではいくつかのパーミッションを指定する必要があります。
Runner/Info.plistに以下を追加すればOK。

```
<key>NSPhotoLibraryUsageDescription</key>
<string>This app requires to access your photo library</string>
<key>NSCameraUsageDescription</key>
<string>This app requires to add file to your camera</string>
<key>NSMicrophoneUsageDescription</key>
<string>This app requires to add file to your photo library your microphone</string>
```

### Pluginの呼び出し
#### 画像をとる
https://pub.dev/documentation/image_picker/latest/image_picker/ImagePicker/getImage.html
画像を取るにはImagePicker().getImageメソッドを使います。

```dart
// メソッド定義
Future<PickedFile> getImage (
  {
    @required ImageSource source,
    double maxWidth,
    double maxHeight,
    int imageQuality,
    CameraDevice preferredCameraDevice = CameraDevice.rear
  }
)
```

第1引数：ImageSource：どこから画像・動画をとるか指定できます。ImageSource.galleryだと、ローカル(ギャラリー)に保存されたファイルから取得し、ImageSource.cameraだとカメラを起動して取得します。
第2引数：maxWidth: 画像の最大幅を指定します。
第3引数：maxHeightを指定します。画像の最大の高さを指定します。
第4引数：imageQuality：このプロパティは0から100までのdouble型の数値です。
第5引数：preferredCameraDevice : 使用するカメラを設定します。

#### 使い方
```dart
// カメラから画像をとる例
  File file;
  final picker = ImagePicker();
  Future getImage() async {
    final pickedFile = await picker.getImage(source: ImageSource.camera);
      if (pickedFile != null) {
        file = File(pickedFile.path);
      } else {
        print('No file selected.');
      }
      notifyListeners();
  }
```
こんな感じです。`notifyListners();`使ってなくて`_setState()`してる人は適宜読み替えてください。

#### 動画をとる
https://pub.dev/documentation/image_picker/latest/image_picker/ImagePicker/getVideo.html
画像を取るには`ImagePicker().getVideo`メソッドを使います。

```dart
// メソッド定義
Future<PickedFile> getVideo (
  {
    @required ImageSource source,
    CameraDevice preferredCameraDevice = CameraDevice.rear,
    Duration maxDuration
  }
)
```

大体使い方はImageの時と同じですが、Flutter はデフォルトでは動画再生をサポートしていないため、動画を表示したり再生したりするにはサードパーティのプラグインを使う必要があります。
そこで、動画を再生するために video_player プラグインを使用します。

## Video Playerで動画を再生する
### Pluginの追加

https://pub.dev/packages/video_player
ここから最新版のバージョンをチェックして、pubspec.yamlにこの依存関係を追加のち、`flutter pub get`します。
動画を再生するには video_player プラグインを使用していますが、このプラグインには VideoPlayerController が必要です。

### 使用方法

```dart
 _pickVideoFromCamera() async {
    PickedFile pickedFile = await picker.getVideo(source: ImageSource.camera);

    _cameraVideo = File(pickedFile.path);

    _cameraVideoPlayerController = VideoPlayerController.file(_cameraVideo)
      ..initialize().then((_) {
        setState(() {});
        _cameraVideoPlayerController.play();
      });
  }
```

この例では、まずファイルから動画を設定し、初期化が完了したら initialize を呼び出して`setState() {})` を実行し、`_cameraVideoPlayerController.play()`を使用して動画の再生を開始します。
何かのボタンをトリガーにして上記メソッドを呼べば、動画を取得でき、成功したときに再生できます。

また、Widget側では表示のために

```dart
child: VideoPlayer(_cameraVideoPlayerController),
```
としてあげれば、見事に動画を再生できます。