ใช้การแสดงตัวอย่าง

เมื่อเพิ่มตัวอย่างลงในแอป ให้ใช้ PreviewView ซึ่งเป็น View ที่สามารถครอบตัด ปรับขนาด และหมุนเพื่อให้แสดงผลได้อย่างเหมาะสม

ตัวอย่างรูปภาพจะสตรีมไปยังพื้นผิวภายใน PreviewView เมื่อกล้องทำงาน

ใช้ PreviewView

การใช้ตัวอย่างสำหรับ CameraX โดยใช้ PreviewView มีขั้นตอนต่อไปนี้ ซึ่งจะอธิบายในส่วนถัดไป

1. กำหนดค่า CameraXConfig.Provider (ไม่บังคับ)
2. เพิ่ม PreviewView ลงในเลย์เอาต์
3. ขอ ProcessCameraProvider
4. เมื่อสร้าง View ให้ตรวจสอบ ProcessCameraProvider
5. เลือกกล้องและเชื่อมโยงวงจรและกรณีการใช้งาน

การใช้ PreviewView มีข้อจำกัดบางประการ เมื่อใช้ PreviewView คุณจะทำสิ่งต่อไปนี้ไม่ได้

• สร้างSurfaceTextureเพื่อตั้งค่าในTextureViewและPreview.SurfaceProvider
• ดึงข้อมูล SurfaceTexture จาก TextureView และตั้งค่าใน Preview.SurfaceProvider
• รับ Surface จาก SurfaceView แล้วตั้งค่าใน Preview.SurfaceProvider

หากเกิดเหตุการณ์ใดเหตุการณ์หนึ่งเหล่านี้ Preview จะหยุดสตรีมเฟรมไปยัง PreviewView

เพิ่ม PreviewView ลงในเลย์เอาต์

ตัวอย่างต่อไปนี้แสดง PreviewView ในเลย์เอาต์

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

ขอ CameraProvider

โค้ดต่อไปนี้แสดงวิธีขอ CameraProvider

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

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

ตรวจสอบความพร้อมใช้งานของ CameraProvider

หลังจากขอ CameraProvider แล้ว ให้ยืนยันว่าการเริ่มต้นสำเร็จเมื่อสร้างมุมมอง โค้ดต่อไปนี้แสดงวิธีดำเนินการดังกล่าว

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

ดูตัวอย่างฟังก์ชัน bindPreview ที่ใช้ในตัวอย่างนี้ได้จากโค้ดที่ระบุไว้ในส่วนถัดไป

เลือกกล้องและเชื่อมโยงวงจรและกรณีการใช้งาน

เมื่อสร้างและยืนยัน CameraProvider แล้ว ให้ทำดังนี้

1. สร้าง Preview
2. ระบุตัวเลือกกล้อง LensFacing ที่ต้องการ
3. เชื่อมโยงกล้องที่เลือกและ Use Case กับวงจร
4. เชื่อมต่อ Preview กับ PreviewView

โค้ดต่อไปนี้แสดงตัวอย่าง

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)
}
Preview.kt

โปรดทราบว่า bindToLifecycle() จะแสดงผลออบเจ็กต์ Camera ดูข้อมูลเพิ่มเติมเกี่ยวกับการควบคุมเอาต์พุตของกล้อง เช่น การซูมและการรับแสงได้ที่เอาต์พุตของกล้อง

ตอนนี้คุณติดตั้งใช้งานตัวอย่างจากกล้องเสร็จแล้ว สร้างแอปและยืนยันว่าตัวอย่างปรากฏในแอปและทำงานตามที่คุณต้องการ

การควบคุมเพิ่มเติมสำหรับ PreviewView

CameraX PreviewView มี API เพิ่มเติมบางรายการเพื่อกำหนดค่าพร็อพเพอร์ตี้ เช่น

• โหมดการติดตั้งใช้งานสำหรับการแสดงผลสตรีมตัวอย่าง
• ประเภทสเกลของรูปภาพตัวอย่าง

โหมดการติดตั้งใช้งาน

PreviewView สามารถใช้โหมดใดโหมดหนึ่งต่อไปนี้เพื่อแสดงผลสตรีมตัวอย่างบน View เป้าหมาย

• PERFORMANCE เป็นโหมดเริ่มต้น PreviewView ใช้ SurfaceView เพื่อแสดงสตรีมวิดีโอ แต่จะเปลี่ยนไปใช้ TextureView ในบางกรณี SurfaceView มีพื้นผิวการวาดโดยเฉพาะ ซึ่งมีโอกาสดีกว่าที่จะใช้การวางซ้อนฮาร์ดแวร์โดยตัวคอมโพสิตฮาร์ดแวร์ภายใน โดยเฉพาะอย่างยิ่งเมื่อไม่มีองค์ประกอบ UI อื่นๆ (เช่น ปุ่ม) อยู่ด้านบนของวิดีโอตัวอย่าง การแสดงผลด้วยการวางซ้อนฮาร์ดแวร์จะทำให้เฟรมวิดีโอหลีกเลี่ยงเส้นทาง GPU ซึ่งช่วยลดการใช้พลังงานและเวลาในการตอบสนองของแพลตฟอร์มได้

• COMPATIBLE ในโหมดนี้ PreviewView จะใช้ TextureView ซึ่งไม่เหมือนกับ SurfaceView ตรงที่ไม่มีพื้นผิวการวาดโดยเฉพาะ ด้วยเหตุนี้ วิดีโอจึงแสดงผลด้วยการผสมเพื่อให้แสดงได้ ในระหว่างขั้นตอนเพิ่มเติมนี้ แอปพลิเคชันจะประมวลผลเพิ่มเติมได้ เช่น ปรับขนาดและหมุนวิดีโอโดยไม่มีข้อจำกัด

ใช้ PreviewView.setImplementationMode() เพื่อเลือกโหมดการติดตั้งใช้งานที่เหมาะกับแอปพลิเคชันของคุณ หากโหมด PERFORMANCE เริ่มต้นไม่เหมาะกับแอปพลิเคชันของคุณ ตัวอย่างโค้ดต่อไปนี้จะแสดงวิธีตั้งค่าโหมด COMPATIBLE

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

ประเภทสเกล

เมื่อความละเอียดของวิดีโอตัวอย่างแตกต่างจากขนาดของเป้าหมายPreviewView เนื้อหาวิดีโอจะต้องปรับให้พอดีกับมุมมองโดยการครอบตัดหรือการทำ Letterbox (คงสัดส่วนภาพต้นฉบับไว้) PreviewView มี ScaleTypes ต่อไปนี้เพื่อวัตถุประสงค์นี้

• FIT_CENTER, FIT_START และ FIT_END สำหรับ Letterbox เนื้อหาวิดีโอแบบเต็มจะปรับขนาด (เพิ่มหรือลด) เป็นขนาดสูงสุดที่แสดงได้ใน PreviewView เป้าหมาย อย่างไรก็ตาม แม้ว่าเฟรมวิดีโอแบบเต็มจะมองเห็นได้ แต่บางส่วนของหน้าจออาจว่างเปล่า เฟรมวิดีโอจะจัดแนวให้อยู่ตรงกลาง จุดเริ่มต้น หรือจุดสิ้นสุดของมุมมองเป้าหมาย ทั้งนี้ขึ้นอยู่กับประเภทการปรับขนาดที่คุณเลือกจาก 3 ประเภทนี้

• FILL_CENTER, FILL_START, FILL_END สำหรับการครอบตัด หากวิดีโอไม่ตรงกับสัดส่วนภาพ PreviewView ระบบจะแสดงเนื้อหาเพียงบางส่วน แต่วิดีโอจะแสดงเต็ม PreviewView

ประเภทสเกลเริ่มต้นที่ CameraX ใช้คือ FILL_CENTER ใช้ PreviewView.setScaleType() เพื่อตั้งค่าประเภทสเกลที่เหมาะสมที่สุดสำหรับแอปพลิเคชันของคุณ ตัวอย่างโค้ดต่อไปนี้จะตั้งค่าประเภทสเกล FIT_CENTER

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

กระบวนการแสดงวิดีโอประกอบด้วยขั้นตอนต่อไปนี้

1. ปรับขนาดวิดีโอ:
   • สำหรับประเภทการปรับขนาด FIT_* ให้ปรับขนาดวิดีโอด้วย min(dst.width/src.width, dst.height/src.height)
   • สำหรับประเภทการปรับขนาด FILL_* ให้ปรับขนาดวิดีโอด้วย max(dst.width/src.width, dst.height/src.height)
2. จัดแนววิดีโอที่ปรับขนาดแล้วให้ตรงกับPreviewViewปลายทาง ดังนี้
   • สำหรับ FIT_CENTER/FILL_CENTER ให้จัดวิดีโอที่ปรับขนาดและPreviewViewปลายทางให้อยู่กึ่งกลาง
   • สำหรับ FIT_START/FILL_START ให้จัดแนววิดีโอที่ปรับขนาดและปลายทาง PreviewView โดยอิงตามมุมซ้ายบนของแต่ละรายการ
   • สำหรับ FIT_END/FILL_END ให้จัดแนววิดีโอที่ปรับขนาดและปลายทางPreviewViewโดยอิงตามมุมขวาล่างของแต่ละรายการ

ตัวอย่างเช่น วิดีโอต้นฉบับขนาด 640x480 และปลายทางขนาด 1920x1080 PreviewView

รูปภาพต่อไปนี้แสดงกระบวนการปรับขนาด FIT_START / FIT_CENTER / FIT_END

กระบวนการทำงานมีลักษณะดังนี้

1. ปรับขนาดเฟรมวิดีโอ (โดยคงสัดส่วนภาพเดิมไว้) ด้วย min(1920/640, 1080/480) = 2.25 เพื่อให้ได้เฟรมวิดีโอระดับกลางขนาด 1440x1080
2. จัดเฟรมวิดีโอขนาด 1440x1080 ให้ตรงกับ 1920x1080 PreviewView
   • สำหรับ FIT_CENTER ให้จัดเฟรมวิดีโอให้อยู่ตรงกลางของหน้าต่าง PreviewView คอลัมน์ 240 พิกเซลเริ่มต้นและสิ้นสุดของ PreviewView ว่างเปล่า
   • สำหรับ FIT_START ให้จัดแนวเฟรมวิดีโอให้ตรงกับจุดเริ่มต้น (มุมซ้ายบน) ของหน้าต่าง PreviewView คอลัมน์ 480 พิกเซลสุดท้ายของ PreviewView ว่างเปล่า
   • สำหรับ FIT_END ให้จัดแนวเฟรมวิดีโอให้ตรงกับด้านท้าย (มุมขวาล่าง) ของหน้าต่าง PreviewView คอลัมน์ 480 พิกเซลแรกของ PreviewView ว่างเปล่า

รูปภาพต่อไปนี้แสดงกระบวนการปรับขนาด FILL_START / FILL_CENTER / FILL_END

กระบวนการทำงานมีลักษณะดังนี้

1. ปรับขนาดเฟรมวิดีโอด้วย max(1920/640, 1080/480) = 3 เพื่อให้ได้เฟรมวิดีโอระดับกลางขนาด 1920x1440 (ซึ่งใหญ่กว่าขนาดของ PreviewView)
2. ครอบตัดเฟรมวิดีโอขนาด 1920x1440 ให้พอดีกับหน้าต่างขนาด 1920x1080 PreviewView
   • สำหรับ FILL_CENTER ให้ครอบตัด 1920x1080 จากตรงกลางของวิดีโอที่ปรับขนาดเป็น 1920x1440 วิดีโอ 180 บรรทัดบนสุดและล่างสุดจะไม่แสดง
   • สำหรับ FILL_START ให้ครอบตัด 1920x1080 จากจุดเริ่มต้นของวิดีโอที่ปรับขนาดเป็น 1920x1440 วิดีโอ 360 บรรทัดด้านล่างจะไม่แสดง
   • สำหรับ FILL_END ให้ครอบตัด 1920x1080 จากตอนท้ายของวิดีโอที่ปรับขนาดเป็น 1920x1440 วิดีโอ 360 บรรทัดบนสุดจะไม่แสดง

แหล่งข้อมูลเพิ่มเติม

ดูข้อมูลเพิ่มเติมเกี่ยวกับ CameraX ได้ที่แหล่งข้อมูลเพิ่มเติมต่อไปนี้

Codelab

เริ่มต้นใช้งาน CameraX

ตัวอย่างโค้ด

แอปตัวอย่าง CameraX