Vorschau implementieren

Wenn Sie Ihrer App eine Vorschau hinzufügen, verwenden Sie PreviewView, View, die für die richtige Darstellung zugeschnitten, skaliert und gedreht werden können.

Die Bildvorschau wird an eine Oberfläche in PreviewView gestreamt, wenn das Objekt wird aktiviert.

PreviewView verwenden

Die Implementierung einer Vorschau für CameraX mit PreviewView erfordert Folgendes: die in späteren Abschnitten behandelt werden:

1. Konfigurieren Sie optional ein CameraXConfig.Provider
2. Fügen Sie Ihrem Layout ein PreviewView hinzu.
3. Anfordern ProcessCameraProvider
4. Suchen Sie bei der Erstellung von View nach ProcessCameraProvider.
5. Wählen Sie eine Kamera aus und binden Sie den Lebenszyklus und die Anwendungsfälle ein.

Die Verwendung von PreviewView unterliegt einigen Einschränkungen. Wenn Sie PreviewView verwenden, können Sie eine der folgenden Aktionen ausführen:

• Erstellen Sie eine SurfaceTexture für TextureView und Preview.SurfaceProvider
• SurfaceTexture von TextureView abrufen und festlegen auf Preview.SurfaceProvider
• Surface von SurfaceView abrufen und einrichten auf Preview.SurfaceProvider

In diesem Fall beendet Preview das Streaming von Frames an die PreviewView.

PreviewView zum Layout hinzufügen

Das folgende Beispiel zeigt eine PreviewView in einem Layout:

<FrameLayout
    android:id="@+id/container">
        <androidx.camera.view.PreviewView
            android:id="@+id/previewView" />
</FrameLayout>

Kameraanbieter anfordern

Der folgende Code zeigt, wie ein CameraProvider angefordert wird:

import androidx.camera.lifecycle.ProcessCameraProvider
import com.google.common.util.concurrent.ListenableFuture

class MainActivity : AppCompatActivity() {
    private lateinit var cameraProviderFuture : ListenableFuture<ProcessCameraProvider>
    override fun onCreate(savedInstanceState: Bundle?) {
        cameraProviderFuture = ProcessCameraProvider.getInstance(this)
    }
}

import androidx.camera.lifecycle.ProcessCameraProvider
import com.google.common.util.concurrent.ListenableFuture

public class MainActivity extends AppCompatActivity {
    private ListenableFuture<ProcessCameraProvider> cameraProviderFuture;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        cameraProviderFuture = ProcessCameraProvider.getInstance(this);
    }
}

Kameraanbieter-Verfügbarkeit prüfen

Prüfen Sie nach dem Anfordern von CameraProvider, ob die Initialisierung erfolgreich war. wenn die Ansicht erstellt wird. Der folgende Code zeigt, wie dies funktioniert:

cameraProviderFuture.addListener(Runnable {
    val cameraProvider = cameraProviderFuture.get()
    bindPreview(cameraProvider)
}, ContextCompat.getMainExecutor(this))

cameraProviderFuture.addListener(() -> {
    try {
        ProcessCameraProvider cameraProvider = cameraProviderFuture.get();
        bindPreview(cameraProvider);
    } catch (ExecutionException | InterruptedException e) {
        // No errors need to be handled for this Future.
        // This should never be reached.
    }
}, ContextCompat.getMainExecutor(this));

Ein Beispiel für die in diesem Beispiel verwendete bindPreview-Funktion finden Sie im Code. die im nächsten Abschnitt beschrieben werden.

Kamera auswählen und Lebenszyklus und Anwendungsfälle verknüpfen

Nachdem Sie das CameraProvider erstellt und bestätigt haben, gehen Sie so vor:

1. Erstellen Sie ein Preview.
2. Gib die gewünschte LensFacing-Kameraoption an.
3. Binden Sie die ausgewählte Kamera und alle Anwendungsfälle an den Lebenszyklus.
4. Verbinden Sie Preview mit PreviewView.

Der folgende Code zeigt ein Beispiel:

fun bindPreview(cameraProvider : ProcessCameraProvider) {
    var preview : Preview = Preview.Builder()
            .build()

    var cameraSelector : CameraSelector = CameraSelector.Builder()
          .requireLensFacing(CameraSelector.LENS_FACING_BACK)
          .build()

    preview.setSurfaceProvider(previewView.getSurfaceProvider())

    var camera = cameraProvider.bindToLifecycle(this as LifecycleOwner, cameraSelector, preview)
}

void bindPreview(@NonNull ProcessCameraProvider cameraProvider) {
    Preview preview = new Preview.Builder()
            .build();

    CameraSelector cameraSelector = new CameraSelector.Builder()
            .requireLensFacing(CameraSelector.LENS_FACING_BACK)
            .build();

    preview.setSurfaceProvider(previewView.getSurfaceProvider());

    Camera camera = cameraProvider.bindToLifecycle((LifecycleOwner)this, cameraSelector, preview);
}

bindToLifecycle() gibt ein Camera-Objekt zurück. -Objekt enthält. Weitere Informationen zur Steuerung der Kameraausgabe, wie Zoom und erhalten Sie unter Kameraausgabe.

Die Implementierung der Kameravorschau ist nun abgeschlossen. App erstellen und bestätigen dass die Vorschau in der App angezeigt wird und wie vorgesehen funktioniert.

Zusätzliche Steuerelemente für PreviewView

Die PreviewView von CameraX bietet einige zusätzliche APIs zum Konfigurieren von Eigenschaften wie als:

• Den Implementierungsmodus zum Rendern von Vorschaustreams verwenden.
• Der Skalierungstyp des Vorschaubilds.

Implementierungsmodus

PreviewView kann einen der folgenden Modi verwenden, um einen Vorschaustream zu rendern den Ziel-View:

• PERFORMANCE ist der Standardmodus. PreviewView verwendet eine SurfaceView, um das Video abzuspielen des Streams, wobei jedoch auf eine TextureView zurückgegriffen wird, in bestimmten Fällen. SurfaceView hat eine spezielle Zeichenfläche, auf der die Wahrscheinlichkeit, Implementierung mit einem Hardware-Overlay durch den internen Hardware-Kompositor, insbesondere wenn keine anderen UI-Elemente vorhanden sind wie Schaltflächen. Beim Rendern mit einer Hardware Overlay, Videoframes vermeiden einen GPU-Pfad, was die Plattformleistung reduzieren kann. Verbrauch und Latenz.

• COMPATIBLE . In diesem Modus verwendet PreviewView ein TextureView, das im Gegensatz zu SurfaceView hat keine spezielle Zeichenfläche. Aus diesem Grund wird durch Überlagerung gerendert, damit es dargestellt werden kann. Bei diesem zusätzlichen Schritt Anwendungen können zusätzliche Verarbeitungsschritte wie Skalierung und Rotation ausführen. uneingeschränkte Videos ansehen.

PreviewView.setImplementationMode() verwenden um den für Ihre Anwendung geeigneten Implementierungsmodus auszuwählen. Wenn die Standardeinstellung Der Modus PERFORMANCE ist für Ihre Anwendung nicht geeignet. Der folgende Code Im Beispiel wird gezeigt, wie der COMPATIBLE-Modus festgelegt wird:

// viewFinder is a PreviewView instance
viewFinder.implementationMode = PreviewView.ImplementationMode.COMPATIBLE

Skalierungstyp

Wenn die Auflösung des Vorschauvideos von den Abmessungen des Ziels abweicht PreviewView muss der Videocontent an die Ansicht angepasst werden, entweder durch Zuschneiden oder Letterbox-Bild (beibehalten des ursprünglichen Seitenverhältnisses) PreviewView stellt die Follower von ScaleTypes für diesen Zweck verwenden:

• FIT_CENTER, FIT_START und FIT_END für Letterbox-Bild. Der gesamte Video-Content wird nach oben oder unten skaliert, Maximal mögliche Größe, die im Ziel-PreviewView angezeigt werden kann. Obwohl der gesamte Videoframe sichtbar ist, ist ein Teil des Bildschirms ist möglicherweise leer. Je nachdem, welchen dieser drei Skalierungstypen Sie wählen, wird der Videoframe an der Mitte, am Anfang oder am Ende der Zielansicht ausgerichtet.

• FILL_CENTER, FILL_START FILL_END für zuschneiden. Wenn ein Video nicht mit dem Seitenverhältnis von PreviewView übereinstimmt, wird nur ein Teil des Inhalts ist sichtbar, das Video füllt jedoch die gesamte PreviewView aus.

KameraX verwendet standardmäßig den Skalierungstyp FILL_CENTER. PreviewView.setScaleType() verwenden um den für Ihre Anwendung am besten geeigneten Skalierungstyp festzulegen. Der folgende Code Beispiel legt den Skalierungstyp FIT_CENTER fest:

// viewFinder is a PreviewView instance
viewFinder.scaleType = PreviewView.ScaleType.FIT_CENTER

Zur Wiedergabe eines Videos sind folgende Schritte erforderlich:

1. Video skalieren: <ph type="x-smartling-placeholder">
   </ph>
   • Bei Skalierungstypen FIT_* wird das Video mit min(dst.width/src.width, dst.height/src.height) skaliert.
   • Bei Skalierungstypen FILL_* wird das Video mit max(dst.width/src.width, dst.height/src.height) skaliert.
2. Richten Sie das skalierte Video am Ziel-PreviewView aus: <ph type="x-smartling-placeholder">
   </ph>
   • Richten Sie bei FIT_CENTER/FILL_CENTER das skalierte Video und das Ziel PreviewView zentriert aus.
   • Richten Sie bei FIT_START/FILL_START das skalierte Video und das Ziel aus. PreviewView bezogen auf die linke obere Ecke der jeweiligen Website.
   • Richten Sie bei FIT_END/FILL_END das skalierte Video und das Ziel aus. PreviewView in Bezug auf die untere rechte Ecke der einzelnen Elemente.

Hier sehen Sie beispielsweise ein Quellvideo der Größe 640 x 480 und ein Ziel von 1920 x 1080. PreviewView:

Die folgende Abbildung zeigt FIT_START / FIT_CENTER / FIT_END Skalierungsprozess:

Der Vorgang läuft so ab:

1. Skalieren Sie den Videoframe unter Beibehaltung des ursprünglichen Seitenverhältnisses mit min(1920/640, 1080/480) = 2.25, um einen Video-Zwischenframe von 1440 x 1080 zu erhalten.
2. Richte den Videoframe mit 1440 × 1080 am PreviewView (1920 × 1080) aus.
   • Richten Sie bei FIT_CENTER den Videoframe an der Mitte des PreviewView-Fenster. Die Start- und Endspalte der 240 Pixel der PreviewView sind leer.
   • Richten Sie bei FIT_START den Videoframe am Start (oben links) aus. des PreviewView-Fensters. Die letzten 480 Pixel in der Spalte PreviewView sind leer.
   • Richten Sie bei FIT_END den Videoframe am Ende aus (rechts unten). des PreviewView-Fensters. Die ersten 480 Pixel-Spalten der PreviewView sind leer.

Die folgende Abbildung zeigt FILL_START / FILL_CENTER / FILL_END Skalierungsprozess:

Der Vorgang läuft so ab:

1. Skalieren Sie den Videoframe mit max(1920/640, 1080/480) = 3, um ein Video-Zwischenframe von 1920 x 1440 (größer als der PreviewView).
2. Schneiden Sie den Videoframe von 1920 × 1440 so zu, dass er in das PreviewView-Fenster mit der Größe 1920 × 1080 passt.
   • FILL_CENTER von der Mitte von 1920 × 1440 auf 1920 × 1080 zuschneiden skalierte Video. Die oberen und unteren 180 Videozeilen sind nicht sichtbar.
   • Für FILL_START 1920 × 1080 vom Anfang von 1920 × 1440 aus zuschneiden Video. Die unteren 360 Videozeilen sind nicht sichtbar.
   • Für FILL_END 1920 × 1080 vom Ende des skalierten Bereichs von 1920 × 1440 aus zuschneiden Video. Die oberen 360 Zeilen des Videos sind nicht sichtbar.

Weitere Informationen

Weitere Informationen zu CameraX finden Sie in den folgenden zusätzlichen Ressourcen.

Codelab

Codebeispiel