文章目录
- 1. 概念介绍
- 2. 方法与细节
- 2.1 实现方法
- 2.2 具体细节
- 3. 示例代码
- 4. 内容总结
我们在上一章回中介绍了"如何混合选择多个图片和视频文件"相关的内容,本章回中将介绍如何通过相机获取视频文件.闲话休提,让我们一起Talk Flutter吧。
1. 概念介绍
我们在前面章回中介绍的选择图片或者视频文件的方式都是通过文件窗口进行的,本章回中将介绍如何通过相机获取视频文件,也就是说我们不再选择已经拍好的视频,
而是在选择视频时直接使用相机录制一个新的视频文件。
2. 方法与细节
通过相机获取视频也是通过image_picke包来实现,这个包虽然叫image_picker,但是它可以选择视频,而且可以调用相机去拍照和录像。
2.1 实现方法
该包提供了pickVideo()方法来从相机获取视频文件,接下来我们介绍详细的实现方法。
- 创建文件选择器对象,也就是包中提供的ImagePicker类的实例;
- 使用文件选择器的pickVideo()方法获取视频文件,通过该方法的参数把视频源设置为相机;
- 该方法会启动相机来录像并且把录像后视频的存储路径返回给方法调用者;
- 获取到视频文件的路径后就可以使用VideoPlayer组件来加载视频文件;
2.2 具体细节
上面的步骤中使用了ImagePicker的pickVideo()方法,该方法返回的是Future<XFile?>
类型的对象,因此我们需要通过Future的then方法来获取文件路径。
此外,该方法需要异步运行,因为获取文件路径是比较耗时的操作。方法中的source参数用来控制视频源,包中一共支持两种图片源:gallery和camera。它们分别表
示通过相册和相机来获取视频。该方法还有一个命名参数:CameraDevice,该参数用来控制拍照时使用前置相机还是后置相机。该方法的另外一个参数是Duration,
用来控制录制视频的时间,因为视频文件比较大,需要限定时间,否则使用默认的最大值infinite。
3. 示例代码
ImagePicker imagePicker = ImagePicker();XFile? _videoFile;Future<XFile?> getVideoFiles() async {var list = await imagePicker.pickVideo(source: ImageSource.camera);return list;
}ElevatedButton(onPressed: () {getVideoFiles().then((value) {///因为是异步,所以需要通过setState更新数据源setState(() {///返回的路径是app下的缓冲目录:data/user/0/packagename/cache/scaled_1000000010.jpg// debugPrint("path: v${value[0].path}");_videoFile = value;playVideo(_videoFile!);});});},child: const Text("load video"),
),
上面的示例代码中演示了如何通过相机获取视频文件,代码把pickVideo()方法封装成了异步方法,并且将它绑定到按钮上,这样就可以在点击按钮时发出获取文件的指
令,此时会打开相机,我们可以使用相机录像,录像完成后有确认和放弃所录视频的图标:对号和和错号。这种操作以可视化操作的方式选择视频文件,十分方便。代码中
加载视频前需要检查文件路径,文件路径在程序最开始运行时为null,在程序运行后,但是没有选择任何视频文件时的文件路径不为空,而是为empty,这点需要特别注意,
不然无法正确预览视频文件。此外,我们获取到的视频文件路径是一个相对路径,它并不是视频文件的绝对路径。此外,代码中把播放视频文件的内容封装成了独立的方法:
playVideo我们只需要给该方法传入文件路径就可以播放视频,该方法的具体实现内容可以参考"如何播放视频文件"章回中的内容。
4. 内容总结
最后,我们对本章回的内容做一个全面的总结:
- Flutter官方提供了image_picker包,该包以可视化操作的方式获取文件路径;
- 使用包中的pickVideo()方法可以通过相机来获取视频文件的相对路径;
- 包中的pickVidoe()方法提供了相关的参数来设置视频来源和前后相机;
- 加载视频文件前需要检查文件路径的可靠性,不然可能导致无法加载视频文件;
看官们,与"如何通过相机获取视频文件"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!