Uniapp Live-Streaming-Schalter, Kamera umklappen

Uniapp ist ein Open-Source-Framework auf Basis von Vue.js, mit dem Entwickler problemlos Anwendungen auf mehreren Plattformen erstellen und veröffentlichen können. Unter anderem ist die Live-Streaming-Funktion von Uniapp sehr leistungsstark und kann die Anforderungen vieler Live-Streaming-Anwendungen erfüllen. In diesem Artikel besprechen wir, wie man Kamerawechsel- und Flip-Funktionen in Uniapp implementiert.

1. Push-Streaming-Switching-Objektiv

Wenn wir in Uniapp das Push-Streaming-Switching-Objektiv implementieren möchten, müssen wir den Kamerakontext in der Uni-MP-Streaming-Komponente verwenden. Dies ist ein Kontextobjekt, das zur Interaktion mit der Kamera verwendet wird und über das wir auf verschiedene Eigenschaften und Vorgänge der Kamera zugreifen können.

1. Kamerakontext abrufen

Zuerst müssen wir das Kamerakontextobjekt abrufen. Auf der Vue-Seite können wir das Kamerakontextobjekt auf folgende Weise abrufen:

<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');
      // ...
    }
  }
}

Im obigen Code erstellen wir zunächst eine Kamerakomponente auf der Seite und erhalten das Kamerakontextobjekt über das onCameraReady-Ereignis. Im onCameraReady-Ereignis rufen wir die Funktion getCameraContext auf, um das Kamerakontextobjekt abzurufen und es in der Eigenschaft cameraContext in Daten zu speichern.

2. Objektive wechseln

Als nächstes können wir die Objektive über das Kamerakontextobjekt wechseln. Konkret können wir die Methode cameraContext.switchCamera aufrufen, um das Kameraobjektiv zu wechseln. Durch die Übergabe verschiedener Parameter kann diese Methode die vordere und hintere Linse wechseln.

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

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

Im obigen Code ermitteln wir zunächst, ob das Kamerakontextobjekt vorhanden ist. Wenn vorhanden, rufen Sie die Methode switchCamera auf, um die Kamera zu wechseln. In der Rückruffunktion der switchCamera-Methode können wir einige Verarbeitungen basierend auf den Ergebnissen der Operation durchführen.

2. Flip

Neben dem Objektivwechsel können wir auch die Flip-Funktion in Uniapp implementieren. In der Flip-Funktion müssen wir die Cover-View- und Cover-Image-Komponenten in der uni-mp-Komponentenbibliothek verwenden. Die Cover-View-Komponente wird zum Abdecken eines Bereichs auf der Seite verwendet, während die Cover-Image-Komponente zum Anzeigen von Bildern verwendet wird.

1. Umdrehen implementieren

Zuerst müssen wir der Seite eine Cover-View-Komponente hinzufügen und deren Positionsstilattribute auf „absolut“, „links“ und „oben“ auf 0 setzen. Dadurch wird die gesamte Seite abgedeckt und andere Komponenten abgedeckt.

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

Im obigen Code erstellen wir zunächst eine Cover-View-Komponente und setzen ihre Stileigenschaften auf „absolut“, links und oben auf 0 und Breite und Höhe auf 100 %. Dadurch kann die Komponente die gesamte Seite ausfüllen und andere Komponenten abdecken. Anschließend haben wir dieser Komponente eine Coverbildkomponente hinzugefügt, um das Flip-Symbol anzuzeigen.

Als nächstes müssen wir die Flip-Funktion im JS-Code der Seite implementieren. Insbesondere können wir die Methode uni.createSelectorQuery().select in der Flip-Funktion aufrufen, um das BoundingClientRect der Videokomponente zu erhalten, und dann die Mittelpunktkoordinaten des Flips basierend auf den Breiten- und Höhenattributen des Elements berechnen. Dann können wir die Methode uni.createAnimation().rotate3d aufrufen, um ein Animationsobjekt zu erstellen und jede Komponente auf der Seite zusammen umzudrehen.

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

Im obigen Code rufen wir zunächst die Methode uni.createSelectorQuery().select auf, um das BoundingClientRect der Videokomponente abzurufen. Als nächstes berechnen wir die Koordinaten x und y des Mittelpunkts des Flips basierend auf den Breiten- und Höhenattributen des Elements. Anschließend haben wir ein Animationsobjekt erstellt und die Methode „animation.rotate3d()“ aufgerufen, um eine dreidimensionale Flip-Animation zu erstellen. Nachdem die Animation beendet ist, invertieren wir den Wert des showBack-Attributs, um die umgedrehte Seite anzuzeigen.

Kurz gesagt, die Live-Streaming-Komponente von Uniapp ist sehr leistungsfähig. Wir können das Kamerakontextobjekt zum Wechseln der Kameraobjektive verwenden und die Cover-View- und Cover-Image-Komponenten zum Implementieren der Flip-Funktion verwenden. Diese Funktionen ermöglichen es uns, funktionsreiche Live-Streaming-Anwendungen zu entwickeln, die den Benutzern mehr Spaß bereiten.

Das obige ist der detaillierte Inhalt vonUniapp Live-Streaming-Schalter, Kamera umklappen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!