# 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).