Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.
# Langkah 5: Publikasikan dan Berlangganan Video
Anda dapat publish/subscribe (real-time) ke IVS dengan:
+ [Siaran IVS](https://docs.aws.amazon.com//ivs/latest/LowLatencyUserGuide/getting-started-set-up-streaming.html#broadcast-sdk) asli SDKs, yang mendukung WebRTC dan RTMPS. Kami merekomendasikan ini, terutama untuk skenario produksi. Lihat detail di bawah ini untuk [Web](getting-started-pub-sub-web.md), [Android](getting-started-pub-sub-android.md), dan [iOS](getting-started-pub-sub-ios.md).
+ Konsol Amazon IVS — Ini cocok untuk menguji aliran. Lihat di bawah ini.
+ Perangkat lunak streaming dan encoder perangkat keras lainnya - Anda dapat menggunakan encoder streaming apa pun yang mendukung protokol RTMP, RTMPS, atau WHIP. Lihat [Stream Ingest](rt-stream-ingest.md) untuk informasi lebih lanjut.
## Konsol IVS
1. Buka [konsol Amazon IVS](https://console.aws.amazon.com/ivs).
(Anda juga dapat mengakses konsol Amazon IVS melalui [AWS Management Console](https://console.aws.amazon.com/).)
1. Di panel navigasi, pilih **Tahapan**. (Jika panel navigasi diciutkan, perluas dengan memilih ikon hamburger.)
1. Pilih tahap yang ingin Anda berlangganan atau terbitkan, untuk pergi ke halaman detailnya.
1. Untuk berlangganan: Jika panggung memiliki satu atau lebih penerbit, Anda dapat berlangganan dengan menekan tombol **Berlangganan**, di bawah tab **Berlangganan**. (Tab berada di bawah bagian **Konfigurasi Umum**.)
1. Untuk mempublikasikan:
1. Pilih tab **Publikasikan**.
1. Anda akan diminta untuk memberikan akses konsol IVS ke kamera dan mikrofon Anda; **Izinkan** izin tersebut.
1. Di bagian bawah tab **Publish**, gunakan kotak dropdown untuk memilih perangkat input untuk mikrofon dan kamera.
1. Untuk memulai penerbitan, pilih **Mulai penerbitan**.
1. Untuk melihat konten yang dipublikasikan, kembali ke tab **Berlangganan**.
1. Untuk berhenti menerbitkan, buka tab **Publish** dan tekan tombol **Stop publishing** di bagian bawah.
**Catatan**: Berlangganan dan penerbitan menghabiskan sumber daya, dan Anda akan dikenakan tarif per jam untuk waktu Anda terhubung ke panggung. Untuk mempelajari lebih lanjut, lihat [Streaming Waktu Nyata](https://aws.amazon.com/ivs/pricing/#Real-Time_Streaming) di halaman Harga IVS.
# Publikasikan & Berlangganan dengan IVS Web Broadcast SDK
Bagian ini akan membawa Anda melalui langkah-langkah yang terlibat dalam penerbitan dan berlangganan ke panggung menggunakan aplikasi web Anda.
## Buat HTML Boilerplate
Pertama mari kita buat boilerplate HTML dan impor pustaka sebagai tag skrip:
```
```
## Terima Masukan Token dan Tambahkan Join/Leave Tombol
Di sini kita mengisi tubuh dengan kontrol input kita. Ini mengambil sebagai masukan token, dan mereka mengatur tombol **Gabung** dan **Tinggalkan**. Biasanya aplikasi akan meminta token dari API aplikasi Anda, tetapi untuk contoh ini Anda akan menyalin dan menempelkan token ke input token.
```
IVS Real-Time Streaming
```
## Tambahkan Elemen Kontainer Media
Elemen-elemen ini akan memegang media untuk peserta lokal dan jarak jauh kami. Kita menambahkan tag script untuk memuat logika aplikasi kita didefinisikan dalam`app.js`.
```
```
Ini melengkapi halaman HTML dan Anda akan melihat ini saat memuat `index.html` di browser:
![\[Lihat Streaming Waktu Nyata di browser: Pengaturan HTML selesai.\]](http://docs.aws.amazon.com/id_id/ivs/latest/RealTimeUserGuide/images/RT_Browser_View.png)
## Buat app.js
Mari kita beralih ke mendefinisikan isi `app.js` file kita. Mulailah dengan mengimpor semua properti yang diperlukan dari global SDK:
```
const {
Stage,
LocalStageStream,
SubscribeType,
StageEvents,
ConnectionState,
StreamType
} = IVSBroadcastClient;
```
## Buat Variabel Aplikasi
Tetapkan variabel untuk menyimpan referensi ke elemen HTML tombol **Gabung** dan **Tinggalkan** kami dan status penyimpanan untuk aplikasi:
```
let joinButton = document.getElementById("join-button");
let leaveButton = document.getElementById("leave-button");
// Stage management
let stage;
let joining = false;
let connected = false;
let localCamera;
let localMic;
let cameraStageStream;
let micStageStream;
```
## Buat JoinSage 1: Tentukan Fungsi dan Validasi Input
`joinStage`Fungsi mengambil token input, membuat koneksi ke panggung, dan mulai mempublikasikan video dan audio yang diambil dari`getUserMedia`.
Untuk memulai, kita mendefinisikan fungsi dan memvalidasi status dan masukan token. Kami akan menyempurnakan fungsi ini di beberapa bagian berikutnya.
```
const joinStage = async () => {
if (connected || joining) {
return;
}
joining = true;
const token = document.getElementById("token").value;
if (!token) {
window.alert("Please enter a participant token");
joining = false;
return;
}
// Fill in with the next sections
};
```
## Buat JoinSage 2: Dapatkan Media untuk Publikasikan
Berikut adalah media yang akan dipublikasikan ke panggung:
```
async function getCamera() {
// Use Max Width and Height
return navigator.mediaDevices.getUserMedia({
video: true,
audio: false
});
}
async function getMic() {
return navigator.mediaDevices.getUserMedia({
video: false,
audio: true
});
}
// Retrieve the User Media currently set on the page
localCamera = await getCamera();
localMic = await getMic();
// Create StageStreams for Audio and Video
cameraStageStream = new LocalStageStream(localCamera.getVideoTracks()[0]);
micStageStream = new LocalStageStream(localMic.getAudioTracks()[0]);
```
## Buat JoinSage 3: Tentukan Strategi Panggung dan Buat Panggung
Strategi tahap ini adalah inti dari logika keputusan yang digunakan SDK untuk memutuskan apa yang akan dipublikasikan dan peserta mana yang akan berlangganan. Untuk informasi selengkapnya tentang tujuan fungsi, lihat [Strategi](web-publish-subscribe.md#web-publish-subscribe-concepts-strategy).
Strategi ini sederhana. Setelah bergabung dengan panggung, publikasikan streaming yang baru saja kami ambil dan berlangganan audio dan video setiap peserta jarak jauh:
```
const strategy = {
stageStreamsToPublish() {
return [cameraStageStream, micStageStream];
},
shouldPublishParticipant() {
return true;
},
shouldSubscribeToParticipant() {
return SubscribeType.AUDIO_VIDEO;
}
};
stage = new Stage(token, strategy);
```
## Buat JoinSage 4: Menangani Acara Panggung dan Media Render
Tahapan memancarkan banyak peristiwa. Kita harus mendengarkan dan merender `STAGE_PARTICIPANT_STREAMS_ADDED` dan `STAGE_PARTICIPANT_LEFT` menghapus media ke dan dari halaman. [Serangkaian peristiwa yang lebih lengkap tercantum dalam Acara.](web-publish-subscribe.md#web-publish-subscribe-concepts-events)
Perhatikan bahwa kita membuat empat fungsi pembantu di sini untuk membantu kita dalam mengelola elemen DOM yang diperlukan:`setupParticipant`,, `teardownParticipant``createVideoEl`, dan`createContainer`.
```
stage.on(StageEvents.STAGE_CONNECTION_STATE_CHANGED, (state) => {
connected = state === ConnectionState.CONNECTED;
if (connected) {
joining = false;
joinButton.style = "display: none";
leaveButton.style = "display: inline-block";
}
});
stage.on(
StageEvents.STAGE_PARTICIPANT_STREAMS_ADDED,
(participant, streams) => {
console.log("Participant Media Added: ", participant, streams);
let streamsToDisplay = streams;
if (participant.isLocal) {
// Ensure to exclude local audio streams, otherwise echo will occur
streamsToDisplay = streams.filter(
(stream) => stream.streamType === StreamType.VIDEO
);
}
const videoEl = setupParticipant(participant);
streamsToDisplay.forEach((stream) =>
videoEl.srcObject.addTrack(stream.mediaStreamTrack)
);
}
);
stage.on(StageEvents.STAGE_PARTICIPANT_LEFT, (participant) => {
console.log("Participant Left: ", participant);
teardownParticipant(participant);
});
// Helper functions for managing DOM
function setupParticipant({ isLocal, id }) {
const groupId = isLocal ? "local-media" : "remote-media";
const groupContainer = document.getElementById(groupId);
const participantContainerId = isLocal ? "local" : id;
const participantContainer = createContainer(participantContainerId);
const videoEl = createVideoEl(participantContainerId);
participantContainer.appendChild(videoEl);
groupContainer.appendChild(participantContainer);
return videoEl;
}
function teardownParticipant({ isLocal, id }) {
const groupId = isLocal ? "local-media" : "remote-media";
const groupContainer = document.getElementById(groupId);
const participantContainerId = isLocal ? "local" : id;
const participantDiv = document.getElementById(
participantContainerId + "-container"
);
if (!participantDiv) {
return;
}
groupContainer.removeChild(participantDiv);
}
function createVideoEl(id) {
const videoEl = document.createElement("video");
videoEl.id = id;
videoEl.autoplay = true;
videoEl.playsInline = true;
videoEl.srcObject = new MediaStream();
return videoEl;
}
function createContainer(id) {
const participantContainer = document.createElement("div");
participantContainer.classList = "participant-container";
participantContainer.id = id + "-container";
return participantContainer;
}
```
## Buat JoinSage 5: Bergabunglah dengan Panggung
Mari selesaikan `joinStage` fungsi kita dengan akhirnya bergabung dengan panggung\$1
```
try {
await stage.join();
} catch (err) {
joining = false;
connected = false;
console.error(err.message);
}
```
## Buat LeaveStage
Tentukan `leaveStage` fungsi yang akan dipanggil tombol tinggalkan.
```
const leaveStage = async () => {
stage.leave();
joining = false;
connected = false;
};
```
## Inisialisasi Input-Event Handler
Kami akan menambahkan satu fungsi terakhir ke `app.js` file kami. Fungsi ini dipanggil segera ketika halaman dimuat dan menetapkan event handler untuk bergabung dan meninggalkan panggung.
```
const init = async () => {
try {
// Prevents issues on Safari/FF so devices are not blank
await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
} catch (e) {
alert(
"Problem retrieving media! Enable camera and microphone permissions."
);
}
joinButton.addEventListener("click", () => {
joinStage();
});
leaveButton.addEventListener("click", () => {
leaveStage();
joinButton.style = "display: inline-block";
leaveButton.style = "display: none";
});
};
init(); // call the function
```
## Jalankan Aplikasi dan Berikan Token
Pada titik ini Anda dapat berbagi halaman web secara lokal atau dengan orang lain, [membuka halaman](#getting-started-pub-sub-web-media), dan memasukkan token peserta dan bergabung dengan panggung.
## Apa selanjutnya?
Untuk contoh lebih detail yang melibatkan npm, React, dan lainnya, lihat [IVS Broadcast SDK: Web Guide (Real-Time Streaming Guide)](broadcast-web.md).
# Publikasikan & Berlangganan dengan IVS Android Broadcast SDK
Bagian ini akan membawa Anda melalui langkah-langkah yang terlibat dalam menerbitkan dan berlangganan ke panggung menggunakan aplikasi Android Anda.
## Buat Tampilan
Kita mulai dengan membuat tata letak sederhana untuk aplikasi kita menggunakan `activity_main.xml` file yang dibuat secara otomatis. Layout berisi `EditText` to add a token, Join`Button`, a `TextView` to show the stage state, dan `CheckBox` to toggle publishing.
![\[Siapkan tata letak penerbitan untuk aplikasi Android Anda.\]](http://docs.aws.amazon.com/id_id/ivs/latest/RealTimeUserGuide/images/Publish_Android_1.png)
Berikut adalah XHTML di belakang tampilan:
```
```
Kami mereferensikan beberapa string IDs di sini, jadi kami akan membuat seluruh `strings.xml` file kami sekarang:
```
BasicRealTimeJoinLeaveParticipant TokenPublishState: %1$s
```
Mari kita tautkan pandangan tersebut di XHTML ke: `MainActivity.kt`
```
import android.widget.Button
import android.widget.CheckBox
import android.widget.EditText
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
private lateinit var checkboxPublish: CheckBox
private lateinit var recyclerView: RecyclerView
private lateinit var buttonJoin: Button
private lateinit var textViewState: TextView
private lateinit var editTextToken: EditText
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
checkboxPublish = findViewById(R.id.main_publish_checkbox)
recyclerView = findViewById(R.id.main_recycler_view)
buttonJoin = findViewById(R.id.main_join)
textViewState = findViewById(R.id.main_state)
editTextToken = findViewById(R.id.main_token)
}
```
Sekarang kita membuat tampilan item untuk kita`RecyclerView`. Untuk melakukan ini, klik kanan `res/layout` direktori Anda dan pilih **New > Layout Resource File**. Beri nama file baru ini`item_stage_participant.xml`.
![\[Buat tampilan item untuk aplikasi Android Anda RecyclerView.\]](http://docs.aws.amazon.com/id_id/ivs/latest/RealTimeUserGuide/images/Publish_Android_2.png)
Tata letak untuk item ini sederhana: berisi tampilan untuk merender aliran video peserta dan daftar label untuk menampilkan informasi tentang peserta:
![\[Buat tampilan item untuk aplikasi Android Anda RecyclerView - label.\]](http://docs.aws.amazon.com/id_id/ivs/latest/RealTimeUserGuide/images/Publish_Android_3.png)
Berikut adalah XML-nya:
```
```
File XHTML ini mengembang kelas yang belum kita buat,. `ParticipantItem` Karena XHTML menyertakan namespace lengkap, pastikan untuk memperbarui file XHTML ini ke namespace Anda. Mari kita buat kelas ini dan atur tampilan, tetapi biarkan kosong untuk saat ini.
Buat class Kotlin baru,`ParticipantItem`:
```
package com.amazonaws.ivs.realtime.basicrealtime
import android.content.Context
import android.util.AttributeSet
import android.widget.FrameLayout
import android.widget.TextView
import kotlin.math.roundToInt
class ParticipantItem @JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0,
defStyleRes: Int = 0,
) : FrameLayout(context, attrs, defStyleAttr, defStyleRes) {
private lateinit var previewContainer: FrameLayout
private lateinit var textViewParticipantId: TextView
private lateinit var textViewPublish: TextView
private lateinit var textViewSubscribe: TextView
private lateinit var textViewVideoMuted: TextView
private lateinit var textViewAudioMuted: TextView
private lateinit var textViewAudioLevel: TextView
override fun onFinishInflate() {
super.onFinishInflate()
previewContainer = findViewById(R.id.participant_preview_container)
textViewParticipantId = findViewById(R.id.participant_participant_id)
textViewPublish = findViewById(R.id.participant_publishing)
textViewSubscribe = findViewById(R.id.participant_subscribed)
textViewVideoMuted = findViewById(R.id.participant_video_muted)
textViewAudioMuted = findViewById(R.id.participant_audio_muted)
textViewAudioLevel = findViewById(R.id.participant_audio_level)
}
}
```
## Izin
Untuk menggunakan kamera dan mikrofon, Anda perlu meminta izin dari pengguna. Kami mengikuti alur izin standar untuk ini:
```
override fun onStart() {
super.onStart()
requestPermission()
}
private val requestPermissionLauncher =
registerForActivityResult(ActivityResultContracts.RequestMultiplePermissions()) { permissions ->
if (permissions[Manifest.permission.CAMERA] == true && permissions[Manifest.permission.RECORD_AUDIO] == true) {
viewModel.permissionGranted() // we will add this later
}
}
private val permissions = listOf(
Manifest.permission.CAMERA,
Manifest.permission.RECORD_AUDIO,
)
private fun requestPermission() {
when {
this.hasPermissions(permissions) -> viewModel.permissionGranted() // we will add this later
else -> requestPermissionLauncher.launch(permissions.toTypedArray())
}
}
private fun Context.hasPermissions(permissions: List): Boolean {
return permissions.all {
ContextCompat.checkSelfPermission(this, it) == PackageManager.PERMISSION_GRANTED
}
}
```
## Status Aplikasi
Aplikasi kami melacak peserta secara lokal di a `MainViewModel.kt` dan status akan dikomunikasikan kembali ke `MainActivity` menggunakan Kotlin. [StateFlow](https://kotlinlang.org/api/kotlinx.coroutines/kotlinx-coroutines-core/kotlinx.coroutines.flow/-state-flow/)
Buat class `MainViewModel` Kotlin baru:
```
package com.amazonaws.ivs.realtime.basicrealtime
import android.app.Application
import androidx.lifecycle.AndroidViewModel
class MainViewModel(application: Application) : AndroidViewModel(application), Stage.Strategy, StageRenderer {
}
```
Dalam `MainActivity.kt` kami mengelola model tampilan kami:
```
import androidx.activity.viewModels
private val viewModel: MainViewModel by viewModels()
```
Untuk menggunakan `AndroidViewModel` dan `ViewModel` ekstensi Kotlin ini, Anda harus menambahkan yang berikut ini ke `build.gradle` file modul Anda:
```
implementation 'androidx.core:core-ktx:1.10.1'
implementation "androidx.activity:activity-ktx:1.7.2"
implementation 'androidx.appcompat:appcompat:1.6.1'
implementation 'com.google.android.material:material:1.10.0'
implementation "androidx.lifecycle:lifecycle-extensions:2.2.0"
def lifecycle_version = "2.6.1"
implementation "androidx.lifecycle:lifecycle-livedata-ktx:$lifecycle_version"
implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:$lifecycle_version"
implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
```
### RecyclerView Adaptor
Kami akan membuat `RecyclerView.Adapter` subclass sederhana untuk melacak peserta kami dan memperbarui acara `RecyclerView` di atas panggung kami. Tapi pertama-tama, kita membutuhkan kelas yang mewakili peserta. Buat class `StageParticipant` Kotlin baru:
```
package com.amazonaws.ivs.realtime.basicrealtime
import com.amazonaws.ivs.broadcast.Stage
import com.amazonaws.ivs.broadcast.StageStream
class StageParticipant(val isLocal: Boolean, var participantId: String?) {
var publishState = Stage.PublishState.NOT_PUBLISHED
var subscribeState = Stage.SubscribeState.NOT_SUBSCRIBED
var streams = mutableListOf()
val stableID: String
get() {
return if (isLocal) {
"LocalUser"
} else {
requireNotNull(participantId)
}
}
}
```
Kita akan menggunakan kelas ini di `ParticipantAdapter` kelas yang akan kita buat selanjutnya. Kita mulai dengan mendefinisikan kelas dan membuat variabel untuk melacak peserta:
```
package com.amazonaws.ivs.realtime.basicrealtime
import android.view.LayoutInflater
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
class ParticipantAdapter : RecyclerView.Adapter() {
private val participants = mutableListOf()
```
Kita juga harus mendefinisikan kita `RecyclerView.ViewHolder` sebelum menerapkan sisa penggantian:
```
class ViewHolder(val participantItem: ParticipantItem) : RecyclerView.ViewHolder(participantItem)
```
Dengan menggunakan ini, kita dapat menerapkan `RecyclerView.Adapter` penggantian standar:
```
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
val item = LayoutInflater.from(parent.context)
.inflate(R.layout.item_stage_participant, parent, false) as ParticipantItem
return ViewHolder(item)
}
override fun getItemCount(): Int {
return participants.size
}
override fun getItemId(position: Int): Long =
participants[position]
.stableID
.hashCode()
.toLong()
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
return holder.participantItem.bind(participants[position])
}
override fun onBindViewHolder(holder: ViewHolder, position: Int, payloads: MutableList) {
val updates = payloads.filterIsInstance()
if (updates.isNotEmpty()) {
updates.forEach { holder.participantItem.bind(it) // implemented later }
} else {
super.onBindViewHolder(holder, position, payloads)
}
}
```
Akhirnya, kami menambahkan metode baru yang akan kami panggil dari kami `MainViewModel` ketika perubahan pada peserta dilakukan. Metode ini adalah operasi CRUD standar pada adaptor.
```
fun participantJoined(participant: StageParticipant) {
participants.add(participant)
notifyItemInserted(participants.size - 1)
}
fun participantLeft(participantId: String) {
val index = participants.indexOfFirst { it.participantId == participantId }
if (index != -1) {
participants.removeAt(index)
notifyItemRemoved(index)
}
}
fun participantUpdated(participantId: String?, update: (participant: StageParticipant) -> Unit) {
val index = participants.indexOfFirst { it.participantId == participantId }
if (index != -1) {
update(participants[index])
notifyItemChanged(index, participants[index])
}
}
```
Kembali `MainViewModel` kita perlu membuat dan menahan referensi ke adaptor ini:
```
internal val participantAdapter = ParticipantAdapter()
```
## Status Panggung
Kita juga perlu melacak beberapa status tahap di dalamnya`MainViewModel`. Mari kita definisikan properti itu sekarang:
```
private val _connectionState = MutableStateFlow(Stage.ConnectionState.DISCONNECTED)
val connectionState = _connectionState.asStateFlow()
private var publishEnabled: Boolean = false
set(value) {
field = value
// Because the strategy returns the value of `checkboxPublish.isChecked`, just call `refreshStrategy`.
stage?.refreshStrategy()
}
private var deviceDiscovery: DeviceDiscovery? = null
private var stage: Stage? = null
private var streams = mutableListOf()
```
Untuk melihat pratinjau Anda sendiri sebelum bergabung dengan panggung, kami segera membuat peserta lokal:
```
init {
deviceDiscovery = DeviceDiscovery(application)
// Create a local participant immediately to render our camera preview and microphone stats
val localParticipant = StageParticipant(true, null)
participantAdapter.participantJoined(localParticipant)
}
```
Kami ingin memastikan kami membersihkan sumber daya ini ketika kami `ViewModel` dibersihkan. Kami `onCleared()` segera mengganti, jadi kami tidak lupa untuk membersihkan sumber daya ini.
```
override fun onCleared() {
stage?.release()
deviceDiscovery?.release()
deviceDiscovery = null
super.onCleared()
}
```
Sekarang kita mengisi `streams` properti lokal kita segera setelah izin diberikan, menerapkan `permissionsGranted` metode yang kita sebut sebelumnya:
```
internal fun permissionGranted() {
val deviceDiscovery = deviceDiscovery ?: return
streams.clear()
val devices = deviceDiscovery.listLocalDevices()
// Camera
devices
.filter { it.descriptor.type == Device.Descriptor.DeviceType.CAMERA }
.maxByOrNull { it.descriptor.position == Device.Descriptor.Position.FRONT }
?.let { streams.add(ImageLocalStageStream(it)) }
// Microphone
devices
.filter { it.descriptor.type == Device.Descriptor.DeviceType.MICROPHONE }
.maxByOrNull { it.descriptor.isDefault }
?.let { streams.add(AudioLocalStageStream(it)) }
stage?.refreshStrategy()
// Update our local participant with these new streams
participantAdapter.participantUpdated(null) {
it.streams.clear()
it.streams.addAll(streams)
}
}
```
## Menerapkan Stage SDK
Tiga [konsep](android-publish-subscribe.md#android-publish-subscribe-concepts) inti mendasari fungsionalitas real-time: panggung, strategi, dan penyaji. Tujuan desain adalah meminimalkan jumlah logika sisi klien yang diperlukan untuk membangun produk yang berfungsi.
### Tahap.Strategi
`Stage.Strategy`Implementasi kami sederhana:
```
override fun stageStreamsToPublishForParticipant(
stage: Stage,
participantInfo: ParticipantInfo
): MutableList {
// Return the camera and microphone to be published.
// This is only called if `shouldPublishFromParticipant` returns true.
return streams
}
override fun shouldPublishFromParticipant(stage: Stage, participantInfo: ParticipantInfo): Boolean {
return publishEnabled
}
override fun shouldSubscribeToParticipant(stage: Stage, participantInfo: ParticipantInfo): Stage.SubscribeType {
// Subscribe to both audio and video for all publishing participants.
return Stage.SubscribeType.AUDIO_VIDEO
}
```
Untuk meringkas, kami menerbitkan berdasarkan `publishEnabled` keadaan internal kami, dan jika kami mempublikasikan, kami akan mempublikasikan aliran yang kami kumpulkan sebelumnya. Akhirnya untuk sampel ini, kami selalu berlangganan peserta lain, menerima audio dan video mereka.
### StageRenderer
`StageRenderer`Implementasinya juga cukup sederhana, meskipun mengingat jumlah fungsi yang berisi lebih banyak kode. Pendekatan umum dalam penyaji ini adalah memperbarui `ParticipantAdapter` saat SDK memberi tahu kami tentang perubahan pada peserta. Ada skenario tertentu di mana kami menangani peserta lokal secara berbeda, karena kami telah memutuskan untuk mengelolanya sendiri sehingga mereka dapat melihat pratinjau kamera mereka sebelum bergabung.
```
override fun onError(exception: BroadcastException) {
Toast.makeText(getApplication(), "onError ${exception.localizedMessage}", Toast.LENGTH_LONG).show()
Log.e("BasicRealTime", "onError $exception")
}
override fun onConnectionStateChanged(
stage: Stage,
connectionState: Stage.ConnectionState,
exception: BroadcastException?
) {
_connectionState.value = connectionState
}
override fun onParticipantJoined(stage: Stage, participantInfo: ParticipantInfo) {
if (participantInfo.isLocal) {
// If this is the local participant joining the stage, update the participant with a null ID because we
// manually added that participant when setting up our preview
participantAdapter.participantUpdated(null) {
it.participantId = participantInfo.participantId
}
} else {
// If they are not local, add them normally
participantAdapter.participantJoined(
StageParticipant(
participantInfo.isLocal,
participantInfo.participantId
)
)
}
}
override fun onParticipantLeft(stage: Stage, participantInfo: ParticipantInfo) {
if (participantInfo.isLocal) {
// If this is the local participant leaving the stage, update the ID but keep it around because
// we want to keep the camera preview active
participantAdapter.participantUpdated(participantInfo.participantId) {
it.participantId = null
}
} else {
// If they are not local, have them leave normally
participantAdapter.participantLeft(participantInfo.participantId)
}
}
override fun onParticipantPublishStateChanged(
stage: Stage,
participantInfo: ParticipantInfo,
publishState: Stage.PublishState
) {
// Update the publishing state of this participant
participantAdapter.participantUpdated(participantInfo.participantId) {
it.publishState = publishState
}
}
override fun onParticipantSubscribeStateChanged(
stage: Stage,
participantInfo: ParticipantInfo,
subscribeState: Stage.SubscribeState
) {
// Update the subscribe state of this participant
participantAdapter.participantUpdated(participantInfo.participantId) {
it.subscribeState = subscribeState
}
}
override fun onStreamsAdded(stage: Stage, participantInfo: ParticipantInfo, streams: MutableList) {
// We don't want to take any action for the local participant because we track those streams locally
if (participantInfo.isLocal) {
return
}
// For remote participants, add these new streams to that participant's streams array.
participantAdapter.participantUpdated(participantInfo.participantId) {
it.streams.addAll(streams)
}
}
override fun onStreamsRemoved(stage: Stage, participantInfo: ParticipantInfo, streams: MutableList) {
// We don't want to take any action for the local participant because we track those streams locally
if (participantInfo.isLocal) {
return
}
// For remote participants, remove these streams from that participant's streams array.
participantAdapter.participantUpdated(participantInfo.participantId) {
it.streams.removeAll(streams)
}
}
override fun onStreamsMutedChanged(
stage: Stage,
participantInfo: ParticipantInfo,
streams: MutableList
) {
// We don't want to take any action for the local participant because we track those streams locally
if (participantInfo.isLocal) {
return
}
// For remote participants, notify the adapter that the participant has been updated. There is no need to modify
// the `streams` property on the `StageParticipant` because it is the same `StageStream` instance. Just
// query the `isMuted` property again.
participantAdapter.participantUpdated(participantInfo.participantId) {}
}
```
## Menerapkan Kustom RecyclerView LayoutManager
Menempatkan jumlah peserta yang berbeda bisa menjadi rumit. Anda ingin mereka mengambil seluruh bingkai tampilan induk tetapi Anda tidak ingin menangani setiap konfigurasi peserta secara independen. Untuk membuatnya mudah, kita akan berjalan melalui penerapan a`RecyclerView.LayoutManager`.
Buat kelas baru lainnya,`StageLayoutManager`, yang harus diperluas`GridLayoutManager`. Kelas ini dirancang untuk menghitung tata letak untuk setiap peserta berdasarkan jumlah peserta dalam row/column tata letak berbasis aliran. Setiap baris memiliki tinggi yang sama dengan yang lain, tetapi kolom dapat memiliki lebar yang berbeda per baris. Lihat komentar kode di atas `layouts` variabel untuk deskripsi tentang cara menyesuaikan perilaku ini.
```
package com.amazonaws.ivs.realtime.basicrealtime
import android.content.Context
import androidx.recyclerview.widget.GridLayoutManager
import androidx.recyclerview.widget.RecyclerView
class StageLayoutManager(context: Context?) : GridLayoutManager(context, 6) {
companion object {
/**
* This 2D array contains the description of how the grid of participants should be rendered
* The index of the 1st dimension is the number of participants needed to active that configuration
* Meaning if there is 1 participant, index 0 will be used. If there are 5 participants, index 4 will be used.
*
* The 2nd dimension is a description of the layout. The length of the array is the number of rows that
* will exist, and then each number within that array is the number of columns in each row.
*
* See the code comments next to each index for concrete examples.
*
* This can be customized to fit any layout configuration needed.
*/
val layouts: List> = listOf(
// 1 participant
listOf(1), // 1 row, full width
// 2 participants
listOf(1, 1), // 2 rows, all columns are full width
// 3 participants
listOf(1, 2), // 2 rows, first row's column is full width then 2nd row's columns are 1/2 width
// 4 participants
listOf(2, 2), // 2 rows, all columns are 1/2 width
// 5 participants
listOf(1, 2, 2), // 3 rows, first row's column is full width, 2nd and 3rd row's columns are 1/2 width
// 6 participants
listOf(2, 2, 2), // 3 rows, all column are 1/2 width
// 7 participants
listOf(2, 2, 3), // 3 rows, 1st and 2nd row's columns are 1/2 width, 3rd row's columns are 1/3rd width
// 8 participants
listOf(2, 3, 3),
// 9 participants
listOf(3, 3, 3),
// 10 participants
listOf(2, 3, 2, 3),
// 11 participants
listOf(2, 3, 3, 3),
// 12 participants
listOf(3, 3, 3, 3),
)
}
init {
spanSizeLookup = object : SpanSizeLookup() {
override fun getSpanSize(position: Int): Int {
if (itemCount <= 0) {
return 1
}
// Calculate the row we're in
val config = layouts[itemCount - 1]
var row = 0
var curPosition = position
while (curPosition - config[row] >= 0) {
curPosition -= config[row]
row++
}
// spanCount == max spans, config[row] = number of columns we want
// So spanCount / config[row] would be something like 6 / 3 if we want 3 columns.
// So this will take up 2 spans, with a max of 6 is 1/3rd of the view.
return spanCount / config[row]
}
}
}
override fun onLayoutChildren(recycler: RecyclerView.Recycler?, state: RecyclerView.State?) {
if (itemCount <= 0 || state?.isPreLayout == true) return
val parentHeight = height
val itemHeight = parentHeight / layouts[itemCount - 1].size // height divided by number of rows.
// Set the height of each view based on how many rows exist for the current participant count.
for (i in 0 until childCount) {
val child = getChildAt(i) ?: continue
val layoutParams = child.layoutParams as RecyclerView.LayoutParams
if (layoutParams.height != itemHeight) {
layoutParams.height = itemHeight
child.layoutParams = layoutParams
}
}
// After we set the height for all our views, call super.
// This works because our RecyclerView can not scroll and all views are always visible with stable IDs.
super.onLayoutChildren(recycler, state)
}
override fun canScrollVertically(): Boolean = false
override fun canScrollHorizontally(): Boolean = false
}
```
Kembali `MainActivity.kt` kita perlu mengatur adaptor dan pengelola tata letak untuk`RecyclerView`:
```
// In onCreate after setting recyclerView.
recyclerView.layoutManager = StageLayoutManager(this)
recyclerView.adapter = viewModel.participantAdapter
```
## Menghubungkan Tindakan UI
Kami semakin dekat; hanya ada beberapa tindakan UI yang perlu kita hubungkan.
Pertama kita akan `MainActivity` mengamati `StateFlow` perubahan dari`MainViewModel`:
```
// At the end of your onCreate method
lifecycleScope.launch {
repeatOnLifecycle(Lifecycle.State.CREATED) {
viewModel.connectionState.collect { state ->
buttonJoin.setText(if (state == ConnectionState.DISCONNECTED) R.string.join else R.string.leave)
textViewState.text = getString(R.string.state, state.name)
}
}
}
```
Selanjutnya kita menambahkan pendengar ke tombol Join dan kotak centang Publish kami:
```
buttonJoin.setOnClickListener {
viewModel.joinStage(editTextToken.text.toString())
}
checkboxPublish.setOnCheckedChangeListener { _, isChecked ->
viewModel.setPublishEnabled(isChecked)
}
```
Kedua fungsi panggilan di atas di kami`MainViewModel`, yang kami terapkan sekarang:
```
internal fun joinStage(token: String) {
if (_connectionState.value != Stage.ConnectionState.DISCONNECTED) {
// If we're already connected to a stage, leave it.
stage?.leave()
} else {
if (token.isEmpty()) {
Toast.makeText(getApplication(), "Empty Token", Toast.LENGTH_SHORT).show()
return
}
try {
// Destroy the old stage first before creating a new one.
stage?.release()
val stage = Stage(getApplication(), token, this)
stage.addRenderer(this)
stage.join()
this.stage = stage
} catch (e: BroadcastException) {
Toast.makeText(getApplication(), "Failed to join stage ${e.localizedMessage}", Toast.LENGTH_LONG).show()
e.printStackTrace()
}
}
}
internal fun setPublishEnabled(enabled: Boolean) {
publishEnabled = enabled
}
```
## Rendering Peserta
Akhirnya, kita perlu merender data yang kita terima dari SDK ke item peserta yang kita buat sebelumnya. Kami sudah menyelesaikan `RecyclerView` logika, jadi kami hanya perlu mengimplementasikan `bind` API di`ParticipantItem`.
Kita akan mulai dengan menambahkan fungsi kosong dan kemudian berjalan melalui langkah demi langkah:
```
fun bind(participant: StageParticipant) {
}
```
Pertama kita akan menangani status mudah, ID peserta, status publikasi, dan status berlangganan. Untuk ini, kami hanya memperbarui kami `TextViews` secara langsung:
```
val participantId = if (participant.isLocal) {
"You (${participant.participantId ?: "Disconnected"})"
} else {
participant.participantId
}
textViewParticipantId.text = participantId
textViewPublish.text = participant.publishState.name
textViewSubscribe.text = participant.subscribeState.name
```
Selanjutnya kita akan memperbarui status audio dan video yang diredam. Untuk mendapatkan status diredam, kita perlu menemukan `ImageDevice` dan `AudioDevice` dari array stream. Untuk mengoptimalkan kinerja, kami mengingat perangkat terakhir yang terpasang IDs.
```
// This belongs outside the `bind` API.
private var imageDeviceUrn: String? = null
private var audioDeviceUrn: String? = null
// This belongs inside the `bind` API.
val newImageStream = participant
.streams
.firstOrNull { it.device is ImageDevice }
textViewVideoMuted.text = if (newImageStream != null) {
if (newImageStream.muted) "Video muted" else "Video not muted"
} else {
"No video stream"
}
val newAudioStream = participant
.streams
.firstOrNull { it.device is AudioDevice }
textViewAudioMuted.text = if (newAudioStream != null) {
if (newAudioStream.muted) "Audio muted" else "Audio not muted"
} else {
"No audio stream"
}
```
Akhirnya kami ingin membuat pratinjau untuk`imageDevice`:
```
if (newImageStream?.device?.descriptor?.urn != imageDeviceUrn) {
// If the device has changed, remove all subviews from the preview container
previewContainer.removeAllViews()
(newImageStream?.device as? ImageDevice)?.let {
val preview = it.getPreviewView(BroadcastConfiguration.AspectMode.FIT)
previewContainer.addView(preview)
preview.layoutParams = FrameLayout.LayoutParams(
FrameLayout.LayoutParams.MATCH_PARENT,
FrameLayout.LayoutParams.MATCH_PARENT
)
}
}
imageDeviceUrn = newImageStream?.device?.descriptor?.urn
```
Dan kami menampilkan statistik audio dari: `audioDevice`
```
if (newAudioStream?.device?.descriptor?.urn != audioDeviceUrn) {
(newAudioStream?.device as? AudioDevice)?.let {
it.setStatsCallback { _, rms ->
textViewAudioLevel.text = "Audio Level: ${rms.roundToInt()} dB"
}
}
}
audioDeviceUrn = newAudioStream?.device?.descriptor?.urn
```
# Publikasikan & Berlangganan dengan IVS iOS Broadcast SDK
Bagian ini akan membawa Anda melalui langkah-langkah yang terlibat dalam penerbitan dan berlangganan ke panggung menggunakan aplikasi iOS Anda.
## Buat Tampilan
Kami mulai dengan menggunakan `ViewController.swift` file yang dibuat secara otomatis untuk mengimpor `AmazonIVSBroadcast` dan kemudian menambahkan beberapa `@IBOutlets` ke tautan:
```
import AmazonIVSBroadcast
class ViewController: UIViewController {
@IBOutlet private var textFieldToken: UITextField!
@IBOutlet private var buttonJoin: UIButton!
@IBOutlet private var labelState: UILabel!
@IBOutlet private var switchPublish: UISwitch!
@IBOutlet private var collectionViewParticipants: UICollectionView!
```
Sekarang kita membuat pandangan itu dan menghubungkannya`Main.storyboard`. Berikut adalah struktur tampilan yang akan kita gunakan:
![\[Gunakan Main.storyboard untuk membuat tampilan iOS.\]](http://docs.aws.amazon.com/id_id/ivs/latest/RealTimeUserGuide/images/Publish_iOS_1.png)
Untuk AutoLayout konfigurasi, kita perlu menyesuaikan tiga tampilan. Tampilan pertama adalah **Collection View Partisipan** (a`UICollectionView`). Terikat **Memimpin**, **Tertinggal**, dan **Bawah** ke **Area Aman**. Juga terikat **Atas** ke **Controls Container**.
![\[Kustomisasi Tampilan Koleksi iOS Tampilan Peserta.\]](http://docs.aws.amazon.com/id_id/ivs/latest/RealTimeUserGuide/images/Publish_iOS_2.png)
Tampilan kedua adalah **Controls Container**. Terikat **Memimpin**, **Melintasi**, dan **Atas** ke **Area Aman**:
![\[Sesuaikan tampilan Kontainer Kontrol iOS.\]](http://docs.aws.amazon.com/id_id/ivs/latest/RealTimeUserGuide/images/Publish_iOS_3.png)
Tampilan ketiga dan terakhir adalah **Vertical Stack View**. Bound **Top**, **Leading**, **Trailing**, dan **Bottom** ke **Superview**. Untuk penataan, atur spasi ke 8, bukan 0.
![\[Sesuaikan tampilan Tumpukan Vertikal iOS.\]](http://docs.aws.amazon.com/id_id/ivs/latest/RealTimeUserGuide/images/Publish_iOS_4.png)
**UIStackTampilan** akan menangani tata letak tampilan yang tersisa. Untuk ketiga **UIStackTampilan**, gunakan **Fill** sebagai **Alignment** dan **Distribution**.
![\[Sesuaikan tampilan iOS yang tersisa dengan UIStack Tampilan.\]](http://docs.aws.amazon.com/id_id/ivs/latest/RealTimeUserGuide/images/Publish_iOS_5.png)
Akhirnya, mari kita tautkan pandangan ini ke pandangan kita`ViewController`. Dari atas, petakan tampilan berikut:
+ **Bidang Teks Gabung** mengikat ke`textFieldToken`.
+ **Tombol Gabung** mengikat ke`buttonJoin`.
+ **Label State** mengikat ke`labelState`.
+ **Beralih Publikasikan** mengikat ke`switchPublish`.
+ **Tampilan Koleksi Peserta** mengikat`collectionViewParticipants`.
Gunakan juga waktu ini untuk menyetel item **Peserta Tampilan Koleksi** menjadi milik: `dataSource` `ViewController`
![\[Setel DataSource dari Collection View Peserta untuk aplikasi iOS.\]](http://docs.aws.amazon.com/id_id/ivs/latest/RealTimeUserGuide/images/Publish_iOS_6.png)
Sekarang kita membuat `UICollectionViewCell` subclass untuk membuat peserta. Mulailah dengan membuat file **Cocoa Touch Class** baru:
![\[Buat UICollection ViewCell untuk merender peserta real-time iOS.\]](http://docs.aws.amazon.com/id_id/ivs/latest/RealTimeUserGuide/images/Publish_iOS_7.png)
Beri nama `ParticipantUICollectionViewCell` dan jadikan subclass `UICollectionViewCell` di Swift. Kami mulai di file Swift lagi, membuat tautan `@IBOutlets` untuk kami:
```
import AmazonIVSBroadcast
class ParticipantCollectionViewCell: UICollectionViewCell {
@IBOutlet private var viewPreviewContainer: UIView!
@IBOutlet private var labelParticipantId: UILabel!
@IBOutlet private var labelSubscribeState: UILabel!
@IBOutlet private var labelPublishState: UILabel!
@IBOutlet private var labelVideoMuted: UILabel!
@IBOutlet private var labelAudioMuted: UILabel!
@IBOutlet private var labelAudioVolume: UILabel!
```
Dalam file XIB terkait, buat hierarki tampilan ini:
![\[Buat hierarki tampilan iOS di file XIB terkait.\]](http://docs.aws.amazon.com/id_id/ivs/latest/RealTimeUserGuide/images/Publish_iOS_8.png)
Untuk AutoLayout, kita akan memodifikasi tiga tampilan lagi. Tampilan pertama adalah **View Preview Container**. Atur **Trailing**, **Leading**, **Top**, dan **Bottom** ke **Sel Tampilan Koleksi Peserta**.
![\[Kustomisasi tampilan iOS View Preview Container.\]](http://docs.aws.amazon.com/id_id/ivs/latest/RealTimeUserGuide/images/Publish_iOS_9.png)
Pandangan kedua adalah **View**. Atur **Leading** dan **Top** ke **Sel Tampilan Koleksi Peserta** dan ubah nilainya menjadi 4.
![\[Sesuaikan tampilan Tampilan iOS.\]](http://docs.aws.amazon.com/id_id/ivs/latest/RealTimeUserGuide/images/Publish_iOS_10.png)
Tampilan ketiga adalah **Stack View**. Atur **Trailing**, **Leading**, **Top**, dan **Bottom** ke **Superview** dan ubah nilainya menjadi 4.
![\[Sesuaikan tampilan Tampilan Tumpukan iOS.\]](http://docs.aws.amazon.com/id_id/ivs/latest/RealTimeUserGuide/images/Publish_iOS_11.png)
## Izin dan Timer Idle
Kembali ke kami`ViewController`, kami akan menonaktifkan pengatur waktu idle sistem untuk mencegah perangkat tidur saat aplikasi kami digunakan:
```
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
// Prevent the screen from turning off during a call.
UIApplication.shared.isIdleTimerDisabled = true
}
override func viewDidDisappear(_ animated: Bool) {
super.viewDidDisappear(animated)
UIApplication.shared.isIdleTimerDisabled = false
}
```
Selanjutnya kami meminta izin kamera dan mikrofon dari sistem:
```
private func checkPermissions() {
checkOrGetPermission(for: .video) { [weak self] granted in
guard granted else {
print("Video permission denied")
return
}
self?.checkOrGetPermission(for: .audio) { [weak self] granted in
guard granted else {
print("Audio permission denied")
return
}
self?.setupLocalUser() // we will cover this later
}
}
}
private func checkOrGetPermission(for mediaType: AVMediaType, _ result: @escaping (Bool) -> Void) {
func mainThreadResult(_ success: Bool) {
DispatchQueue.main.async {
result(success)
}
}
switch AVCaptureDevice.authorizationStatus(for: mediaType) {
case .authorized: mainThreadResult(true)
case .notDetermined:
AVCaptureDevice.requestAccess(for: mediaType) { granted in
mainThreadResult(granted)
}
case .denied, .restricted: mainThreadResult(false)
@unknown default: mainThreadResult(false)
}
}
```
## Status Aplikasi
Kita perlu mengkonfigurasi kita `collectionViewParticipants` dengan file tata letak yang kita buat sebelumnya:
```
override func viewDidLoad() {
super.viewDidLoad()
// We render everything to exactly the frame, so don't allow scrolling.
collectionViewParticipants.isScrollEnabled = false
collectionViewParticipants.register(UINib(nibName: "ParticipantCollectionViewCell", bundle: .main), forCellWithReuseIdentifier: "ParticipantCollectionViewCell")
}
```
Untuk mewakili setiap peserta, kita membuat struct sederhana yang disebut`StageParticipant`. Ini dapat dimasukkan dalam `ViewController.swift` file, atau file baru dapat dibuat.
```
import Foundation
import AmazonIVSBroadcast
struct StageParticipant {
let isLocal: Bool
var participantId: String?
var publishState: IVSParticipantPublishState = .notPublished
var subscribeState: IVSParticipantSubscribeState = .notSubscribed
var streams: [IVSStageStream] = []
init(isLocal: Bool, participantId: String?) {
self.isLocal = isLocal
self.participantId = participantId
}
}
```
Untuk melacak peserta tersebut, kami menyimpan sederet dari mereka sebagai milik pribadi di`ViewController`:
```
private var participants = [StageParticipant]()
```
Properti ini akan digunakan untuk memberi daya pada kami `UICollectionViewDataSource` yang ditautkan dari storyboard sebelumnya:
```
extension ViewController: UICollectionViewDataSource {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return participants.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
if let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ParticipantCollectionViewCell", for: indexPath) as? ParticipantCollectionViewCell {
cell.set(participant: participants[indexPath.row])
return cell
} else {
fatalError("Couldn't load custom cell type 'ParticipantCollectionViewCell'")
}
}
}
```
Untuk melihat pratinjau Anda sendiri sebelum bergabung dengan panggung, kami segera membuat peserta lokal:
```
override func viewDidLoad() {
/* existing UICollectionView code */
participants.append(StageParticipant(isLocal: true, participantId: nil))
}
```
Ini menghasilkan sel peserta segera dirender setelah aplikasi berjalan, mewakili peserta lokal.
Pengguna ingin dapat melihat diri mereka sendiri sebelum bergabung dengan tahap, jadi selanjutnya kita menerapkan `setupLocalUser()` metode yang dipanggil dari kode penanganan izin sebelumnya. Kami menyimpan referensi kamera dan mikrofon sebagai `IVSLocalStageStream` objek.
```
private var streams = [IVSLocalStageStream]()
private let deviceDiscovery = IVSDeviceDiscovery()
private func setupLocalUser() {
// Gather our camera and microphone once permissions have been granted
let devices = deviceDiscovery.listLocalDevices()
streams.removeAll()
if let camera = devices.compactMap({ $0 as? IVSCamera }).first {
streams.append(IVSLocalStageStream(device: camera))
// Use a front camera if available.
if let frontSource = camera.listAvailableInputSources().first(where: { $0.position == .front }) {
camera.setPreferredInputSource(frontSource)
}
}
if let mic = devices.compactMap({ $0 as? IVSMicrophone }).first {
streams.append(IVSLocalStageStream(device: mic))
}
participants[0].streams = streams
participantsChanged(index: 0, changeType: .updated)
}
```
Di sini kami telah menemukan kamera dan mikrofon perangkat melalui SDK dan menyimpannya di `streams` objek lokal kami, kemudian menetapkan `streams` array peserta pertama (peserta lokal yang kami buat sebelumnya) ke kami`streams`. Akhirnya kami memanggil `participantsChanged` dengan `index` 0 dan `changeType` dari`updated`. Fungsi itu adalah fungsi pembantu untuk memperbarui kami `UICollectionView` dengan animasi yang bagus. Begini tampilannya:
```
private func participantsChanged(index: Int, changeType: ChangeType) {
switch changeType {
case .joined:
collectionViewParticipants?.insertItems(at: [IndexPath(item: index, section: 0)])
case .updated:
// Instead of doing reloadItems, just grab the cell and update it ourselves. It saves a create/destroy of a cell
// and more importantly fixes some UI flicker. We disable scrolling so the index path per cell
// never changes.
if let cell = collectionViewParticipants?.cellForItem(at: IndexPath(item: index, section: 0)) as? ParticipantCollectionViewCell {
cell.set(participant: participants[index])
}
case .left:
collectionViewParticipants?.deleteItems(at: [IndexPath(item: index, section: 0)])
}
}
```
Jangan khawatir`cell.set`; kita akan membahasnya nanti, tapi di situlah kita akan merender konten sel berdasarkan peserta.
`ChangeType`Ini adalah enum sederhana:
```
enum ChangeType {
case joined, updated, left
}
```
Akhirnya, kami ingin melacak apakah panggung terhubung. Kami menggunakan sederhana `bool` untuk melacaknya, yang secara otomatis akan memperbarui UI kami ketika diperbarui sendiri.
```
private var connectingOrConnected = false {
didSet {
buttonJoin.setTitle(connectingOrConnected ? "Leave" : "Join", for: .normal)
buttonJoin.tintColor = connectingOrConnected ? .systemRed : .systemBlue
}
}
```
## Menerapkan Stage SDK
Tiga [konsep](ios-publish-subscribe.md#ios-publish-subscribe-concepts) inti mendasari fungsionalitas real-time: panggung, strategi, dan penyaji. Tujuan desain adalah meminimalkan jumlah logika sisi klien yang diperlukan untuk membangun produk yang berfungsi.
### IVSStageStrategi
`IVSStageStrategy`Implementasi kami sederhana:
```
extension ViewController: IVSStageStrategy {
func stage(_ stage: IVSStage, streamsToPublishForParticipant participant: IVSParticipantInfo) -> [IVSLocalStageStream] {
// Return the camera and microphone to be published.
// This is only called if `shouldPublishParticipant` returns true.
return streams
}
func stage(_ stage: IVSStage, shouldPublishParticipant participant: IVSParticipantInfo) -> Bool {
// Our publish status is based directly on the UISwitch view
return switchPublish.isOn
}
func stage(_ stage: IVSStage, shouldSubscribeToParticipant participant: IVSParticipantInfo) -> IVSStageSubscribeType {
// Subscribe to both audio and video for all publishing participants.
return .audioVideo
}
}
```
Untuk meringkas, kami hanya mempublikasikan jika sakelar publikasi berada di posisi “on”, dan jika kami mempublikasikan, kami akan mempublikasikan aliran yang kami kumpulkan sebelumnya. Akhirnya, untuk sampel ini, kami selalu berlangganan peserta lain, menerima audio dan video mereka.
### IVSStagePenyaji
`IVSStageRenderer`Implementasinya juga cukup sederhana, meskipun mengingat jumlah fungsi yang berisi lebih banyak kode. Pendekatan umum dalam perender ini adalah memperbarui `participants` array kami saat SDK memberi tahu kami tentang perubahan pada peserta. Ada skenario tertentu di mana kami menangani peserta lokal secara berbeda, karena kami telah memutuskan untuk mengelolanya sendiri sehingga mereka dapat melihat pratinjau kamera mereka sebelum bergabung.
```
extension ViewController: IVSStageRenderer {
func stage(_ stage: IVSStage, didChange connectionState: IVSStageConnectionState, withError error: Error?) {
labelState.text = connectionState.text
connectingOrConnected = connectionState != .disconnected
}
func stage(_ stage: IVSStage, participantDidJoin participant: IVSParticipantInfo) {
if participant.isLocal {
// If this is the local participant joining the Stage, update the first participant in our array because we
// manually added that participant when setting up our preview
participants[0].participantId = participant.participantId
participantsChanged(index: 0, changeType: .updated)
} else {
// If they are not local, add them to the array as a newly joined participant.
participants.append(StageParticipant(isLocal: false, participantId: participant.participantId))
participantsChanged(index: (participants.count - 1), changeType: .joined)
}
}
func stage(_ stage: IVSStage, participantDidLeave participant: IVSParticipantInfo) {
if participant.isLocal {
// If this is the local participant leaving the Stage, update the first participant in our array because
// we want to keep the camera preview active
participants[0].participantId = nil
participantsChanged(index: 0, changeType: .updated)
} else {
// If they are not local, find their index and remove them from the array.
if let index = participants.firstIndex(where: { $0.participantId == participant.participantId }) {
participants.remove(at: index)
participantsChanged(index: index, changeType: .left)
}
}
}
func stage(_ stage: IVSStage, participant: IVSParticipantInfo, didChange publishState: IVSParticipantPublishState) {
// Update the publishing state of this participant
mutatingParticipant(participant.participantId) { data in
data.publishState = publishState
}
}
func stage(_ stage: IVSStage, participant: IVSParticipantInfo, didChange subscribeState: IVSParticipantSubscribeState) {
// Update the subscribe state of this participant
mutatingParticipant(participant.participantId) { data in
data.subscribeState = subscribeState
}
}
func stage(_ stage: IVSStage, participant: IVSParticipantInfo, didChangeMutedStreams streams: [IVSStageStream]) {
// We don't want to take any action for the local participant because we track those streams locally
if participant.isLocal { return }
// For remote participants, notify the UICollectionView that they have updated. There is no need to modify
// the `streams` property on the `StageParticipant` because it is the same `IVSStageStream` instance. Just
// query the `isMuted` property again.
if let index = participants.firstIndex(where: { $0.participantId == participant.participantId }) {
participantsChanged(index: index, changeType: .updated)
}
}
func stage(_ stage: IVSStage, participant: IVSParticipantInfo, didAdd streams: [IVSStageStream]) {
// We don't want to take any action for the local participant because we track those streams locally
if participant.isLocal { return }
// For remote participants, add these new streams to that participant's streams array.
mutatingParticipant(participant.participantId) { data in
data.streams.append(contentsOf: streams)
}
}
func stage(_ stage: IVSStage, participant: IVSParticipantInfo, didRemove streams: [IVSStageStream]) {
// We don't want to take any action for the local participant because we track those streams locally
if participant.isLocal { return }
// For remote participants, remove these streams from that participant's streams array.
mutatingParticipant(participant.participantId) { data in
let oldUrns = streams.map { $0.device.descriptor().urn }
data.streams.removeAll(where: { stream in
return oldUrns.contains(stream.device.descriptor().urn)
})
}
}
// A helper function to find a participant by its ID, mutate that participant, and then update the UICollectionView accordingly.
private func mutatingParticipant(_ participantId: String?, modifier: (inout StageParticipant) -> Void) {
guard let index = participants.firstIndex(where: { $0.participantId == participantId }) else {
fatalError("Something is out of sync, investigate if this was a sample app or SDK issue.")
}
var participant = participants[index]
modifier(&participant)
participants[index] = participant
participantsChanged(index: index, changeType: .updated)
}
}
```
Kode ini menggunakan ekstensi untuk mengubah status koneksi menjadi teks ramah manusia:
```
extension IVSStageConnectionState {
var text: String {
switch self {
case .disconnected: return "Disconnected"
case .connecting: return "Connecting"
case .connected: return "Connected"
@unknown default: fatalError()
}
}
}
```
## Menerapkan Kustom UICollection ViewLayout
Menempatkan jumlah peserta yang berbeda bisa menjadi rumit. Anda ingin mereka mengambil seluruh bingkai tampilan induk tetapi Anda tidak ingin menangani setiap konfigurasi peserta secara independen. Untuk membuatnya mudah, kita akan berjalan melalui penerapan a`UICollectionViewLayout`.
Buat file baru lainnya,`ParticipantCollectionViewLayout.swift`, yang harus diperluas`UICollectionViewLayout`. Kelas ini akan menggunakan kelas lain yang disebut`StageLayoutCalculator`, yang akan kita bahas segera. Kelas menerima nilai bingkai yang dihitung untuk setiap peserta dan kemudian menghasilkan `UICollectionViewLayoutAttributes` objek yang diperlukan.
```
import Foundation
import UIKit
/**
Code modified from https://developer.apple.com/documentation/uikit/views_and_controls/collection_views/layouts/customizing_collection_view_layouts?language=objc
*/
class ParticipantCollectionViewLayout: UICollectionViewLayout {
private let layoutCalculator = StageLayoutCalculator()
private var contentBounds = CGRect.zero
private var cachedAttributes = [UICollectionViewLayoutAttributes]()
override func prepare() {
super.prepare()
guard let collectionView = collectionView else { return }
cachedAttributes.removeAll()
contentBounds = CGRect(origin: .zero, size: collectionView.bounds.size)
layoutCalculator.calculateFrames(participantCount: collectionView.numberOfItems(inSection: 0),
width: collectionView.bounds.size.width,
height: collectionView.bounds.size.height,
padding: 4)
.enumerated()
.forEach { (index, frame) in
let attributes = UICollectionViewLayoutAttributes(forCellWith: IndexPath(item: index, section: 0))
attributes.frame = frame
cachedAttributes.append(attributes)
contentBounds = contentBounds.union(frame)
}
}
override var collectionViewContentSize: CGSize {
return contentBounds.size
}
override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
guard let collectionView = collectionView else { return false }
return !newBounds.size.equalTo(collectionView.bounds.size)
}
override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
return cachedAttributes[indexPath.item]
}
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
var attributesArray = [UICollectionViewLayoutAttributes]()
// Find any cell that sits within the query rect.
guard let lastIndex = cachedAttributes.indices.last, let firstMatchIndex = binSearch(rect, start: 0, end: lastIndex) else {
return attributesArray
}
// Starting from the match, loop up and down through the array until all the attributes
// have been added within the query rect.
for attributes in cachedAttributes[..= rect.minY else { break }
attributesArray.append(attributes)
}
for attributes in cachedAttributes[firstMatchIndex...] {
guard attributes.frame.minY <= rect.maxY else { break }
attributesArray.append(attributes)
}
return attributesArray
}
// Perform a binary search on the cached attributes array.
func binSearch(_ rect: CGRect, start: Int, end: Int) -> Int? {
if end < start { return nil }
let mid = (start + end) / 2
let attr = cachedAttributes[mid]
if attr.frame.intersects(rect) {
return mid
} else {
if attr.frame.maxY < rect.minY {
return binSearch(rect, start: (mid + 1), end: end)
} else {
return binSearch(rect, start: start, end: (mid - 1))
}
}
}
}
```
Yang lebih penting adalah `StageLayoutCalculator.swift` kelas. Ini dirancang untuk menghitung frame untuk setiap peserta berdasarkan jumlah peserta dalam row/column tata letak berbasis aliran. Setiap baris memiliki tinggi yang sama dengan yang lain, tetapi kolom dapat memiliki lebar yang berbeda per baris. Lihat komentar kode di atas `layouts` variabel untuk deskripsi tentang cara menyesuaikan perilaku ini.
```
import Foundation
import UIKit
class StageLayoutCalculator {
/// This 2D array contains the description of how the grid of participants should be rendered
/// The index of the 1st dimension is the number of participants needed to active that configuration
/// Meaning if there is 1 participant, index 0 will be used. If there are 5 participants, index 4 will be used.
///
/// The 2nd dimension is a description of the layout. The length of the array is the number of rows that
/// will exist, and then each number within that array is the number of columns in each row.
///
/// See the code comments next to each index for concrete examples.
///
/// This can be customized to fit any layout configuration needed.
private let layouts: [[Int]] = [
// 1 participant
[ 1 ], // 1 row, full width
// 2 participants
[ 1, 1 ], // 2 rows, all columns are full width
// 3 participants
[ 1, 2 ], // 2 rows, first row's column is full width then 2nd row's columns are 1/2 width
// 4 participants
[ 2, 2 ], // 2 rows, all columns are 1/2 width
// 5 participants
[ 1, 2, 2 ], // 3 rows, first row's column is full width, 2nd and 3rd row's columns are 1/2 width
// 6 participants
[ 2, 2, 2 ], // 3 rows, all column are 1/2 width
// 7 participants
[ 2, 2, 3 ], // 3 rows, 1st and 2nd row's columns are 1/2 width, 3rd row's columns are 1/3rd width
// 8 participants
[ 2, 3, 3 ],
// 9 participants
[ 3, 3, 3 ],
// 10 participants
[ 2, 3, 2, 3 ],
// 11 participants
[ 2, 3, 3, 3 ],
// 12 participants
[ 3, 3, 3, 3 ],
]
// Given a frame (this could be for a UICollectionView, or a Broadcast Mixer's canvas), calculate the frames for each
// participant, with optional padding.
func calculateFrames(participantCount: Int, width: CGFloat, height: CGFloat, padding: CGFloat) -> [CGRect] {
if participantCount > layouts.count {
fatalError("Only \(layouts.count) participants are supported at this time")
}
if participantCount == 0 {
return []
}
var currentIndex = 0
var lastFrame: CGRect = .zero
// If the height is less than the width, the rows and columns will be flipped.
// Meaning for 6 participants, there will be 2 rows of 3 columns each.
let isVertical = height > width
let halfPadding = padding / 2.0
let layout = layouts[participantCount - 1] // 1 participant is in index 0, so `-1`.
let rowHeight = (isVertical ? height : width) / CGFloat(layout.count)
var frames = [CGRect]()
for row in 0 ..< layout.count {
// layout[row] is the number of columns in a layout
let itemWidth = (isVertical ? width : height) / CGFloat(layout[row])
let segmentFrame = CGRect(x: (isVertical ? 0 : lastFrame.maxX) + halfPadding,
y: (isVertical ? lastFrame.maxY : 0) + halfPadding,
width: (isVertical ? itemWidth : rowHeight) - padding,
height: (isVertical ? rowHeight : itemWidth) - padding)
for column in 0 ..< layout[row] {
var frame = segmentFrame
if isVertical {
frame.origin.x = (itemWidth * CGFloat(column)) + halfPadding
} else {
frame.origin.y = (itemWidth * CGFloat(column)) + halfPadding
}
frames.append(frame)
currentIndex += 1
}
lastFrame = segmentFrame
lastFrame.origin.x += halfPadding
lastFrame.origin.y += halfPadding
}
return frames
}
}
```
Kembali`Main.storyboard`, pastikan untuk mengatur kelas tata letak untuk kelas yang baru saja kita buat: `UICollectionView`
![\[Xcode interface showing storyboard with UICollectionView and its layout settings.\]](http://docs.aws.amazon.com/id_id/ivs/latest/RealTimeUserGuide/images/Publish_iOS_12.png)
## Menghubungkan Tindakan UI
Kami semakin dekat, ada beberapa `IBActions` yang perlu kami buat.
Pertama kita akan menangani tombol join. Ini merespons secara berbeda berdasarkan nilai. `connectingOrConnected` Ketika sudah terhubung, itu hanya meninggalkan panggung. Jika terputus, ia membaca teks dari token `UITextField` dan membuat yang baru `IVSStage` dengan teks itu. Kemudian kita menambahkan kita `ViewController` sebagai`strategy`,`errorDelegate`, dan renderer untuk`IVSStage`, dan akhirnya kita bergabung dengan panggung secara asinkron.
```
@IBAction private func joinTapped(_ sender: UIButton) {
if connectingOrConnected {
// If we're already connected to a Stage, leave it.
stage?.leave()
} else {
guard let token = textFieldToken.text else {
print("No token")
return
}
// Hide the keyboard after tapping Join
textFieldToken.resignFirstResponder()
do {
// Destroy the old Stage first before creating a new one.
self.stage = nil
let stage = try IVSStage(token: token, strategy: self)
stage.errorDelegate = self
stage.addRenderer(self)
try stage.join()
self.stage = stage
} catch {
print("Failed to join stage - \(error)")
}
}
}
```
Tindakan UI lain yang perlu kita hubungkan adalah sakelar publikasikan:
```
@IBAction private func publishToggled(_ sender: UISwitch) {
// Because the strategy returns the value of `switchPublish.isOn`, just call `refreshStrategy`.
stage?.refreshStrategy()
}
```
## Rendering Peserta
Akhirnya, kita perlu merender data yang kita terima dari SDK ke sel peserta yang kita buat sebelumnya. Kami sudah menyelesaikan `UICollectionView` logika, jadi kami hanya perlu mengimplementasikan `set` API di`ParticipantCollectionViewCell.swift`.
Kita akan mulai dengan menambahkan `empty` fungsi dan kemudian berjalan melalui langkah demi langkah:
```
func set(participant: StageParticipant) {
}
```
Pertama kita menangani status mudah, ID peserta, status publikasi, dan status berlangganan. Untuk ini, kami hanya memperbarui kami `UILabels` secara langsung:
```
labelParticipantId.text = participant.isLocal ? "You (\(participant.participantId ?? "Disconnected"))" : participant.participantId
labelPublishState.text = participant.publishState.text
labelSubscribeState.text = participant.subscribeState.text
```
Properti teks dari mempublikasikan dan berlangganan enum berasal dari ekstensi lokal:
```
extension IVSParticipantPublishState {
var text: String {
switch self {
case .notPublished: return "Not Published"
case .attemptingPublish: return "Attempting to Publish"
case .published: return "Published"
@unknown default: fatalError()
}
}
}
extension IVSParticipantSubscribeState {
var text: String {
switch self {
case .notSubscribed: return "Not Subscribed"
case .attemptingSubscribe: return "Attempting to Subscribe"
case .subscribed: return "Subscribed"
@unknown default: fatalError()
}
}
}
```
Selanjutnya kami memperbarui status audio dan video yang diredam. Untuk mendapatkan status yang diredam kita perlu menemukan `IVSImageDevice` dan `IVSAudioDevice` dari `streams` array. Untuk mengoptimalkan kinerja, kami akan mengingat perangkat terakhir yang terpasang.
```
// This belongs outside `set(participant:)`
private var registeredStreams: Set = []
private var imageDevice: IVSImageDevice? {
return registeredStreams.lazy.compactMap { $0.device as? IVSImageDevice }.first
}
private var audioDevice: IVSAudioDevice? {
return registeredStreams.lazy.compactMap { $0.device as? IVSAudioDevice }.first
}
// This belongs inside `set(participant:)`
let existingAudioStream = registeredStreams.first { $0.device is IVSAudioDevice }
let existingImageStream = registeredStreams.first { $0.device is IVSImageDevice }
registeredStreams = Set(participant.streams)
let newAudioStream = participant.streams.first { $0.device is IVSAudioDevice }
let newImageStream = participant.streams.first { $0.device is IVSImageDevice }
// `isMuted != false` covers the stream not existing, as well as being muted.
labelVideoMuted.text = "Video Muted: \(newImageStream?.isMuted != false)"
labelAudioMuted.text = "Audio Muted: \(newAudioStream?.isMuted != false)"
```
Akhirnya kami ingin membuat pratinjau untuk `imageDevice` dan menampilkan statistik audio dari`audioDevice`:
```
if existingImageStream !== newImageStream {
// The image stream has changed
updatePreview() // We’ll cover this next
}
if existingAudioStream !== newAudioStream {
(existingAudioStream?.device as? IVSAudioDevice)?.setStatsCallback(nil)
audioDevice?.setStatsCallback( { [weak self] stats in
self?.labelAudioVolume.text = String(format: "Audio Level: %.0f dB", stats.rms)
})
// When the audio stream changes, it will take some time to receive new stats. Reset the value temporarily.
self.labelAudioVolume.text = "Audio Level: -100 dB"
}
```
Fungsi terakhir yang perlu kita buat adalah`updatePreview()`, yang menambahkan pratinjau peserta ke tampilan kita:
```
private func updatePreview() {
// Remove any old previews from the preview container
viewPreviewContainer.subviews.forEach { $0.removeFromSuperview() }
if let imageDevice = self.imageDevice {
if let preview = try? imageDevice.previewView(with: .fit) {
viewPreviewContainer.addSubviewMatchFrame(preview)
}
}
}
```
Di atas menggunakan fungsi pembantu `UIView` untuk mempermudah penyematan subview:
```
extension UIView {
func addSubviewMatchFrame(_ view: UIView) {
view.translatesAutoresizingMaskIntoConstraints = false
self.addSubview(view)
NSLayoutConstraint.activate([
view.topAnchor.constraint(equalTo: self.topAnchor, constant: 0),
view.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: 0),
view.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 0),
view.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: 0),
])
}
}
```