Bagaimana untuk mengaktifkan kamera untuk mengambil video dalam uniapp

Dengan mempopularkan Internet mudah alih dan ketibaan era 5G, video semakin menjadi cara pilihan untuk orang ramai berkongsi dan menyebarkan maklumat. Apabila membangunkan APP yang merangkumi fungsi merakam video, adalah perlu untuk memanggil kamera telefon mudah alih untuk merealisasikan fungsi seperti rakaman video dan memuat naik. Artikel ini akan memperkenalkan cara mengaktifkan kamera dalam uniapp untuk merakam video.

1. uniapp

uniapp ialah rangka kerja pembangunan aplikasi merentas platform berdasarkan rangka kerja Vue.js. Ia boleh membina aplikasi mudah alih berprestasi tinggi, cekap dan berskala dengan cepat pada berbilang platform. uniapp menyediakan tindanan teknologi bersatu Pembangun hanya perlu menulis kod sekali dan menerbitkannya ke berbilang platform, seperti applet iOS, Android dan WeChat.

2. Naikkan kamera untuk merakam video

Untuk menghidupkan kamera untuk merakam video, anda perlu menggunakan kaedah uni.chooseVideo() yang disediakan oleh uniapp. Berikut ialah langkah khusus:

1. Tambah halaman dalam pages.json, dan tetapkan laluan dan fail halaman yang sepadan

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

2. di bawah folder video Cipta fail index.vue baharu untuk melaksanakan fungsi rakaman video

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

Dalam halaman, kami mencetuskan kaedah chooseVideo melalui butang. Dalam kaedah chooseVideo, kami memanggil kaedah uni.chooseVideo() untuk mengaktifkan kamera.

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

Kami dapat melihat bahawa apabila memilih video, anda boleh menetapkan beberapa pilihan, seperti sumber video, sama ada untuk memampatkan video, masa rakaman maksimum, arah kamera, dsb. Antaranya, unit pilihan maxDuration ialah saat. Selepas berjaya memilih video, objek res yang mengandungi alamat fail video dikembalikan, yang boleh kami muat naik ke pelayan.

3. Muat naik video ke pelayan

Selepas berjaya memilih video dan mendapatkan alamat fail video, kami perlu memuat naiknya ke pelayan. Dalam uniapp, anda boleh menggunakan kaedah uni.uploadFile() untuk memuat naik video.

Langkah khusus adalah seperti berikut:

1. Di bahagian pelayan, anda perlu menulis antara muka untuk menerima fail video.
2. Di bahagian hadapan, anda perlu mengubah suai kaedah chooseVideo untuk memuat naik alamat fail video yang berjaya dipilih ke pelayan.

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

Dalam kaedah muat naikFail, anda perlu menentukan alamat pelayan muat naik, laluan fail yang hendak dimuat naik, nama fail semasa memuat naik, dsb. Selepas muat naik berjaya, objek uploadRes yang mengandungi hasil muat naik akan dikembalikan Kami boleh memproses logik selepas muat naik berjaya berdasarkan keputusan.

4. Ringkasan

Melalui kaedah uni.chooseVideo(), kami boleh menyediakan kamera dengan pantas untuk merakam video dan memuat naik video ke pelayan. Dengan cara ini, kami boleh membangunkan aplikasi dengan keupayaan rakaman video. Pada masa yang sama, uniapp menyediakan satu siri API serupa yang boleh membantu kami melaksanakan pelbagai fungsi dengan pantas dalam pembangunan merentas platform.

Atas ialah kandungan terperinci Bagaimana untuk mengaktifkan kamera untuk mengambil video dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!