# Paso 5: publicar y suscribirse a videos
Puede publicar o suscribirse (en tiempo real) en IVS con:
+ Los [SDK de transmisión nativos de IVS](https://docs.aws.amazon.com//ivs/latest/LowLatencyUserGuide/getting-started-set-up-streaming.html#broadcast-sdk), que admiten WebRTC y RTMPS. Lo recomendamos, especialmente para escenarios de producción. Consulte los detalles que aparecen a continuación para la [web](getting-started-pub-sub-web.md), [Android](getting-started-pub-sub-android.md) y [iOS](getting-started-pub-sub-ios.md).
+ La consola de Amazon IVS: es adecuada para probar transmisiones. Consulte a continuación.
+ Otros codificadores de software y hardware de transmisión: puede usar cualquier codificador de transmisión que sea compatible con los protocolos RTMP, RTMPS o WHIP. Para obtener más información, consulte [Ingesta de transmisiones](rt-stream-ingest.md).
## Consola de IVS
1. Abra la [consola de Amazon IVS](https://console.aws.amazon.com/ivs).
(También puede obtener acceso a la consola de Amazon IVS mediante la [consola de administración de AWS](https://console.aws.amazon.com/)).
1. En el panel de navegación, seleccione **Fases**. (Si el panel de navegación está contraído, amplíelo seleccionando el icono de la hamburguesa).
1. Seleccione la fase a la que desee suscribirse o en la que quiera publicar para ir a su página de detalles.
1. Suscripción: si la fase tiene uno o más publicadores, puede pulsar el botón **Suscribirse**, en la pestaña **Suscribirse**, para suscribirse a ella. (Las pestañas están debajo de la sección **Configuración general**).
1. Publicación:
1. Seleccione la pestaña **Publicar**.
1. Se le pedirá que conceda a la consola de IVS acceso a su cámara y micrófono; **permita** esos permisos.
1. En la parte inferior de la pestaña **Publicar**, utilice los cuadros desplegables para seleccionar los dispositivos de entrada para el micrófono y la cámara.
1. Para empezar a publicar, seleccione **Empezar a publicar**.
1. Para ver el contenido publicado, vuelva a la pestaña **Suscribirse**.
1. Para dejar de publicar, vaya a la pestaña **Publicar** y pulse el botón **Dejar de publicar** situado hacia la parte inferior.
**Nota**: La suscripción y la publicación consumen recursos y se le cobrará una tarifa por hora durante el tiempo que permanezca conectado a la fase. Para obtener más información, consulte [Streaming en tiempo real](https://aws.amazon.com/ivs/pricing/#Real-Time_Streaming) en la página de precios de IVS.
# Publicación y suscripción con el SDK de transmisión para web de IVS
En esta sección se explican los pasos necesarios para publicar y suscribirse a una fase mediante una aplicación web.
## Creación de una plantilla HTML reutilizable
Primero, creemos la plantilla HTML reutilizable e importemos la biblioteca como una etiqueta script:
```
```
## Configuración de la entrada de tokens y adición de botones de unión y salida
Aquí completamos el cuerpo con nuestros controles de entrada. Estos toman como entrada el token y configuran botones de **unión** y **salida**. Por lo general, las aplicaciones solicitarán el token a la API de la aplicación, pero, en este ejemplo, tiene que copiar y pegar el token en la entrada del token.
```
IVS Real-Time Streaming
```
## Adición de elementos de contenedor multimedia
Estos elementos albergarán el contenido multimedia para nuestros participantes locales y remotos. Agregamos una etiqueta script para cargar la lógica de nuestra aplicación definida en `app.js`.
```
```
Esto completa la página HTML y debería ver esto al cargar `index.html` en un navegador:
![\[Vea transmisión en tiempo real en un navegador: configuración del HTML completada.\]](http://docs.aws.amazon.com/es_es/ivs/latest/RealTimeUserGuide/images/RT_Browser_View.png)
## Creación de app.js
Pasemos a definir el contenido de nuestro archivo `app.js`. Comience por importar todas las propiedades necesarias de la versión global del SDK:
```
const {
Stage,
LocalStageStream,
SubscribeType,
StageEvents,
ConnectionState,
StreamType
} = IVSBroadcastClient;
```
## Creación de las variables de la aplicación
Configure variables que contengan referencias a nuestros botones HTML de **unión** y **salida** y al estado de la aplicación:
```
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;
```
## Creación de joinStage 1: definición de la función y validación de la entrada
La función `joinStage` toma el token de entrada, crea una conexión con el escenario y comienza a publicar el video y el audio recuperados de `getUserMedia`.
Para empezar, definimos la función y validamos el estado y la entrada del token. Vamos a desarrollar esta función en las próximas secciones.
```
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
};
```
## Creación de joinStage 2: obtención de contenido multimedia para su publicación
Este es el contenido multimedia que se publicará en el escenario:
```
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]);
```
## Creación de joinStage 3: definición de la estrategia escénica y creación del escenario
Esta estrategia de escenarios es la base de la lógica de decisión que utiliza el SDK para decidir qué publicar y a qué participantes suscribirse. Para obtener más información sobre el propósito de la función, consulte [Estrategia](web-publish-subscribe.md#web-publish-subscribe-concepts-strategy).
Esta estrategia es sencilla. Cuando se una al escenario, publique las transmisiones que acabamos de recuperar y suscríbase al contenido de audio y video de todos los participantes remotos:
```
const strategy = {
stageStreamsToPublish() {
return [cameraStageStream, micStageStream];
},
shouldPublishParticipant() {
return true;
},
shouldSubscribeToParticipant() {
return SubscribeType.AUDIO_VIDEO;
}
};
stage = new Stage(token, strategy);
```
## Creación de joinStage 4: gestión de los eventos del escenario y renderización del contenido multimedia
Los escenarios emiten muchos eventos. Tendremos que escuchar los eventos `STAGE_PARTICIPANT_STREAMS_ADDED` y `STAGE_PARTICIPANT_LEFT` para renderizar y eliminar contenido multimedia hacia y desde la página. Puede encontrar un conjunto más exhaustivo de eventos en [Eventos](web-publish-subscribe.md#web-publish-subscribe-concepts-events).
Tenga en cuenta que creamos cuatro funciones auxiliares para poder administrar los elementos del DOM necesarios: `setupParticipant`, `teardownParticipant`, `createVideoEl` y `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;
}
```
## Creación de joinStage 5: unión al escenario
Vamos a unirnos por fin al escenario para completar la función `joinStage`.
```
try {
await stage.join();
} catch (err) {
joining = false;
connected = false;
console.error(err.message);
}
```
## Creación de leaveStage
Defina la función `leaveStage` que invocará el botón de salida.
```
const leaveStage = async () => {
stage.leave();
joining = false;
connected = false;
};
```
## Inicialización de los controladores de eventos de entrada
Agregaremos una última función al archivo `app.js`. Esta función se invoca inmediatamente cuando se carga la página y establece controladores de eventos para unirse al escenario y salir de este.
```
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
```
## Ejecute la aplicación y proporcione un token
En este punto, puede compartir la página web de forma local o con otras personas, [abrir la página](#getting-started-pub-sub-web-media), introducir un token de participante y unirte al escenario.
## Pasos siguientes
Para ver ejemplos más detallados sobre npm, React y otros, consulta la [Guía web del SDK de transmisión de IVS (Guía de transmisión en tiempo real)](broadcast-web.md).
# Publicación y suscripción con el SDK de transmisión para Android de IVS
En esta sección se explican los pasos necesarios para publicar y suscribirse a una fase mediante una aplicación Android.
## Creación de vistas
Empezamos por crear un diseño simple para nuestra aplicación con el archivo `activity_main.xml` creado automáticamente. El diseño contiene `EditText` para agregar un token, un `Button` de unión, `TextView` para mostrar el estado del escenario y `CheckBox` para cambiar la publicación.
![\[Configure el diseño de publicación de su aplicación de Android.\]](http://docs.aws.amazon.com/es_es/ivs/latest/RealTimeUserGuide/images/Publish_Android_1.png)
Este es el XML que hay detrás de la vista:
```
```
Aquí hacemos referencia a los ID de un par de cadenas, así que es el momento de crear todo el archivo `strings.xml`:
```
BasicRealTimeJoinLeaveParticipant TokenPublishState: %1$s
```
Vamos a vincular esas vistas del XML a nuestro `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)
}
```
Ahora crearemos una vista de elementos para `RecyclerView`. Para ello, haga clic con el botón derecho en el directorio `res/layout` y seleccione **Nuevo > Archivo de recursos de diseño**. Asigne a este archivo el nombre `item_stage_participant.xml`.
![\[Cree una vista de elementos para su aplicación de Android RecyclerView.\]](http://docs.aws.amazon.com/es_es/ivs/latest/RealTimeUserGuide/images/Publish_Android_2.png)
El diseño de este elemento es sencillo: contiene una vista para renderizar la transmisión de video de un participante y una lista de etiquetas para mostrar información sobre el participante:
![\[Cree una vista de elementos para su aplicación de Android RecyclerView: etiquetas.\]](http://docs.aws.amazon.com/es_es/ivs/latest/RealTimeUserGuide/images/Publish_Android_3.png)
Este es el XML:
```
```
Este archivo XML infla una clase que aún no hemos creado, `ParticipantItem`. Como el XML incluye el espacio de nombres completo, asegúrese de actualizar este archivo XML en su espacio de nombres. Vamos a crear esta clase y configurar las vistas, aunque lo vamos a dejar en blanco por ahora.
Cree una nueva clase de Kotlin, `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)
}
}
```
## Permisos
Para utilizar la cámara y el micrófono, debe solicitar permisos al usuario. Para ello, seguimos un flujo de permisos estándar:
```
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
}
}
```
## Estado de la aplicación
Nuestra aplicación hace un seguimiento de los participantes en el entorno local en un archivo `MainViewModel.kt`. El estado se comunicará de nuevo a `MainActivity` mediante [StateFlow](https://kotlinlang.org/api/kotlinx.coroutines/kotlinx-coroutines-core/kotlinx.coroutines.flow/-state-flow/) de Kotlin.
Cree una nueva clase de Kotlin (`MainViewModel`):
```
package com.amazonaws.ivs.realtime.basicrealtime
import android.app.Application
import androidx.lifecycle.AndroidViewModel
class MainViewModel(application: Application) : AndroidViewModel(application), Stage.Strategy, StageRenderer {
}
```
En `MainActivity.kt`, administramos el modelo de la vista:
```
import androidx.activity.viewModels
private val viewModel: MainViewModel by viewModels()
```
Para usar `AndroidViewModel` y las extensiones `ViewModel` de Kotlin, tendrá que agregar lo siguiente al archivo `build.gradle` del módulo:
```
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'
```
### Adaptador RecyclerView
Crearemos una subclase `RecyclerView.Adapter` sencilla para hacer un seguimiento de nuestros participantes y actualizar `RecyclerView` en los eventos del escenario. Pero antes, necesitamos una clase que represente a un participante. Cree una nueva clase de Kotlin (`StageParticipant`):
```
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)
}
}
}
```
Usaremos esta clase en la clase `ParticipantAdapter` que crearemos a continuación. Empezamos por definir la clase y crear una variable para hacer un seguimiento de los participantes:
```
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()
```
También tenemos que definir `RecyclerView.ViewHolder` antes de implementar el resto de las anulaciones:
```
class ViewHolder(val participantItem: ParticipantItem) : RecyclerView.ViewHolder(participantItem)
```
Con esto, podemos implementar las anulaciones de `RecyclerView.Adapter` estándar:
```
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)
}
}
```
Por último, agregamos nuevos métodos a los que llamaremos desde `MainViewModel` cuando se hagan cambios en los participantes. Estos métodos son operaciones CRUD estándar en el adaptador.
```
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])
}
}
```
En `MainViewModel`, tenemos que crear y mantener una referencia a este adaptador:
```
internal val participantAdapter = ParticipantAdapter()
```
## Estado de la etapa
También tenemos que hacer un seguimiento del estado de algunos escenarios en `MainViewModel`. Definamos esas propiedades ahora:
```
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()
```
Para ver su propia vista previa antes de unirse a un escenario, creamos inmediatamente un participante local:
```
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)
}
```
Queremos asegurarnos de borrar estos recursos cuando se elimine `ViewModel`. Anulamos `onCleared()` directamente para así no olvidarnos de eliminar estos recursos.
```
override fun onCleared() {
stage?.release()
deviceDiscovery?.release()
deviceDiscovery = null
super.onCleared()
}
```
A continuación, completamos la propiedad `streams` local nada más recibir los permisos e implementamos el método `permissionsGranted` al que llamamos anteriormente:
```
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)
}
}
```
## Implementación del SDK de escenarios
Los siguientes tres [conceptos](android-publish-subscribe.md#android-publish-subscribe-concepts) básicos subyacen a la funcionalidad de transmisión en tiempo real: escenario, estrategia y renderizador. El objetivo del diseño es minimizar la cantidad de lógica necesaria por parte del cliente para crear un producto que funcione.
### Stage.Strategy
La implementación de `Stage.Strategy` es sencilla:
```
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
}
```
En resumen, la publicación depende del estado de la variable `publishEnabled` interna y, si publicamos, publicaremos las transmisiones que recopilamos anteriormente. Por último, en este ejemplo, siempre nos suscribimos a otros participantes y recibimos tanto su contenido de audio como de video.
### StageRenderer
La implementación de `StageRenderer` también es bastante simple, aunque, dada la cantidad de funciones, contiene bastante más código. El enfoque general de este renderizador es actualizar `ParticipantAdapter` cuando el SDK nos notifique un cambio en un participante. Hay ciertos casos en los que tratamos a los participantes locales de forma diferente, porque hemos decidido administrarlos por nuestra cuenta para que puedan ver la vista previa de la cámara antes de unirse.
```
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) {}
}
```
## Implementación de LayoutManager de RecyclerView personalizado
Establecer diferentes números de participantes puede resultar complejo. Lo ideal es que ocupen todo el marco de la vista principal, pero gestionar la configuración de cada participante de forma independiente no es la mejor forma de lograrlo. Para facilitarlo, veremos cómo implementar `RecyclerView.LayoutManager`.
Cree otra clase, `StageLayoutManager`, que debería ampliar `GridLayoutManager`. Esta clase está pensada para calcular cómo se mostrará cada participante en función del número de participantes en un diseño de filas o columnas basado en flujos. Cada fila tiene la misma altura que las demás, pero las columnas pueden tener diferentes anchuras por fila. Consulte el comentario del código que aparece sobre la variable `layouts` para ver cómo personalizar este comportamiento.
```
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
}
```
En `MainActivity.kt`, tenemos que configurar el adaptador y el administrador de diseño de `RecyclerView`:
```
// In onCreate after setting recyclerView.
recyclerView.layoutManager = StageLayoutManager(this)
recyclerView.adapter = viewModel.participantAdapter
```
## Enlace de acciones de la interfaz de usuario
Ya casi está, solo tenemos que enlazar algunas acciones de la interfaz de usuario.
Primero, tenemos que hacer que `MainActivity` supervise los cambios en `StateFlow` desde `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)
}
}
}
```
A continuación, agregamos los oyentes a nuestro botón de unión y a la casilla de publicación:
```
buttonJoin.setOnClickListener {
viewModel.joinStage(editTextToken.text.toString())
}
checkboxPublish.setOnCheckedChangeListener { _, isChecked ->
viewModel.setPublishEnabled(isChecked)
}
```
Ambos elementos llaman a funciones en `MainViewModel`, lo cual implementaremos ahora:
```
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
}
```
## Renderización de los participantes
Por último, tenemos que renderizar los datos que recibimos del SDK en el elemento de participante que creamos anteriormente. Ya hemos completado la lógica de `RecyclerView`, por lo que solo tenemos que implementar la API `bind` en `ParticipantItem`.
Empezamos por agregar la función vacía y, luego, la analizaremos paso a paso:
```
fun bind(participant: StageParticipant) {
}
```
Primero, analizaremos el estado sencillo, el ID del participante, el estado de la publicación y el estado de la suscripción. Para hacerlo, tan solo actualizamos `TextViews` directamente:
```
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
```
A continuación, actualizaremos los estados silenciados de audio y video. Para obtener el estado silenciado, tenemos que encontrar el `ImageDevice` y el `AudioDevice` de la matriz de transmisiones. Para optimizar el rendimiento, recordamos los últimos ID de los dispositivos conectados.
```
// 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"
}
```
Por último, queremos renderizar una vista previa de `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
```
Y mostramos las estadísticas de audio de `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
```
# Publicación y suscripción con el SDK de transmisión para iOS de IVS
En esta sección se explican los pasos necesarios para publicar y suscribirse a una fase mediante una aplicación iOS.
## Creación de vistas
Lo primero es usar el archivo `ViewController.swift` creado automáticamente para importar `AmazonIVSBroadcast` y, luego, agregar algunas `@IBOutlets` que vincular:
```
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!
```
Ahora creamos esas vistas y las vinculamos en `Main.storyboard`. Esta es la estructura de vistas que utilizaremos:
![\[Use Main.storyboard para crear una vista de iOS.\]](http://docs.aws.amazon.com/es_es/ivs/latest/RealTimeUserGuide/images/Publish_iOS_1.png)
Para configurar AutoLayout, tenemos que personalizar tres vistas. La primera vista es **Vista de colección de participantes** (una `UICollectionView`). Alinee **Inicial**, **Final** e **Inferior** con respecto a **Área segura**. Alinee también **Superior** con respecto a **Contenedor de controles**.
![\[Personalice la Vista de colección de participantes de iOS.\]](http://docs.aws.amazon.com/es_es/ivs/latest/RealTimeUserGuide/images/Publish_iOS_2.png)
La segunda vista es **Contenedor de controles**. Alinee **Inicial**, **Final** y **Superior** con respecto a **Área segura**:
![\[Personalice la vista Contenedor de controles de iOS.\]](http://docs.aws.amazon.com/es_es/ivs/latest/RealTimeUserGuide/images/Publish_iOS_3.png)
La tercera y última vista es **Vista de pila vertical**. Alinee **Superior**, **Inicial**, **Final** e **Inferior** con respecto a **Supervista**. En cuanto al diseño, establezca el espaciado en 8 en lugar de en 0.
![\[Personalice la vista de pila vertical de iOS.\]](http://docs.aws.amazon.com/es_es/ivs/latest/RealTimeUserGuide/images/Publish_iOS_4.png)
Las **UIStackViews** se encargarán del diseño de las vistas restantes. En las tres **UIStackViews**, seleccione la opción **Relleno** para **Alineación** y **Distribución**.
![\[Personalice el resto de las vistas de iOS con UIStackViews.\]](http://docs.aws.amazon.com/es_es/ivs/latest/RealTimeUserGuide/images/Publish_iOS_5.png)
Por último, vinculemos estas vistas a nuestro `ViewController`. Desde arriba, asigne las siguientes vistas:
+ El **campo de texto de unión** se asigna a `textFieldToken`.
+ El **botón de unión** se asigna a `buttonJoin`.
+ La **etiqueta de estado** se asigna a `labelState`.
+ El **botón de publicación** se asigna a `switchPublish`.
+ **Vista de colección de participantes** se asigna a `collectionViewParticipants`.
Aproveche también para establecer el `dataSource` del elemento **Vista de colección de participantes** en el `ViewController` propietario:
![\[Configure el dataSource de Vista de colección de participantes de la aplicación de iOS.\]](http://docs.aws.amazon.com/es_es/ivs/latest/RealTimeUserGuide/images/Publish_iOS_6.png)
Ahora creamos la subclase `UICollectionViewCell` en la que se renderizarán los participantes. Lo primero es crear un nuevo archivo **Cocoa Touch Class**:
![\[Cree una UICollectionViewCell para renderizar los participantes de iOS en tiempo real.\]](http://docs.aws.amazon.com/es_es/ivs/latest/RealTimeUserGuide/images/Publish_iOS_7.png)
Asígnele el nombre `ParticipantUICollectionViewCell` y conviértala en una subclase de `UICollectionViewCell` en Swift. Volvemos al archivo de Swift y creamos `@IBOutlets` que vincular:
```
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!
```
En el archivo XIB asociado, cree esta jerarquía de vistas:
![\[Cree una jerarquía de vistas de iOS en el archivo XIB asociado.\]](http://docs.aws.amazon.com/es_es/ivs/latest/RealTimeUserGuide/images/Publish_iOS_8.png)
En AutoLayout, volveremos a modificar tres vistas. La primera vista es **Vista previa de contenedores**. Alinee **Final**, **Inicial**, **Superior** e **Inferior** con respecto a **Celda de vista de colección de participantes**.
![\[Personalice la Vista previa de contenedores de iOS.\]](http://docs.aws.amazon.com/es_es/ivs/latest/RealTimeUserGuide/images/Publish_iOS_9.png)
La segunda vista es **Vista**. Alinee **Inicial** y **Superior** con respecto a **Celda de vista de colección de participantes** y cambie el valor a 4.
![\[Personalice la vista de iOS.\]](http://docs.aws.amazon.com/es_es/ivs/latest/RealTimeUserGuide/images/Publish_iOS_10.png)
La tercera vista es **Vista de pila**. Alinee **Final**, **Inicial**, **Superior** e **Inferior** con respecto a **Supervista** y cambie el valor a 4.
![\[Personalice la vista de pila de iOS.\]](http://docs.aws.amazon.com/es_es/ivs/latest/RealTimeUserGuide/images/Publish_iOS_11.png)
## Permisos y temporizador de inactividad
En `ViewController`, tenemos que desactivar el temporizador de inactividad del sistema para evitar que el dispositivo entre en estado de suspensión mientras se esté utilizando nuestra aplicación:
```
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
}
```
A continuación, solicitamos los permisos de cámara y micrófono del sistema:
```
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)
}
}
```
## Estado de la aplicación
Tenemos que configurar `collectionViewParticipants` con el archivo de diseño que creamos anteriormente:
```
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")
}
```
Para representar a cada participante, creamos una estructura simple llamada `StageParticipant`. Esta puede incluirse en el archivo `ViewController.swift`, aunque también se puede crear un archivo nuevo.
```
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
}
}
```
Para hacer un seguimiento de esos participantes, los guardamos en una matriz que sea una propiedad privada de `ViewController`:
```
private var participants = [StageParticipant]()
```
Esta propiedad se utilizará para facilitar información al `UICollectionViewDataSource` que enlazamos en el guion gráfico anterior:
```
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'")
}
}
}
```
Para ver su propia vista previa antes de unirse a un escenario, creamos inmediatamente un participante local:
```
override func viewDidLoad() {
/* existing UICollectionView code */
participants.append(StageParticipant(isLocal: true, participantId: nil))
}
```
Esto hace que la celda de un participante se renderice inmediatamente cuando se ejecute la aplicación. La celda representa al participante local.
Los usuarios quieren poder verse antes de unirse a un escenario, por lo que, a continuación, implementamos el método `setupLocalUser()`. El código de gestión de permisos anterior se encarga de llamar a este método. Almacenamos la referencia de la cámara y el micrófono como objetos de `IVSLocalStageStream`.
```
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)
}
```
Con esto detectamos la cámara y el micrófono del dispositivo a través del SDK y los almacenamos en nuestro objeto `streams` local. A continuación, asignamos la matriz `streams` del primer participante (el participante local que creamos anteriormente) a `streams`. Por último, llamamos a `participantsChanged` con un `index` de 0 y un `changeType` con el valor `updated`. Esta es una función auxiliar para actualizar `UICollectionView` con bonitas animaciones. Este es el resultado:
```
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)])
}
}
```
No se preocupe por `cell.set` aún, lo veremos luego, pero ahí es donde renderizaremos el contenido de la celda en función del participante.
`ChangeType` es una enumeración simple:
```
enum ChangeType {
case joined, updated, left
}
```
Lo último es ver si el escenario está conectado. Usamos un simple valor `bool` para comprobarlo. Cuando este valor se actualice, actualizará automáticamente nuestra interfaz de usuario.
```
private var connectingOrConnected = false {
didSet {
buttonJoin.setTitle(connectingOrConnected ? "Leave" : "Join", for: .normal)
buttonJoin.tintColor = connectingOrConnected ? .systemRed : .systemBlue
}
}
```
## Implementación del SDK de escenarios
Los siguientes tres [conceptos](ios-publish-subscribe.md#ios-publish-subscribe-concepts) básicos subyacen a la funcionalidad de transmisión en tiempo real: escenario, estrategia y renderizador. El objetivo del diseño es minimizar la cantidad de lógica necesaria por parte del cliente para crear un producto que funcione.
### IVSStageStrategy
La implementación de `IVSStageStrategy` es sencilla:
```
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
}
}
```
En resumen, solo publicamos si la opción de publicación está activada. Si publicamos, publicaremos las transmisiones que hemos recopilado anteriormente. Por último, en este ejemplo, siempre nos suscribimos a otros participantes y recibimos tanto su contenido de audio como de video.
### IVSStageRenderer
La implementación de `IVSStageRenderer` también es bastante simple, aunque, dada la cantidad de funciones, contiene bastante más código. El enfoque general de este renderizador es actualizar la matriz `participants` cuando el SDK nos notifique un cambio en un participante. Hay ciertos casos en los que tratamos a los participantes locales de forma diferente, porque hemos decidido administrarlos por nuestra cuenta para que puedan ver la vista previa de la cámara antes de unirse.
```
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)
}
}
```
Este código usa una extensión para convertir el estado de conexión en texto legible para nosotros:
```
extension IVSStageConnectionState {
var text: String {
switch self {
case .disconnected: return "Disconnected"
case .connecting: return "Connecting"
case .connected: return "Connected"
@unknown default: fatalError()
}
}
}
```
## Implementación de UICollectionViewLayout personalizado
Establecer diferentes números de participantes puede resultar complejo. Lo ideal es que ocupen todo el marco de la vista principal, pero gestionar la configuración de cada participante de forma independiente no es la mejor forma de lograrlo. Para facilitarlo, veremos cómo implementar `UICollectionViewLayout`.
Cree otro archivo, `ParticipantCollectionViewLayout.swift`, que debería ampliar `UICollectionViewLayout`. Esta clase usará otra clase llamada `StageLayoutCalculator`, que veremos pronto. La clase recibe los valores de marco calculados para cada participante y, a continuación, genera los objetos de `UICollectionViewLayoutAttributes` necesarios.
```
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))
}
}
}
}
```
La clase `StageLayoutCalculator.swift` es más importante. Esto está pensado para calcular los marcos de cada participante en función del número de participantes en un diseño de filas o columnas basado en flujos. Cada fila tiene la misma altura que las demás, pero las columnas pueden tener diferentes anchuras por fila. Consulte el comentario del código que aparece sobre la variable `layouts` para ver cómo personalizar este comportamiento.
```
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
}
}
```
En `Main.storyboard`, asegúrese de establecer la clase que acabamos de crear como la clase de diseño de `UICollectionView`:
![\[Xcode interface showing storyboard with UICollectionView and its layout settings.\]](http://docs.aws.amazon.com/es_es/ivs/latest/RealTimeUserGuide/images/Publish_iOS_12.png)
## Enlace de acciones de la interfaz de usuario
Ya casi hemos terminado, pero aún tenemos que crear unas cuantas `IBActions`.
Primero, nos encargamos del botón de unión. Responde de manera diferente en función del valor de `connectingOrConnected`. Cuando está conectado, simplemente abandona el escenario. Si está desconectado, lee el texto del token `UITextField` y crea un nuevo `IVSStage` con ese texto. A continuación, agregamos `ViewController` como `strategy`, `errorDelegate` y renderizador para `IVSStage`. Finalmente, nos unimos al escenario de forma asíncrona.
```
@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)")
}
}
}
```
La otra acción de la interfaz de usuario que tenemos que enlazar es la opción de publicación:
```
@IBAction private func publishToggled(_ sender: UISwitch) {
// Because the strategy returns the value of `switchPublish.isOn`, just call `refreshStrategy`.
stage?.refreshStrategy()
}
```
## Renderización de los participantes
Por último, tenemos que renderizar los datos que recibimos del SDK en la celda de participante que creamos anteriormente. Ya hemos completado la lógica de `UICollectionView`, por lo que solo tenemos que implementar la API `set` en `ParticipantCollectionViewCell.swift`.
Empezamos por agregar la función `empty` y, luego, la analizaremos paso a paso:
```
func set(participant: StageParticipant) {
}
```
Primero, analizamos el estado sencillo, el ID del participante, el estado de la publicación y el estado de la suscripción. Para hacerlo, tan solo actualizamos `UILabels` directamente:
```
labelParticipantId.text = participant.isLocal ? "You (\(participant.participantId ?? "Disconnected"))" : participant.participantId
labelPublishState.text = participant.publishState.text
labelSubscribeState.text = participant.subscribeState.text
```
Las propiedades de texto de las enumeraciones de publicación y suscripción provienen de extensiones locales:
```
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()
}
}
}
```
A continuación, actualizamos los estados silenciados de audio y video. Para obtener los estados silenciados, tenemos que encontrar el `IVSImageDevice` y el `IVSAudioDevice` de la matriz `streams`. Para optimizar el rendimiento, recordaremos los últimos dispositivos conectados.
```
// 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)"
```
Por último, queremos renderizar una vista previa de `imageDevice` y mostrar las estadísticas de audio de `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"
}
```
La última función que tenemos que crear es `updatePreview()`, que agrega una vista previa del participante a nuestra vista:
```
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)
}
}
}
```
Lo anterior usa una función auxiliar en `UIView` para facilitar la incorporación de subvistas:
```
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),
])
}
}
```