Flutter原生相机实现拍照、录制视频、扫描二维码和条码系列2

本系列的Flutter文章分为三篇，这个是第二篇
本篇是基于第一篇已经引入Flutter官方的Camera库的基础之上开发的
Flutter原生相机开发系列第二篇，原生相机录制视频的使用方法
第一步还是需要准本CameraController，并进行初始化工作

class _RecordVideoPageState extends State<RecordVideoPage> {
  CameraController? _controller;
  Future<void>? _initializeControllerFuture;

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

void _initCamera() async {
    final cameras = await availableCameras();
    final firstCamera = cameras.first;

    _controller = CameraController(
      firstCamera,
      ResolutionPreset.high,
    );
    _initializeControllerFuture = _controller!.initialize();
    setState(() {});
  }

第二步在build中进行预览

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('record video'),
      ),
      backgroundColor: Colors.black,
      body: FutureBuilder<void>(
        future: _initializeControllerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return Center(
              child: CameraPreview(_controller!),
            );
          } else {
            return const Center(child: CircularProgressIndicator());
          }
        },
      )

第三步开发 开始/停止视频录制功能，注意要注意一下CameraController的状态，不要重复开启录制

                     FloatingActionButton(
                        heroTag: Object(),
                        onPressed: () async {
                          if (!_controller!.value.isRecordingVideo) {
                            //没有在录制就开始录制
                            await _controller!.prepareForVideoRecording();
                            await _controller!.startVideoRecording();
                          } else {
                            //停止录制 并返回录制文件
                            XFile file = await _controller!.stopVideoRecording();
                          }
                        },
                        child: Text(
                          _controller!.value.isRecordingVideo ? 'stop' : 'record',
                          style: TextStyle(fontSize: 10),
                        ),
                      )

第四步开发 暂停/恢复视频录制功能

            FloatingActionButton(
                        heroTag: Object(),
                        onPressed: () async {
                          if (!_controller!.value.isRecordingVideo) {
                            //如果没在录制不能操作
                            return;
                          }

                          if (_controller!.value.isRecordingPaused) {
                            _controller!.resumeVideoRecording();   
                          } else {
                            _controller!.pauseVideoRecording();
                          }
                          setState(() {});
                        },
                        child: Text(_controller!.value.isRecordingPaused ? 'resume' : 'pause',
                            style: TextStyle(fontSize: 10)),
             ),

其他功能，暂停/恢复视频的预览画面

void _pausePreview() {
    _controller?.pausePreview();
  }

void _resumePreview() {
    _controller?.resumePreview();
 }

增加计时器，Timer具体可以随便实现

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

  @override
  State<TimerWidget> createState() => _TimerWidgetState();
}

class _TimerWidgetState extends State<TimerWidget> {
  int _count = 0;
  bool _isPause = false;
  Timer? _timer;

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

  void startTimer() {
    _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      if (!_isPause) {
        _count++;
        setState(() {});
      }
    });
  }

  void resumeTimer() {
    _isPause = false;
  }

  void pauseTimer() {
    _isPause = true;
  }

  void stopTimer() {
    _count = 0;
    _timer?.cancel();
    _timer = null;
  }

  @override
  Widget build(BuildContext context) {
    return ClipOval(
      child: Container(
        color: ThemeData().primaryColor,
        height: 50,
        width: 50,
        child: Center(
            child: Text(
          _getTimeText(),
          style: TextStyle(fontSize: 10, color: Colors.white),
        )),
      ),
    );
  }

  String _getTimeText() {
    if (_count == 0) {
      return '00:00';
    }
    if (_count < 60) {
      return _count < 10 ? '00:0$_count' : '00:$_count';
    }
    return '${_count / 60}:${_count % 60}';
  }
  @override
  void dispose() {
    super.dispose();
    stopTimer();
  }
}

简单的调用方式，可以使用GlobalKey直接调用

final GlobalKey<_TimerWidgetState> timerKey = GlobalKey();
//给widget绑定key
TimerWidget(key: timerKey,)

可以在暂停/恢复的时候对timer进行相关操作

 if (_controller!.value.isRecordingPaused) {
      _controller!.resumeVideoRecording();
      timerKey.currentState!.resumeTimer();
 } else {
     _controller!.pauseVideoRecording();
     timerKey.currentState!.pauseTimer();
 }

最后不要忘记释放掉CameraController

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }

本篇文章结束，欢迎各位交流~下一篇讲述使用Google的MLKit库开发Flutter App的扫码功能