Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.
# 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).