Publikasikan & Berlangganan dengan IVS Web Broadcast SDK - Amazon IVS
Buat HTML BoilerplateTerima Masukan Token dan Tambahkan Tombol Gabung/TinggalkanTambahkan Elemen Kontainer MediaBuat app.jsBuat Variabel AplikasiBuat JoinSage 1: Tentukan Fungsi dan Validasi InputBuat JoinSage 2: Dapatkan Media untuk PublikasikanBuat JoinSage 3: Tentukan Strategi Panggung dan Buat PanggungBuat JoinSage 4: Menangani Acara Panggung dan Media RenderBuat JoinSage 5: Bergabunglah dengan PanggungBuat LeaveStageInisialisasi Input-Event HandlerJalankan Aplikasi dan Berikan TokenApa selanjutnya?

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 perpustakaan sebagai tag script:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Import the SDK -->
  <script src="https://web-broadcast.live-video.net/1.21.0/amazon-ivs-web-broadcast.js"></script>
</head>

<body>

<!-- TODO - fill in with next sections -->
<script src="./app.js"></script>

</body>
</html>

Terima Masukan Token dan Tambahkan Tombol Gabung/Tinggalkan

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.

<h1>IVS Real-Time Streaming</h1>
<hr />

<label for="token">Token</label>
<input type="text" id="token" name="token" />
<button class="button" id="join-button">Join</button>
<button class="button" id="leave-button" style="display: none;">Leave</button>
<hr />

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 dalamapp.js.

<!-- Local Participant -->
<div id="local-media"></div>

<!-- Remote Participants -->
<div id="remote-media"></div>

<!-- Load Script -->
<script src="./app.js"></script>

Ini melengkapi halaman HTML dan Anda akan melihat ini saat memuat index.html di browser:

Lihat Streaming Waktu Nyata di browser: Pengaturan HTML selesai.

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

joinStageFungsi mengambil token input, membuat koneksi ke panggung, dan mulai mempublikasikan video dan audio yang diambil darigetUserMedia.

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.

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.

Perhatikan bahwa kita membuat empat fungsi pembantu di sini untuk membantu kita dalam mengelola elemen DOM yang diperlukan:setupParticipant,, teardownParticipantcreateVideoEl, dancreateContainer.

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!

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