유니앱에서 영상을 촬영하기 위해 카메라를 활성화하는 방법

모바일 인터넷의 대중화와 5G 시대의 도래로 인해 동영상은 사람들이 정보를 공유하고 전파하는 데 점점 더 선호되는 방식이 되었습니다. 동영상 촬영 기능이 포함된 APP를 개발할 때, 동영상 촬영, 업로드 등의 기능을 구현하려면 휴대폰의 카메라를 호출해야 합니다. 이번 글에서는 유니앱에서 카메라를 활성화하여 동영상을 촬영하는 방법을 소개하겠습니다.

1. uniapp

uniapp은 Vue.js 프레임워크를 기반으로 하는 크로스 플랫폼 애플리케이션 개발 프레임워크입니다. 여러 플랫폼에서 효율적이고 확장 가능한 고성능 모바일 애플리케이션을 신속하게 구축할 수 있습니다. uniapp은 통합 기술 스택을 제공합니다. 개발자는 코드를 한 번만 작성하고 이를 iOS, Android 및 WeChat 애플릿과 같은 여러 플랫폼에 게시하면 됩니다.

2. 카메라 전원을 켜서 동영상을 촬영하세요

카메라 전원을 켜고 동영상을 촬영하려면 uniapp에서 제공하는 uni.chooseVideo() 메소드를 사용해야 합니다. 구체적인 단계는 다음과 같습니다.

1. pages.json에 페이지를 추가하고 해당 경로와 페이지 파일을 설정합니다

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

2. 동영상 촬영 기능을 구현하려면 동영상 폴더 아래에 새 index.vue 파일을 만듭니다

<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>

페이지에서는 버튼을 통해 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 객체가 반환되며, 이를 서버에 업로드할 수 있습니다.

3. 서버에 동영상 업로드

동영상을 성공적으로 선택하고 동영상 파일 주소를 얻은 후에는 서버에 업로드해야 합니다. uniapp에서는 uni.uploadFile() 메소드를 사용하여 동영상을 업로드할 수 있습니다.

구체적인 단계는 다음과 같습니다.

1. 서버 측에서는 비디오 파일을 수신하기 위한 인터페이스를 작성해야 합니다.
2. 프런트엔드에서 성공적으로 선택된 동영상의 파일 주소를 서버에 업로드하려면 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 객체가 반환됩니다. 결과에 따라 업로드가 성공한 후 로직을 처리할 수 있습니다.

4. 요약

uni.chooseVideo() 메서드를 통해 카메라를 빠르게 설정하여 동영상을 촬영하고 동영상을 서버에 업로드할 수 있습니다. 이런 식으로 우리는 비디오 촬영 기능을 갖춘 애플리케이션을 개발할 수 있습니다. 동시에 uniapp은 크로스 플랫폼 개발에서 다양한 기능을 빠르게 구현하는 데 도움이 되는 일련의 유사한 API를 제공합니다.

위 내용은 유니앱에서 영상을 촬영하기 위해 카메라를 활성화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!