Selak kamera suis penstriman langsung Uniapp

Uniapp ialah rangka kerja sumber terbuka berdasarkan Vue.js, yang membolehkan pembangun membina dan menerbitkan aplikasi dengan mudah pada berbilang platform. Antaranya, fungsi penstriman langsung Uniapp sangat berkuasa dan boleh memenuhi keperluan banyak aplikasi penstriman langsung. Dalam artikel ini, kami akan membincangkan cara melaksanakan fungsi menukar kamera dan flip dalam Uniapp.

1. Push switching lens

Dalam Uniapp, jika kita ingin melaksanakan push switching lens, kita perlu menggunakan konteks kamera dalam komponen push uni-mp. Ini ialah objek konteks yang digunakan untuk berinteraksi dengan kamera, yang melaluinya kita boleh mengakses pelbagai sifat dan operasi kamera.

1 Dapatkan konteks kamera

Pertama, kita perlu mendapatkan objek konteks kamera. Dalam halaman vue, kami boleh mendapatkan objek konteks kamera dengan cara berikut:

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

Dalam kod di atas, kami mula-mula mencipta komponen kamera dalam halaman dan mendapatkan objek konteks kamera melalui acara onCameraReady. Dalam acara onCameraReady, kami memanggil fungsi getCameraContext untuk mendapatkan objek konteks kamera dan menyimpannya dalam sifat cameraContext dalam data.

2. Tukar kanta

Seterusnya, kita boleh menukar kanta melalui objek konteks kamera. Secara khusus, kita boleh memanggil kaedah cameraContext.switchCamera untuk menukar kanta kamera. Dengan melepasi parameter yang berbeza, kaedah ini boleh menukar kanta hadapan dan kanta belakang.

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

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

Dalam kod di atas, kami mula-mula menentukan sama ada objek konteks kamera wujud. Jika wujud, hubungi kaedah suisKamera untuk menukar kamera. Dalam fungsi panggil balik kaedah suisKamera, kita boleh melakukan beberapa pemprosesan berdasarkan hasil operasi.

2. Flip

Selain menukar kanta, kami juga boleh melaksanakan fungsi flip dalam Uniapp. Dalam fungsi flip, kita perlu menggunakan komponen paparan penutup dan imej penutup dalam perpustakaan komponen uni-mp. Komponen paparan kulit digunakan untuk menutup kawasan pada halaman, manakala komponen imej penutup digunakan untuk memaparkan imej.

1. Laksanakan flip

Mula-mula, kita perlu menambah komponen paparan muka depan pada halaman dan menetapkan atribut gaya kedudukannya kepada mutlak, kiri dan atas kepada 0. Ini akan meliputi keseluruhan halaman dan meliputi komponen lain.

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

Dalam kod di atas, kami mula-mula mencipta komponen paparan penutup dan menetapkan sifat gayanya kepada mutlak, kiri dan atas kepada 0, serta lebar dan tinggi kepada 100%. Ini akan membolehkan komponen mengisi keseluruhan halaman dan meliputi komponen lain. Kemudian, kami menambah komponen imej penutup pada komponen ini untuk memaparkan ikon flip.

Seterusnya, kita perlu melaksanakan fungsi flip dalam kod JS halaman. Secara khusus, kita boleh memanggil kaedah uni.createSelectorQuery().select dalam fungsi flip untuk mendapatkan boundingClientRect komponen video, dan kemudian mengira koordinat titik tengah flip berdasarkan atribut lebar dan ketinggian elemen. Kemudian, kita boleh memanggil kaedah uni.createAnimation().rotate3d untuk mencipta objek animasi dan menyelak setiap komponen dalam halaman bersama-sama.

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

Dalam kod di atas, kami mula-mula memanggil kaedah uni.createSelectorQuery().select untuk mendapatkan boundingClientRect komponen video. Seterusnya, kami mengira koordinat x dan y bagi titik tengah flip berdasarkan atribut lebar dan ketinggian elemen. Kemudian, kami mencipta objek animasi dan memanggil kaedah animation.rotate3d() untuk mencipta animasi flip tiga dimensi. Selepas animasi tamat, kami terbalikkan nilai atribut showBack untuk memaparkan halaman terbalik.

Ringkasnya, komponen penstriman langsung Uniapp sangat berkuasa Kami boleh menggunakan objek konteks kamera untuk menukar kanta kamera dan menggunakan komponen paparan penutup dan imej penutup untuk melaksanakan fungsi flip. Ciri ini membolehkan kami membangunkan aplikasi penstriman langsung yang kaya dengan ciri yang membawa lebih keseronokan kepada pengguna.

Atas ialah kandungan terperinci Selak kamera suis penstriman langsung Uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!