Comment activer la caméra pour prendre une vidéo dans Uniapp

Avec la popularisation de l'Internet mobile et l'arrivée de l'ère 5G, la vidéo devient de plus en plus le moyen privilégié par les gens pour partager et diffuser des informations. Lors du développement d'une application incluant la fonction de tournage de vidéos, il est nécessaire d'appeler la caméra du téléphone mobile pour réaliser des fonctions telles que la prise de vue et le téléchargement de vidéos. Cet article explique comment activer la caméra dans Uniapp pour filmer des vidéos.

1. uniapp

uniapp est un framework de développement d'applications multiplateforme basé sur le framework Vue.js. Il peut créer rapidement des applications mobiles hautes performances, efficaces et évolutives sur plusieurs plates-formes. uniapp fournit une pile technologique unifiée. Les développeurs n'ont besoin d'écrire du code qu'une seule fois et de le publier sur plusieurs plates-formes, telles que les applets iOS, Android et WeChat.

2. Allumez la caméra pour filmer une vidéo

Pour allumer la caméra et filmer une vidéo, vous devez utiliser la méthode uni.chooseVideo() fournie par uniapp. Voici les étapes spécifiques :

1. Ajoutez une page dans pages.json et définissez le chemin et le fichier de page correspondants

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

2. Créez un nouveau fichier index.vue sous le dossier vidéo pour implémenter la fonction de prise de vue vidéo

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

Dans la page, on déclenche la méthode ChooseVideo via un bouton. Dans la méthode ChooseVideo, nous appelons la méthode uni.chooseVideo() pour activer la caméra.

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

Nous pouvons voir que lors de la sélection d'une vidéo, vous pouvez définir certaines options, telles que la source vidéo, la compression ou non de la vidéo, la durée maximale de prise de vue, la direction de la caméra, etc. Parmi eux, l’unité de l’option maxDuration est la seconde. Après avoir sélectionné avec succès une vidéo, un objet res contenant l'adresse du fichier vidéo est renvoyé, que nous pouvons télécharger sur le serveur.

3. Téléchargez la vidéo sur le serveur

Après avoir sélectionné avec succès la vidéo et obtenu l'adresse du fichier vidéo, nous devons la télécharger sur le serveur. Dans uniapp, vous pouvez utiliser la méthode uni.uploadFile() pour télécharger des vidéos.

Les étapes spécifiques sont les suivantes :

1. Côté serveur, vous devez écrire une interface pour recevoir les fichiers vidéo.
2. Sur le front-end, vous devez modifier la méthode ChooseVideo pour télécharger l'adresse du fichier de la vidéo sélectionnée avec succès sur le serveur.

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

Dans la méthode uploadFile, vous devez spécifier l'adresse du serveur de téléchargement, le chemin du fichier à télécharger, le nom du fichier lors du téléchargement, etc. Une fois le téléchargement réussi, un objet uploadRes contenant le résultat du téléchargement sera renvoyé. Nous pouvons traiter la logique une fois le téléchargement réussi en fonction du résultat.

4. Résumé

Grâce à la méthode uni.chooseVideo(), nous pouvons rapidement configurer la caméra pour filmer une vidéo et télécharger la vidéo sur le serveur. De cette façon, nous pouvons développer une application avec une fonctionnalité de prise de vue vidéo. Dans le même temps, uniapp fournit une série d'API similaires qui peuvent nous aider à implémenter rapidement diverses fonctions dans le développement multiplateforme.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!