How to activate the camera to take video in uniapp

With the popularization of mobile Internet and the arrival of the 5G era, video has increasingly become the preferred way for people to share and disseminate information. When developing an APP that includes the function of shooting videos, it is necessary to call the camera of the mobile phone to realize functions such as video shooting and uploading. This article will introduce how to activate the camera in uniapp to shoot videos.

1. uniapp

uniapp is a cross-platform application development framework based on the Vue.js framework. It can quickly build high-performance, efficient, and scalable mobile applications on multiple platforms. uniapp provides a unified technology stack. Developers only need to write code once and publish it to multiple platforms, such as iOS, Android and WeChat applets.

2. Turn up the camera to shoot videos

To turn up the camera to shoot videos, you need to use the uni.chooseVideo() method provided by uniapp. The following are the specific steps:

1. Add a page in pages.json and set the corresponding path and page file

{
  "pages": [
    {
      "path": "pages/video/index",
      "style": {
        "navigationBarTitleText": "拍摄视频"
      }
    }
  ]
}

2. under the video folder Create a new index.vue file to implement the video shooting function

<template>
  <view class="container">
    <button type="primary" @click="chooseVideo">拍摄视频</button>
  </view>
</template>

<script>
export default {
  methods: {
    chooseVideo() {
      uni.chooseVideo({
        sourceType: ["camera"],
        compressed: true,
        maxDuration: 10,
        camera: "back",
        success: res => {
          console.log(res.tempFilePath);
          //TODO: 上传视频到服务器
        },
        fail: e => {
          console.log(e);
        }
      });
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

In the page, we trigger the chooseVideo method through a button. In the chooseVideo method, we call the uni.chooseVideo() method to activate the camera.

uni.chooseVideo({
  sourceType: ["camera"], // 调起相机拍摄
  compressed: true, // 开启视频压缩
  maxDuration: 10, // 设置最大拍摄时间为10秒
  camera: "back", // 相机方向为后置摄像头
  success: res => {
    console.log(res.tempFilePath); // 输出视频文件地址
    //TODO: 上传视频到服务器
  },
  fail: e => {
    console.log(e);
  }
});

We can see that when selecting a video, you can set some options, such as video source, whether to compress the video, maximum shooting time, camera direction, etc. Among them, the unit of maxDuration option is seconds. After successfully selecting a video, a res object containing the address of the video file is returned, which we can upload to the server.

3. Upload the video to the server

After successfully selecting the video and obtaining the video file address, we need to upload it to the server. In uniapp, you can use the uni.uploadFile() method to implement video upload.

The specific steps are as follows:

1. On the server side, you need to write an interface for receiving video files.
2. On the front end, you need to modify the chooseVideo method to upload the file address of the successfully selected video to the server.

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);
  }
});

In the uploadFile method, you need to specify the upload server address, the file path to be uploaded, the name of the file when uploading, etc. After the upload is successful, an uploadRes object containing the upload result will be returned. We can process the logic after the upload is successful based on the result.

4. Summary

Through the uni.chooseVideo() method, we can quickly set up the camera to shoot the video and upload the video to the server. In this way, we can develop an application with video shooting capabilities. At the same time, uniapp provides a series of similar APIs that can help us quickly implement various functions in cross-platform development.

The above is the detailed content of How to activate the camera to take video in uniapp. For more information, please follow other related articles on the PHP Chinese website!