Basculement de la caméra du commutateur de diffusion en direct Uniapp

Uniapp est un framework open source basé sur Vue.js, qui permet aux développeurs de créer et de publier facilement des applications sur plusieurs plateformes. Parmi eux, la fonction de diffusion en direct d'Uniapp est très puissante et peut répondre aux besoins de nombreuses applications de diffusion en direct. Dans cet article, nous verrons comment implémenter les fonctions de commutation de caméra et de retournement dans Uniapp.

1. Objectif de commutation de streaming push

Dans Uniapp, si nous voulons implémenter un objectif de commutation de streaming push, nous devons utiliser le contexte de la caméra dans le composant de streaming uni-mp. Il s'agit d'un objet contextuel utilisé pour interagir avec la caméra, grâce auquel nous pouvons accéder à diverses propriétés et opérations de la caméra.

1. Obtenez le contexte de la caméra

Tout d'abord, nous devons obtenir l'objet de contexte de la caméra. Dans la page vue, nous pouvons obtenir l'objet de contexte de caméra de la manière suivante :

<camera id="camera" @ready="onCameraReady"></camera>

import { getCameraContext } from '@/js_sdk/wechat-weapp-miniprogram/uni-mp-weixin/dist/index.js';

export default {
  data() {
    return {
      cameraContext: null
    }
  },
  methods: {
    onCameraReady(e) {
      this.cameraContext = getCameraContext('#camera');
      // ...
    }
  }
}

Dans le code ci-dessus, nous créons d'abord un composant de caméra dans la page et obtenons l'objet de contexte de caméra via l'événement onCameraReady. Dans l'événement onCameraReady, nous appelons la fonction getCameraContext pour obtenir l'objet de contexte de caméra et l'enregistrer dans la propriété cameraContext dans data.

2. Changer d'objectif

Ensuite, nous pouvons changer d'objectif via l'objet contextuel de la caméra. Plus précisément, nous pouvons appeler la méthode cameraContext.switchCamera pour changer d’objectif de caméra. En passant différents paramètres, cette méthode peut commuter la lentille avant et la lentille arrière.

switchCamera() {
  if (!this.cameraContext) {
    return;
  }

  this.cameraContext.switchCamera({
    success: () => {
      // ...
    },
    fail: err => {
      console.log(err);
    }
  })
}

Dans le code ci-dessus, nous déterminons d'abord si l'objet contextuel de la caméra existe. Si elle existe, appelez la méthode switchCamera pour changer de caméra. Dans la fonction de rappel de la méthode switchCamera, nous pouvons effectuer certains traitements en fonction des résultats de l'opération.

2. Flip

En plus de changer d'objectif, nous pouvons également implémenter la fonction flip dans Uniapp. Dans la fonction flip, nous devons utiliser les composants cover-view et cover-image dans la bibliothèque de composants uni-mp. Le composant cover-view est utilisé pour couvrir une zone de la page, tandis que le composant cover-image est utilisé pour afficher des images.

1. Implémenter le retournement

Tout d'abord, nous devons ajouter un composant de vue de couverture à la page et définir son attribut de style de position sur absolu, gauche et haut sur 0. Cela couvrira la page entière et couvrira d’autres composants.

<cover-view class="flip" @tap="flip">
  <cover-image mode="aspectFill" class="image" src="/static/image/flip.png"></cover-image>
</cover-view>

.flip {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
}

.image {
  width: 40rpx;
  height: 40rpx;
}

Dans le code ci-dessus, nous créons d'abord un composant cover-view et définissons ses propriétés de style sur absolue, gauche et haut sur 0, et largeur et hauteur sur 100 %. Cela permettra au composant de remplir toute la page et de couvrir d'autres composants. Ensuite, nous avons ajouté un composant d'image de couverture à ce composant pour afficher l'icône de retournement.

Ensuite, nous devons implémenter la fonction flip dans le code JS de la page. Plus précisément, nous pouvons appeler la méthode uni.createSelectorQuery().select dans la fonction flip pour obtenir leboundingClientRect du composant vidéo, puis calculer les coordonnées du point central du flip en fonction des attributs de largeur et de hauteur de l'élément. Ensuite, nous pouvons appeler la méthode uni.createAnimation().rotate3d pour créer un objet d'animation et retourner ensemble chaque composant de la page.

flip() {
  const selector = uni.createSelectorQuery().select('#camera');
  selector.boundingClientRect().exec(res => {
    const { width, height } = res[0];
    const x = width / 2;
    const y = height / 2;

    const animation = uni.createAnimation({
      duration: 1000,
      timingFunction: 'ease-out'
    });

    animation.rotate3d(1, 0, 0, 180).step();

    this.animationData = animation.export();
    this.showBack = !this.showBack;
  })
}

Dans le code ci-dessus, nous appelons d'abord la méthode uni.createSelectorQuery().select pour obtenir leboundingClientRect du composant vidéo. Ensuite, nous calculons les coordonnées x et y du point central du retournement en fonction des attributs de largeur et de hauteur de l'élément. Ensuite, nous avons créé un objet d’animation et appelé la méthode animation.rotate3d() pour créer une animation flip tridimensionnelle. Une fois l'animation terminée, nous inversons la valeur de l'attribut showBack pour afficher la page retournée.

En bref, le composant de diffusion en direct d'Uniapp est très puissant. Nous pouvons utiliser l'objet de contexte de caméra pour changer d'objectif de caméra, et utiliser les composants cover-view et cover-image pour implémenter la fonction flip. Ces fonctionnalités nous permettent de développer des applications de diffusion en direct riches en fonctionnalités qui apportent plus de plaisir aux utilisateurs.

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!