Logo Zephyrnet

Trí thông minh dữ liệu tạo

AR / VR

Xây dựng ứng dụng phát trực tuyến với bộ lọc khuôn mặt trên Android

Được xuất bản lại bởi Plato
Được xuất bản lại bởi Plato

Ngày:

Lượt xem: 1698
Thiệu Thành Dương
  1. Hiểu biết từ cơ bản đến trung cấp về Java và Android SDK
  2. Tài khoản Agora.io
  3. Ứng dụng demo Banuba Face AR
  4. Android Studio và 2 thiết bị Android

Hướng dẫn này sẽ trình bày các bước để xây dựng ứng dụng phát trực tiếp trên Android bằng Agora SDK. Đây là danh sách các tính năng cốt lõi sẽ có trong ứng dụng của chúng tôi:

  • Người dùng có thể thiết lập phòng ảo để tổ chức các buổi phát trực tiếp và trở thành người truyền phát.
  • Người dùng có thể tìm thấy tất cả các buổi phát trực tiếp và tham gia phòng ảo với tư cách khán giả.
  • Người phát trực tiếp có thể sử dụng tính năng lọc khuôn mặt để phát trực tiếp bằng mặt nạ ảo hoặc hoạt ảnh.
  • Người truyền phát có thể thay đổi giọng nói của mình thông qua công cụ thay đổi giọng nói.
  • Khán giả trong một ảo phòng có thể gửi tin nhắn văn bản mà mọi người trong phòng đó đều có thể nhìn thấy.
  • Người dùng có thể tìm kiếm những người dùng khác theo tên của họ và gửi tin nhắn văn bản riêng tư cho họ.

Việc xây dựng ứng dụng của chúng tôi dựa trên nó sẽ dễ dàng hơn Ứng dụng demo Banuba FaceAR. Gói chứa mặc định Ứng dụng demo Banuba SDK chứng minh Thiếu tá Banuba Tính năng SDK và ứng dụng ví dụ làm đẹp với tính năng tô màu mạng lưới thần kinh. Chúng tôi sẽ tập trung vào Ứng dụng demo Banuba SDK cho dự án của chúng tôi. Hãy thoải mái khám phá ứng dụng ví dụ làm đẹp tự mình.

https://docs.banuba.com/docs/android/android_demo_app_ui

1. Làm cách nào để sử dụng các bộ lọc AR tinh tế để tồn tại trong các cuộc họp Zoom của bạn?

2. Màn hình ảo không có tai nghe đầu tiên

3. Thực tế mở rộng (AR) là tương lai của Menu Restaurant?

4. Tạo sản phẩm MR từ xa

Để tích hợp Agora SDK vào dự án của bạn, bạn cần thêm các dòng sau vào /app/build.gradle tập tin của dự án.

// Agora RTC SDK cho cuộc gọi điện video
thực hiện 'io.agora.rtc:full-sdk:3.0.1.1'// Agora RTM SDK dành cho nhắn tin trò chuyện
thực hiện 'io.agora.rtm:rtm-sdk:1.2.2'//Agora UIKit
thực hiện 'io.agora.uikit:agorauikit:2.0.1'

Thêm quyền dự án

Điều tiếp theo chúng ta cần làm là thêm quyền của dự án vào /app/src/main/AndroidManifest.xml tập tin để truy cập thiết bị theo nhu cầu của bạn:

<bảng kê khai xmlns:android="http://schemas.android.com/apk/res/android"
hữu ích. Cảm ơn !>
<quyền sử dụng android:name="android.permission.READ_PHONE_STATE" />
<quyền sử dụng android:name="android.permission.INTERNET" />
<quyền sử dụng android:name="android.permission.RECORD_AUDIO" />
<quyền sử dụng android:name="android.permission.CAMERA" />
<quyền sử dụng android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<quyền sử dụng android:name="android.permission.ACCESS_NETWORK_STATE" /> 

<quyền sử dụng android:name="android.permission.BLUETOOTH" />
<quyền sử dụng android:name="android.permission.ACCESS_WIFI_STATE" />
<quyền sử dụng android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
hữu ích. Cảm ơn !
</biểu hiện>

Vì ứng dụng của chúng tôi cho phép người dùng tìm kiếm và trò chuyện với những người dùng khác trong ứng dụng nên chúng tôi cần sử dụng Cơ sở dữ liệu thời gian thực Firebase để lưu thông tin tài khoản của người dùng. Dưới đây là các bước bạn cần để kết nối ứng dụng của mình với Cơ sở dữ liệu thời gian thực Firebase:

Đầu tiên, hãy xây dựng ứng dụng của chúng ta từ trang đầu tiên. Giống như hầu hết các ứng dụng phát trực tuyến, ứng dụng của chúng tôi cần có trang đăng nhập của người dùng. Và nó sẽ trông như thế này:

khoảng trống công cộng onLoginNextClick(Xem chế độ xem) {
EditText userNameEditText = findViewById(R.id.et_login_user_name);
Chuỗi tên người dùng = userNameEditText.getText().toString();
if(Tên người dùng == vô giá trị || userName.equals("")) {
Bánh mì nướng.tạo văn bản(điều này, "tên ngươi dung không được để trông", Nướng.LENGTH_SHORT).trình diễn();
}khác {
Ý định có ý định = mới Ý định(điều này, Hoạt động tại nhà.tốt nghiệp lớp XNUMX);
ý định.putExtra("tên tài khoản", tên tài khoản);
startActivity (ý định);
}
}

Trong tạp chí Trang chủHoạt động, chúng ta sẽ tạo một trang ba trang thanh điều hướng phía dưới với một miếng được kết nối với mỗi trang. Nếu người dùng chạm vào menu điều hướng phía dưới đầu tiên, anh ta sẽ được dẫn đến LIVE miếng. Tương tự, menu thứ hai sẽ hướng người dùng đến Trò chuyện mảnh vỡ và mảnh cuối cùng là Nền tảng khác miếng.

@Ghi đè
khoảng trống được bảo vệ onCreate(Gói đã lưuInstanceState) {
siêu.onCreate(savedInstanceState);
setContentView(R.layout.hoạt động_home);
tên tài khoản = getIntent().getStringExtra("tên tài khoản");
saveUserOnFireDatabase(tên tài khoản);
}
khoảng trống riêng tư saveUserOnFireDatabase(String userName) {
mRef = Cơ sở dữ liệu Firebase.nhận được().getReference("Người dùng");
mRef.xô();
mRef.child(userName).setValue(mới DBUser(tên người dùng, sai));
}

Mảnh sống

Đoạn Trực tiếp nhằm hiển thị tất cả tên của người phát trực tiếp và cho phép người dùng khác tham gia phòng ảo của người phát trực tiếp bằng cách nhấp vào nút.

childEventListener = mới ChildEventListener() {
@Ghi đè
khoảng trống công cộng onChildAdded(@NonNull DataSnapshot dataSnapshot, @Nullable String s) {
Kết quả DBUser = dataSnapshot.getValue(DBUser.tốt nghiệp lớp XNUMX);
if (!result.getName().equals(tên tài khoản) && result.getStreaming() == đúng) {
danh sách phát trực tiếp.add(kết quả);
}
}
hữu ích. Cảm ơn !
};
mRef.orderByChild("Tên").addChildEventListener(childEventListener);
khoảng trống riêng tư joinStream(Chuỗi tên người truyền phát) {
Ý định có ý định = mới Ý định(getActivity(), AudienceActivity.tốt nghiệp lớp XNUMX);
ý định.putExtra("tên người phát trực tuyến", tên người truyền phát);
ý định.putExtra("tên tài khoản", tên tài khoản);
startActivity (ý định);
}
@Ghi đè
khoảng trống công cộng onClick(Xem v) {
Ý định có ý định = mới Ý định(getActivity(), MainActivity.tốt nghiệp lớp XNUMX);
ý định.putExtra("tên tài khoản", tên tài khoản);
startActivity (ý định);
}

Đoạn trò chuyện

Sản phẩm Trò chuyện đoạn là nơi để người dùng tìm kiếm những người dùng khác và gửi tin nhắn văn bản riêng tư cho họ. Vì vậy, bạn sẽ xây dựng giao diện người dùng của mình như thế này:

Hãy mở Hoạt động chủ yêu lớp học. Từ các bước trước, chúng tôi biết hoạt động này là để thêm các tính năng lọc khuôn mặt trên chế độ xem camera cục bộ. Công việc của chúng tôi ở đây là gửi các chế độ xem camera cục bộ này với các bộ lọc khuôn mặt cho người dùng từ xa.

Khởi tạo RtcEngine và tham gia kênh

Bên trong onTạo gọi lại, lấy tên người dùng được chuyển từ hoạt động chính và khởi tạo Agora RtcEngine.

tên tài khoản = getIntent().getStringExtra("tên tài khoản");
thử {
mRtcEngine = RtcEngine.tạo(getBaseContext(), getString(ID ứng dụng), mRtcTrình xử lý sự kiện);
} bắt (Ngoại lệ e) {
Đăng nhập.e(TAG, Nhật ký.getStackTraceString(e));
ném mới Ngoại lệ thời gian chạy("CẦN kiểm tra rtc sdk init lỗi nghiêm trọng" + Nhật ký.getStackTraceString(e));
}
mRtcEngine.enableVideo();
  1. Nhấn vào Quản lý dự án tab trên bảng điều hướng bên trái.
  2. Nhấp vào “Tạo” và làm theo hướng dẫn trên màn hình để đặt tên dự án, chọn cơ chế xác thực và nhấp vào “Gửi”.
  3. Trên trang Quản lý dự án, tìm ID ứng dụng của dự án của bạn.
mRtcEngine.setExternalVideoSource(đúng, sai, đúng);
mRtcEngine.joinChannel(mã thông báo, Tên kênh, "Thông tin thêm", 0);

Đẩy khung video bên ngoài

Chúng tôi đã cho Agora RtcEngine biết rằng chúng tôi sẽ sử dụng nguồn video bên ngoài làm đầu vào video. Tuy nhiên, chúng tôi vẫn chưa cung cấp khung hình video.

mSdkManager.startForwardingFrames();
@Ghi đè
khoảng trống công cộng onFrameRendered(@NonNull Dữ liệu dữ liệu, int chiều rộng, int chiều cao) {
byte[] mảng = byte mới[dữ liệu.dữ liệu.còn lại()];
dữ liệu.dữ liệu.get(arr);
AgoraVideoFrame agoraVideoFrame = mới AgoraVideoFrame();
agoraVideoFrame.buf = mảng;
agoraVideoFrame.stride = chiều rộng;
agoraVideoFrame.cao = chiều cao;
agoraVideoFrame.định dạng = AgoraVideoFrame.FORMAT_RGBA;
agoraVideoFrame.dấu thời gian = Hệ thống.hiện tạiThời gianMillis();
mRtcEngine.pushExternalVideoFrame(agoraVideoFrame);
data.close();
}

Thêm Trình thay đổi giọng nói

Để trải nghiệm phát trực tuyến thú vị hơn, chúng ta có thể thêm tính năng thay đổi giọng nói trong ứng dụng. Tạo một nút trong Hoạt động chủ yêu và đặt phương thức onClick cho điều đó. Khi người dùng nhấp vào đó, chúng tôi sẽ gọi setLocalVoiceChanger để đặt bộ thay đổi giọng nói.

khoảng trống công cộng onVoiceChangerClick(Xem chế độ xem) {
mRtcEngine.setLocalVoiceChanger(VOICE_CHANGER_BABYGIRL);
Bánh mì nướng.tạo văn bản(điều này, "Bộ thay đổi giọng nói BẬT", Nướng.LENGTH_SHORT).trình diễn();
}

Thiết lập chế độ xem đối tượng dễ dàng hơn. Hãy chuyển đến hoạt động Đối tượng và sử dụng Agora UIKit.

@Ghi đè
khoảng trống được bảo vệ onCreate(Gói đã lưuInstanceState) {
hữu ích. Cảm ơn !
AgoraRTC.ví dụ().bootstrap(điều này, ID ứng dụng, Tên kênh);
setContentView(R.layout.nhóm_mẫu);
}
AgoraRTC.ví dụ().muteLocalVideoStream(đúng);
AgoraRTC.ví dụ().muteLocalAudioStream(đúng);
IRtcEngineTrình xử lý sự kiện xử lý sự kiện = mới IRtcEngineEventHandler() {
@Ghi đè
khoảng trống công cộng onRemoteVideoStateChanged(int cuối cùng uid, int tiểu bang, int lý do, int đã trôi qua) {
siêu.onRemoteVideoStateChanged(uid, trạng thái, lý do, đã trôi qua);
if (trạng thái == REMOTE_VIDEO_STATE_STARTING) {
runOnUiThread(mới Có thể chạy được() {
@Ghi đè
khoảng trống công cộng chạy() {
agoraXem.setUID(uid);
}
});
}
}
};
@Ghi đè
khoảng trống được bảo vệ onCreate(Gói đã lưuInstanceState) {
hữu ích. Cảm ơn !
 agoraXem = findViewById(R.id.max_view);
AgoraRTC.ví dụ().registerListener(xử lý sự kiện);
hữu ích. Cảm ơn !
}
endCallButton.setOnClickListener(mới View.OnClickListener() {
@Ghi đè
khoảng trống công cộng onClick(Xem v) {
hoàn thành();
}
});

Tin nhắn văn bản trong ứng dụng phát trực tuyến có thể được chia thành hai phần: nhắn tin theo kênh và nhắn tin riêng tư. Cái đầu tiên gửi tin nhắn đến kênh và mọi người trong kênh có thể nhận được tin nhắn đó trong khi cái thứ hai gửi tin nhắn riêng tư từ ngang hàng này sang ngang hàng khác.

Tin nhắn kênh

Chúng tôi muốn cho phép tất cả khán giả gửi tin nhắn trong phòng của người phát trực tiếp. Để đạt được điều đó, chúng ta cần tạo ra một RtmClient sử dụng SDK nhắn tin Agora.

mRtmclient = RtmClient.tạo sơ thẩm(mContext, ID ứng dụng, mới RtmClientListener() {
@Ghi đè
khoảng trống công cộng onConnectionStateChanged(int tiểu bang, int lý do){
cho (Trình nghe RtmClientListener: mListenerList) {
Listen.onConnectionStateChanged(trạng thái, lý do);
}
}@Ghi đè
khoảng trống công cộng onMessageReceured (RtmMessage rtmMessage, Chuỗi ngang hàng) { hữu ích. Cảm ơn ! }
});
mRtmClient.đăng nhập(vô giá trị, tên tài khoản, mới io.agora.rtm.ResultCallback () {
@Ghi đè
khoảng trống công cộng onSuccess(Void aVoid) {
hữu ích. Cảm ơn !
} @Ghi đè
khoảng trống công cộng onFailure(ErrorInfo errorInfo) {
hữu ích. Cảm ơn !
}
});
mRtmKênh = mRtmClient.createChannel(mChannelName, mới MyChannelListener());
tốt nghiệp lớp XNUMX Trình nghe kênh của tôi thực hiện RtmChannelListener {
@Ghi đè
khoảng trống công cộng onMessageReceived(cuối cùng Tin nhắn RtmMessage, cuối cùng RtmChannelMember từMember) {
runOnUiThread(mới Có thể chạy được() {
@Ghi đè
khoảng trống công cộng chạy() {
Tài khoản chuỗi = fromMember.getUserId();
Chuỗi tin nhắn = message.getText();
MessageBean messageBean = mới MessageBean(tài khoản, tin nhắn, sai);
messageBean.setBackground(getMessageColor(tài khoản));
mMessageBeanList.add(messageBean);
mMessageAdapter.notifyItemRangeChanged(mMessageBeanList.size(), 1);
mRecyclerView.scrollToPosition(mMessageBeanList.size() - 1);
}
});
}
hữu ích. Cảm ơn !
}
mRtmKênh.tham gia(mới Kết quảGọi lại () {
@Ghi đè
khoảng trống công cộng onSuccess(Void replyInfo) { ... }@Override
khoảng trống công cộng onFailure(ErrorInfo errorInfo) { ... }
});
khoảng trống riêng tư sendChannelMessage(Nội dung chuỗi) {
// bước 1: tạo tin nhắn
Tin nhắn RtmMessage = mRtmClient.soạn tin nhắn();
message.setText(nội dung); // bước 2: gửi tin nhắn tới kênh
mRtmKênh.sendMessage(tin nhắn, mới Kết quảGọi lại () {
@Ghi đè
khoảng trống công cộng onSuccess(Void aVoid) {
hữu ích. Cảm ơn !
}
@Ghi đè
khoảng trống công cộng onFailure(ErrorInfo errorInfo) {
hữu ích. Cảm ơn !
}
});
}

Tin nhắn cá nhân

Trong tạp chí Đoạn trò chuyện, người dùng có thể tìm thấy bạn bè của mình bằng cách tìm kiếm tên của người bạn đó và gửi tin nhắn văn bản riêng tư cho họ.

childEventListener = mới ChildEventListener() {
@Ghi đè
khoảng trống công cộng onChildAdded(@NonNull DataSnapshot dataSnapshot, @Nullable String s) {
Kết quả DBUser = dataSnapshot.getValue(DBUser.tốt nghiệp lớp XNUMX);
hiển thịBạn bèVăn bản.setText(result.getName());
mRef.orderByChild("Tên").startAt(tên bạn bè).kết thúc tại(tên bạn bè + "uf8ff").removeEventListener(childEventListener);
}
hữu ích. Cảm ơn !
};
mRef.orderByChild("Tên").startAt(tên bạn bè).kết thúc tại(tên bạn bè + "uf8ff").addChildEventListener(childEventListener);
  1. Bạn cần đăng ký RtmClientListener và nhận tin nhắn từ onMessageĐã nhận gọi lại.
tốt nghiệp lớp XNUMX Trình nghe MyRtmClient thực hiện RtmClientListener {
@Ghi đè
khoảng trống công cộng onMessageReceived(cuối cùng Tin nhắn RtmMessage, cuối cùng Chuỗi ngang hàng) {
runOnUiThread(mới Có thể chạy được() {
@Ghi đè
khoảng trống công cộng chạy() {
Nội dung chuỗi = message.getText();
if (peerId.equals(mPeerId)) {
MessageBean messageBean = mới MessageBean(peerId, nội dung,sai);
messageBean.setBackground(getMessageColor(peerId));
mMessageBeanList.add(messageBean);
mMessageAdapter.notifyItemRangeChanged(mMessageBeanList.size(), 1);
mRecyclerView.scrollToPosition(mMessageBeanList.size() - 1);
} khác {
MessageUtil.thêmMessageBean(peerId, nội dung);
}
}
});
}
hữu ích. Cảm ơn !
}
mRtmClient.sendMessageToPeer(mPeerId, tin nhắn, mChatManager.getSendMessageOptions(), mới Kết quảGọi lại () {
@Ghi đè
khoảng trống công cộng onSuccess(Void aVoid) {
hữu ích. Cảm ơn !
}
@Ghi đè
khoảng trống công cộng onFailure(ErrorInfo errorInfo) {
hữu ích. Cảm ơn !
}
});

Bây giờ hãy chạy ứng dụng của chúng tôi!

Chúc mừng! Bạn vừa xây dựng cho mình một ứng dụng live streaming với tính năng lọc khuôn mặt và nhắn tin chat!

Source: https://arvrjourney.com/build-a-streaming-application-with-face-filter-on-android-9399a028bb40?source=rss—-d01820283d6d—4

tại chỗ_img

Tin tức mới nhất

tại chỗ_img

Bản quyền @ 2024 Plato Technologies Inc.