Bài 7 : Camera trong React native (Expo)

Hi, các em!

Rất vui được gặp lại các em trong bài kế tiếp của series React Native cơ bản. Trong bài ngày hôm nay chúng ta sẽ tiếp tục với 1 Component mới trong React native là Camera. OK. Let’s go !!!.

Trong React Native , Camera là 1 component có tác dụng preview hay nói cách khác là trình chiếu lại hình ảnh thu được từ Camera trước hoặc sau.
Camera này hỗ trợ các tính năng cơ bản như : chụp hình, quay video, phóng to, thu nhỏ (zoom), cân bằng trắng (white balance), đèn flash. Ngoài ra Camera cũng hỗ trợ nhận diện khuôn mặt và quét bar code

Lưu ý : Trong ứng dụng chỉ có thể sử dụng 1 Camera Preview trong 1 thời điểm. vì vậy muốn sử dụng Camera Preview ở màn hình khác chúng ta cần hủy or tắt Camera Preview sau đó khởi tạo lại
Android : Camera Preview mặc định sử dụng Camera API. (là version cũ cho Camera) . Tuy nhiên, nếu muốn chúng ta có thể sử dụng Camera2 API. thông qua tùy chọn useCamera2Api. = true
Các em có thể tham khảo Camera API và Camera2 API tại đây

Lưu ý : giống như mọi nền tảng thuần (native) Android hoặc iOS. chúng ta cần xin quyền để có thể sử dụng . Permissions.CAMERA hoặc Permissions.AUDIO_RECORDING

Chúng ta hãy bắt đầu với ví dụ đơn giản sau :

Trong ví dụ, chúng ta lưu ý những dòng code chính sau :

11 – 13 : Câu lệnh xin quyền mở Camera. Khi mở ứng dụng lần đầu tiên chương trình sẽ hỏi như hình
từ khóa asyncawait để khai báo 1 hàm bất đồng bộ. Trong tình huống này ta giải thích câu lệnh như sau : từ khóa await sẽ tạm dừng xử lý trong hàm và đợi kết quả từ câu lệnh askAsync cho tới khi có kết quả trả về thì tiếp tục chạy các câu lệnh còn lại trong hàm

Dòng 25 : Khai báo thẻ Camera . <Camera> </Camera> . Lưu ý : thẻ Camera bắt buộc phải có props là type để chương trình biết chúng ta đang sử dụng Camera trước hay sau

Các props (thuộc tính) tùy chỉnh cho Camera

  • flashMode

props dùng để bật và tắt đèn flash (on hoặc off, auto, torch).

  • autoFocus

props dùng để bật tắt chế độ auto Focus – Tự động lấy nét

  • whiteBalance

cân bằng trắng, dùng để chọn chế độ màu cho Camera, các tùy chọn : autosunnycloudyshadowfluorescentincandescent

  • zoom

Giá trị phóng to hoặc thu nhỏ của Camera (float) từ -1 -> 1. 0 là giá trị mặc định

  • onBarCodeScanned

Hàm Callback để lắng nghe giá trị bar code mà camera quét được . Các em có thể xem chi tiết tại đây. Thầy sẽ đề cập chi tiết trong 1 bài khác

  • onFacesDetected

Hàm Callback để lắng nghe sự kiện quét khuôn mặt 😀

<Camera type = {Camera.Constants.Type.back} 
flashMode = {Camera.Constants.FlashMode.auto} 
whiteBalance = {Camera.Constants.WhiteBalance.auto}
zoom = 0 
onBarCodeScanned={({ type, data }) => {
            alert(`Bar code with type ${type} and data ${data} has been scanned!`);
          }}
>
</Camera>

Như vậy, chúng ta đã điểm qua 1 số props cơ bản của Camera trong React Native. Trong bài nếu có gì thắc mắc các em commnet tại đây. Thầy sẽ hỗ trợ nhé. Thanks All! Hẹn gặp lại các em trong bài học tới về AsyncStorage trong React Native