# Pubblica e sottoscrivi con l'SDK di trasmissione Web IVS
Questa sezione illustra i passaggi necessari per pubblicare e sottoscrivere una fase utilizzando l'app web.
## Creazione di un boilerplate HTML
Per prima cosa, creiamo il boilerplate HTML e importiamo la libreria come tag di script:
```
```
## Accettazione dell'input di token e aggiunta dei pulsanti Unisciti/Abbandona
Qui riempiamo il corpo con i nostri controlli di input. Tali controlli prendono come input il token e configurano i pulsanti **Unisciti** e **Abbandona**. In genere le applicazioni richiedono il token dall'API dell'applicazione, ma per questo esempio il token verrà copiato e incollato nell'input del token.
```
IVS Real-Time Streaming
```
## Aggiunta di elementi del container multimediale
Questi elementi serviranno da supporto ai media per i nostri partecipanti locali e remoti. Aggiungiamo un tag di script per caricare la logica dell'applicazione definita in `app.js`.
```
```
Questa operazione completa la pagina HTML che dovrebbe essere visualizzata durante il caricamento di `index.html` in un browser:
![\[Visualizzazione dello streaming in tempo reale in un browser: configurazione HTML completata.\]](http://docs.aws.amazon.com/it_it/ivs/latest/RealTimeUserGuide/images/RT_Browser_View.png)
## Crea app.js
Passiamo alla definizione dei contenuti del file `app.js`. Inizia importando tutte le proprietà richieste dal pacchetto globale dell'SDK:
```
const {
Stage,
LocalStageStream,
SubscribeType,
StageEvents,
ConnectionState,
StreamType
} = IVSBroadcastClient;
```
## Creazione di variabili dell'applicazione
Stabilisci le variabili che contengono i riferimenti agli elementi HTML dei pulsanti **Unisciti** e **Abbandona** e lo stato di archiviazione dell'applicazione:
```
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;
```
## Crea joinStage 1: definisci la funzione e convalida l'input
La funzione `joinStage` prende il token di input, crea una connessione alla fase e inizia a pubblicare video e audio recuperati da `getUserMedia`.
Per iniziare, definiamo la funzione e convalidiamo lo stato e l'input del token. Approfondiremo questa funzione nelle prossime sezioni.
```
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
};
```
## Crea joinStage 2: ottieni i contenuti multimediali da pubblicare
Ecco i contenuti multimediali che verranno pubblicati nella fase:
```
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]);
```
## Crea joinStage 3: definisci la strategia della fase e crea la fase
La strategia della fase è il fulcro della logica decisionale che l'SDK utilizza per decidere cosa pubblicare e quali partecipanti sottoscrivere. Per ulteriori informazioni sullo scopo della funzione, consulta la sezione [Strategia](web-publish-subscribe.md#web-publish-subscribe-concepts-strategy).
Questa strategia è semplice. Dopo essere entrati nella fase, pubblica i flussi appena recuperati e sottoscrivi l'audio e i video di ogni partecipante remoto:
```
const strategy = {
stageStreamsToPublish() {
return [cameraStageStream, micStageStream];
},
shouldPublishParticipant() {
return true;
},
shouldSubscribeToParticipant() {
return SubscribeType.AUDIO_VIDEO;
}
};
stage = new Stage(token, strategy);
```
## Crea joinStage 4: gestisci gli eventi nella fase ed esegui il rendering dei contenuti multimediali
Le fasi emettono numerosi eventi. Dovremo ascoltare `STAGE_PARTICIPANT_STREAMS_ADDED` e `STAGE_PARTICIPANT_LEFT` per eseguire il rendering e rimuovere contenuti multimediali da e verso la pagina. Una serie più esaustiva di eventi è riportata nella sezione [Eventi](web-publish-subscribe.md#web-publish-subscribe-concepts-events).
In questo esempio creeremo quattro funzioni di supporto la gestione degli elementi DOM necessari: `setupParticipant`, `teardownParticipant`, `createVideoEl` e `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;
}
```
## Crea joinStage 5: unisciti alla fase
Completiamo la nostra funzione `joinStage` unendoci finalmente alla fase.
```
try {
await stage.join();
} catch (err) {
joining = false;
connected = false;
console.error(err.message);
}
```
## Crea leaveStage
Definisci la funzione `leaveStage` che verrà invocata dal pulsante Abbandona.
```
const leaveStage = async () => {
stage.leave();
joining = false;
connected = false;
};
```
## Inizializza i gestori di eventi di input
Aggiungeremo un'ultima funzione al file `app.js`. Questa funzione viene richiamata immediatamente quando la pagina viene caricata e stabilisce i gestori di eventi per unirsi e abbandonare la fase.
```
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
```
## Esegui l'applicazione e fornisci un token
A questo punto puoi condividere la pagina Web localmente o con altri, [apri la pagina](#getting-started-pub-sub-web-media) e inserisci un token di partecipazione ed entra nella fase.
## Fasi successive
Per esempi più dettagliati che coinvolgono npm, React e altro, consulta [SDK di trasmissione IVS: guida Web (guida per lo streaming in tempo reale)](broadcast-web.md).