随着移动互联网的普及和5g时代的到来，视频越来越成为人们分享和传播信息的首选方式。在开发一款包含拍摄视频功能的app时，需要调用手机的摄像头来实现视频拍摄和上传等功能。本文将会介绍如何在uniapp中调起摄像头来拍摄视频。
一、uniapp
uniapp是一款基于Vue.js框架的跨平台应用开发框架。它可以快速的在多个平台上构建高性能、高效、可扩展的移动应用程序。uniapp提供了一个统一的技术栈，开发者只需要编写一次代码，即可发布到多个平台，如iOS、Android和微信小程序等。
二、调起摄像头拍摄视频
调起摄像头拍摄视频需要使用uniapp提供的uni.chooseVideo()方法。下面是具体的步骤：
- 在pages.json中添加一个页面，并设置对应的路径和页面文件
{
"pages": [
{
"path": "pages/video/index",
"style": {
"navigationBarTitleText": "拍摄视频"
}
}
]
}- 在video文件夹下新建一个index.vue文件，用于实现视频拍摄功能
在页面中，我们通过一个按钮来触发chooseVideo方法。在chooseVideo方法中，我们通过调用uni.chooseVideo()方法来调起摄像头。
uni.chooseVideo({
sourceType: ["camera"], // 调起相机拍摄
compressed: true, // 开启视频压缩
maxDuration: 10, // 设置最大拍摄时间为10秒
camera: "back", // 相机方向为后置摄像头
success: res => {
console.log(res.tempFilePath); // 输出视频文件地址
//TODO: 上传视频到服务器
},
fail: e => {
console.log(e);
}
});我们可以看到，选择视频时可以设置一些选项，如视频来源，是否压缩视频，最大拍摄时间，摄像头方向等。其中，maxDuration选项的单位为秒。在成功选择视频后，会返回一个包含视频文件地址的res对象，我们可以将其上传到服务器。
三、上传视频到服务器
在成功选择视频并获取视频文件地址后，我们需要将其上传到服务器。在uniapp中，可以使用uni.uploadFile()方法来实现视频上传。
具体的步骤如下：
- 在服务器端，需要编写一个用于接收视频文件的接口。
- 在前端，需要修改chooseVideo方法，将选择视频成功后的文件地址上传到服务器。
uni.chooseVideo({
sourceType: ["camera"],
compressed: true,
maxDuration: 10,
camera: "back",
success: res => {
//将选择的视频文件上传到服务器
uni.uploadFile({
url: "http://127.0.0.1:3000/api/upload",
filePath: res.tempFilePath,
name: "file",
success: uploadRes => {
console.log(uploadRes);
//TODO: 处理上传成功后的逻辑
},
fail: e => {
console.log(e);
}
});
},
fail: e => {
console.log(e);
}
});在uploadFile方法中，需要指定上传的服务器地址、要上传的文件路径、上传时文件的名称等。上传成功后，会返回一个包含上传结果的uploadRes对象，我们可以根据结果来处理上传成功后的逻辑。
四、总结
通过uni.chooseVideo()方法，我们可以快速调起摄像头拍摄视频，并将视频上传到服务器。这样，我们就可以开发一款具有视频拍摄功能的应用程序。同时，uniapp提供了一系列类似的API，可以帮助我们在跨平台开发中快速实现各种功能。
