View a markdown version of this page

Publikasikan & Berlangganan dengan IVS Web Broadcast SDK - Amazon IVS
Buat HTML BoilerplateTerima Input Token dan Tambahkan Tom Join/Leave bolTambahkan Elemen Kontainer MediaBuat app.jsBuat Variabel AplikasiBuat JoinStage 1: Tentukan Fungsi dan Validasi InputBuat JoinStage 2: Dapatkan Media untuk DipublikasikanBuat JoinStage 3: Tentukan Strategi Panggung dan Buat PanggungBuat JoinStage 4: Tangani Acara Panggung dan Media RenderBuat JoinStage 5: Bergabunglah dengan PanggungBuat LeaveStageInisialisasi Handler Input-EventJalankan 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 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 skrip:

<!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.38.0/amazon-ivs-web-broadcast.js"></script>
</head>

<body>

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

</body>
</html>

Terima Input Token dan Tambahkan Tom Join/Leave bol

Di sini kita mengisi tubuh dengan kontrol input kita. Ini mengambil sebagai input token, dan mereka mengatur tombol Gab ung 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 menyimpan media untuk peserta lokal dan jarak jauh kami. Kami menambahkan tag skrip untuk memuat logika aplikasi kami yang ditentukan diapp.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 Real-Time Streaming 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 menyimpan status 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 JoinStage 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, kami mendefinisikan fungsi dan memvalidasi input status dan 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 JoinStage 2: Dapatkan Media untuk Dipublikasikan

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 JoinStage 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 JoinStage 4: Tangani Acara Panggung dan Media Render

Tahapan memancarkan banyak peristiwa. Kita perlu mendengarkan STAGE_PARTICIPANT_STREAMS_ADDED dan merender dan STAGE_PARTICIPANT_LEFT menghapus media ke dan dari halaman. Serangkaian acara yang lebih lengkap tercantum dalam A cara.

Perhatikan bahwa kami membuat empat fungsi pembantu di sini untuk membantu kami dalam mengelola elemen DOM yang diperlukan:setupParticipant,teardownParticipant,createVideoEl, 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 JoinStage 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 Handler Input-Event

Kami akan menambahkan satu fungsi terakhir ke app.js file kami. Fungsi ini segera dipanggil saat 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 rinci yang melibatkan npm, React, dan lainnya, lihat IVS Broadcast SDK: Panduan Web (Panduan Real-Time Streaming).