Pemutaran video dengan HLS - Amazon Kinesis Video Streams

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

Pemutaran video dengan HLS

HTTP Live Streaming (HLS) adalah protokol komunikasi streaming media berbasis HTTP standar industri. Anda dapat menggunakan HLS untuk melihat aliran video Kinesis, baik untuk pemutaran langsung atau untuk melihat video yang diarsipkan.

Anda dapat menggunakan HLS untuk pemutaran langsung. Latensi biasanya antara 3-5 detik, tetapi bisa antara 1-10 detik, tergantung pada kasus penggunaan, pemain, dan kondisi jaringan. Anda dapat menggunakan pemutar pihak ketiga (seperti Video.js atau Google Shaka Player) untuk menampilkan aliran video dengan menyediakan URL sesi streaming HLS, baik secara terprogram maupun manual. Anda juga dapat memutar video dengan memasukkan URL sesi streaming HLS di bilah Lokasi browser Apple Safari atau Microsoft Edge.

Untuk melihat aliran video Kinesis menggunakan HLS, pertama buat sesi streaming menggunakan URL GetHLS. StreamingSession Tindakan ini mengembalikan URL (berisi token sesi) untuk mengakses sesi HLS. Anda kemudian dapat menggunakan URL di pemutar media atau aplikasi mandiri untuk menampilkan aliran.

penting

Tidak semua media yang dikirim ke Kinesis Video Streams dapat diputar ulang melalui HLS. Lihat GetHLSStreamingSessionURL untuk persyaratan pengunggahan khusus.

Gunakan AWS CLI untuk mengambil URL sesi streaming HLS

Ikuti prosedur di bawah ini AWS CLI untuk menggunakan URL sesi streaming HLS untuk aliran video Kinesis.

Untuk petunjuk penginstalan, lihat Panduan AWS Command Line Interface Pengguna. Setelah instalasi, konfigurasikan AWS CLI dengan kredensyal dan wilayah.

Atau, buka AWS CloudShell terminal, yang telah AWS CLI diinstal dan dikonfigurasi. Lihat Panduan AWS CloudShell Pengguna untuk informasi selengkapnya.

Ambil titik akhir URL HLS untuk aliran video Kinesis Anda.
  1. Ketik berikut ini ke terminal:

    aws kinesisvideo get-data-endpoint \ --api-name GET_HLS_STREAMING_SESSION_URL \ --stream-name YourStreamName

    Anda akan menerima respons yang terlihat seperti ini:

    { "DataEndpoint": "https://b-1234abcd.kinesisvideo.aws-region.amazonaws.com" }
  2. Buat permintaan URL sesi streaming HLS ke titik akhir yang dikembalikan.

    Live

    Untuk pemutaran langsung, daftar putar media HLS terus diperbarui dengan media terbaru saat tersedia. Saat Anda memainkan jenis sesi ini di pemutar media, antarmuka pengguna biasanya menampilkan pemberitahuan "langsung “, tanpa kontrol scrubber untuk memilih posisi di jendela pemutaran yang akan ditampilkan.

    Pastikan Anda mengunggah media ke aliran ini saat menjalankan perintah ini.

    aws kinesis-video-archived-media get-hls-streaming-session-url \ --endpoint-url https://b-1234abcd.kinesisvideo.aws-region.amazonaws.com \ --stream-name YourStreamName \ --playback-mode LIVE
    Live replay

    Untuk pemutaran ulang langsung, pemutaran dimulai dari waktu mulai yang ditentukan. Daftar putar media HLS juga terus diperbarui dengan media terbaru saat tersedia. Sesi akan terus menyertakan media yang baru dicerna sampai sesi berakhir, atau sampai waktu akhir yang ditentukan, mana yang lebih dulu. Mode ini berguna untuk dapat memulai pemutaran dari saat suatu peristiwa terdeteksi dan melanjutkan media streaming langsung yang belum tertelan pada saat pembuatan sesi.

    Tentukan stempel waktu mulai.

    Untuk contoh ini, kami menggunakan waktu Unix Epoch dalam format detik. Lihat bagian Stempel Waktu di Panduan AWS Command Line Interface Pengguna untuk informasi selengkapnya tentang pemformatan stempel waktu.

    Lihat UnixTime.org untuk alat konversi.

    • 1708471800 sama dengan 20 Februari 2024 3:30:00 PM GMT- 08:00

    Dalam contoh ini, kami tidak menentukan stempel waktu akhir, artinya sesi akan terus menyertakan media yang baru dicerna hingga sesi berakhir.

    Panggil GetHLSStreamingSessionURL API dengan mode LIVE_REPLAY pemutaran dan Pemilih Fragmen HLS yang ditentukan.

    aws kinesis-video-archived-media get-hls-streaming-session-url \ --endpoint-url https://b-1234abcd.kinesisvideo.aws-region.amazonaws.com \ --stream-name YourStreamName \ --playback-mode LIVE_REPLAY \ --hls-fragment-selector \ "FragmentSelectorType=SERVER_TIMESTAMP,TimestampRange={StartTimestamp=1708471800}"
    On-demand

    Untuk pemutaran sesuai permintaan, daftar putar media HLS berisi media yang ditentukan oleh pemilih fragmen HLS. Ketika jenis sesi ini diputar di pemutar media, antarmuka pengguna biasanya menampilkan kontrol scrubber untuk memilih posisi di jendela pemutaran untuk ditampilkan.

    Untuk membuat URL untuk bagian aliran tertentu, pertama-tama tentukan stempel waktu awal dan akhir.

    Untuk contoh ini, kami menggunakan waktu Unix Epoch dalam format detik. Lihat bagian Stempel Waktu di Panduan AWS Command Line Interface Pengguna untuk informasi selengkapnya tentang pemformatan stempel waktu.

    Lihat UnixTime.org untuk alat konversi.

    • 1708471800 sama dengan 20 Februari 2024 3:30:00 PM GMT- 08:00

    • 1708471860 sama dengan 20 Februari 2024 3:31:00 PM GMT- 08:00

    Panggil GetHLSStreamingSessionURL API dengan mode ON_DEMAND pemutaran dan Pemilih Fragmen HLS yang ditentukan.

    aws kinesis-video-archived-media get-hls-streaming-session-url \ --endpoint-url https://b-1234abcd.kinesisvideo.aws-region.amazonaws.com \ --stream-name YourStreamName \ --playback-mode ON_DEMAND \ --hls-fragment-selector \ "FragmentSelectorType=SERVER_TIMESTAMP,TimestampRange={StartTimestamp=1708471800,EndTimestamp=1708471860}"
    catatan

    Stempel waktu harus dalam waktu 24 jam satu sama lain, seperti yang disebutkan dalam dokumentasi. HLSTimestampRange

    Anda akan menerima respons yang terlihat seperti ini:

    { "HLSStreamingSessionURL": "https://b-1234abcd.kinesisvideo.aws-region.amazonaws.com/hls/v1/getHLSMasterPlaylist.m3u8?SessionToken=CiAz...DkRE6M~" }
    penting

    Jangan berbagi atau menyimpan token ini di mana entitas yang tidak berwenang dapat mengaksesnya. Token menyediakan akses ke konten aliran. Lindungi token dengan tindakan yang sama yang akan Anda gunakan dengan kredensyal Anda. AWS

    Anda dapat menggunakan URL ini dan pemutar HLS apa pun untuk melihat aliran HLS.

    Misalnya, gunakan pemutar media VLC.

    Anda juga dapat memutar HLS Stream dengan memasukkan URL sesi streaming HLS di bilah Lokasi browser Apple Safari atau Microsoft Edge.

Contoh: Gunakan HLS dalam HTML dan JavaScript

Contoh berikut menunjukkan cara menggunakan AWS SDK for JavaScript v2 untuk mengambil sesi streaming HLS untuk aliran video Kinesis dan memutarnya kembali di halaman web. Contoh menunjukkan cara memutar video di pemain berikut:

Lihat kode contoh lengkap dan halaman web yang dihosting di GitHub.

Impor AWS SDK JavaScript untuk browser

Di halaman web, sertakan tag skrip berikut untuk mengimpor AWS SDK untuk JavaScript v2 ke dalam proyek.

<script src="https://cdnjs.cloudflare.com/ajax/libs/aws-sdk/2.490.0/aws-sdk.min.js"></script>

Untuk informasi selengkapnya, lihat AWS SDK untuk JavaScript dokumentasi.

Siapkan klien Kinesis Video Streams

Untuk mengakses streaming video dengan HLS, pertama-tama buat dan konfigurasikan klien Kinesis Video Streams. Lihat Menyetel Kredensyal di Browser Web untuk metode autentikasi lainnya.

const clientConfig = { accessKeyId: 'YourAccessKey', secretAccessKey: 'YourSecretKey', region: 'us-west-2' }; const kinesisVideoClient = new AWS.KinesisVideo(clientConfig);

Aplikasi mengambil nilai-nilai yang diperlukan dari kotak input pada halaman HTML.

Ambil titik akhir untuk pemutaran HLS

Gunakan klien Kinesis Video Streams untuk GetDataEndpoint memanggil API guna mengambil titik akhir.

const getDataEndpointOptions = { StreamName: 'YourStreamName', APIName: 'GET_HLS_STREAMING_SESSION_URL' }; const getDataEndpointResponse = await kinesisVideoClient .getDataEndpoint(getDataEndpointOptions) .promise(); const hlsDataEndpoint = getDataEndpointResponse.DataEndpoint;

Kode ini menyimpan titik akhir dalam hlsDataEndpoint variabel.

Siapkan klien media yang diarsipkan Kinesis Video Streams

Dalam konfigurasi klien untuk klien media yang diarsipkan Kinesis Video Streams, tentukan titik akhir yang Anda peroleh pada langkah sebelumnya.

const archivedMediaClientConfig = { accessKeyId: 'YourAccessKey', secretAccessKey: 'YourSecretKey', region: 'us-west-2', endpoint: hlsDataEndpoint } const kinesisVideoArchivedMediaClient = new AWS.KinesisVideoArchivedMedia(archivedMediaClientConfig);

Ambil URL sesi streaming HLS

Gunakan klien media yang diarsipkan Kinesis Video Streams untuk GetHLSStreamingSessionURL memanggil API guna mengambil URL pemutaran HLS.

const getHLSStreamingSessionURLOptions = { StreamName: 'YourStreamName', PlaybackMode: 'LIVE' }; const getHLSStreamingSessionURLResponse = await kinesisVideoArchivedMediaClient.getHLSStreamingSessionURL(getHLSStreamingSessionURLOptions); const hlsUrl = getHLSStreamingSessionURLResponse.HLSStreamingSessionURL;

Menampilkan aliran HLS di halaman web

Saat Anda memiliki URL sesi streaming HLS, berikan ke pemutar video. Metode untuk memberikan URL ke pemutar video khusus untuk pemutar yang digunakan.

Video.js

Lakukan hal berikut untuk mengimpor Video.js dan kelas CSS-nya ke dalam skrip browser kami:

<link rel="stylesheet" href="https://vjs.zencdn.net/6.6.3/video-js.css"> <script src="https://vjs.zencdn.net/6.6.3/video.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.14.1/videojs-contrib-hls.js"></script>

Buat elemen video HTML untuk menampilkan video:

<video id="videojs" class="player video-js vjs-default-skin" controls autoplay></video>

Mengatur URL HLS sebagai sumber elemen video HTML:

const playerElement = document.getElementById('videojs'); const player = videojs(playerElement); player.src({ src: hlsUrl, type: 'application/x-mpegURL' }); player.play();
Shaka

Lakukan hal berikut untuk mengimpor pemutar Google Shaka ke skrip browser kami:

<script src="https://cdnjs.cloudflare.com/ajax/libs/shaka-player/2.4.1/shaka-player.compiled.js"></script>

Buat elemen video HTML untuk menampilkan video:

<video id="shaka" class="player" controls autoplay></video>

Buat pemutar Shaka yang menentukan elemen video dan panggil metode pemuatan:

const playerElement = document.getElementById('shaka'); const player = new shaka.Player(playerElement); player.load(hlsUrl);
hls.js

Lakukan hal berikut untuk mengimpor hls.js ke skrip browser kami:

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

Buat elemen video HTML untuk menampilkan video:

<video id="hlsjs" class="player" controls autoplay></video>

Buat pemutar hls.js, berikan URL HLS, dan beri tahu untuk bermain:

var playerElement = document.getElementById('hlsjs'); var player = new Hls(); player.loadSource(hlsUrl); player.attachMedia(playerElement); player.on(Hls.Events.MANIFEST_PARSED, function() { video.play(); });

Memecahkan masalah HLS

Bagian ini menjelaskan masalah yang mungkin Anda temui saat menggunakan HTTP Live Streaming (HLS) dengan Kinesis Video Streams.

Mengambil URL sesi streaming HLS berhasil, tetapi pemutaran gagal di pemutar video

Situasi ini terjadi ketika Anda berhasil mengambil URL sesi streaming HLS menggunakanGetHLSStreamingSessionURL, tetapi video gagal diputar kembali ketika URL diberikan ke pemutar video.

Untuk mengatasi masalah ini, coba yang berikut ini:

  • Tentukan apakah aliran video diputar kembali di konsol Kinesis Video Streams. Pertimbangkan kesalahan apa pun yang ditampilkan konsol.

  • Jika durasi fragmen kurang dari satu detik, tingkatkan menjadi satu detik. Jika durasi fragmen terlalu pendek, layanan mungkin membatasi pemutar karena terlalu sering membuat permintaan untuk fragmen video.

  • Verifikasi bahwa setiap URL sesi streaming HLS hanya digunakan oleh satu pemain. Jika lebih dari satu pemain menggunakan URL sesi streaming HLS tunggal, layanan mungkin menerima terlalu banyak permintaan dan membatasi mereka.

  • Verifikasi bahwa pemain Anda mendukung semua opsi yang Anda tentukan untuk sesi streaming HLS. Coba kombinasi nilai yang berbeda untuk parameter berikut:

    • ContainerFormat

    • PlaybackMode

    • FragmentSelectorType

    • DiscontinuityMode

    • MaxMediaPlaylistFragmentResults

    Beberapa pemutar media (seperti HTML5 dan pemutar seluler) biasanya hanya mendukung HLS dengan format wadah fMP4. Pemutar media lain (seperti Flash dan pemutar khusus) mungkin hanya mendukung HLS dengan format wadah MPEG TS. Kami merekomendasikan bereksperimen dengan ContainerFormat parameter untuk memulai pemecahan masalah.

  • Verifikasi bahwa setiap fragmen memiliki jumlah trek yang konsisten. Verifikasi bahwa fragmen dalam aliran tidak berubah antara memiliki trek audio dan video dan hanya trek video. Juga verifikasi bahwa pengaturan encoder (resolusi dan frame rate) tidak berubah di antara fragmen di setiap trek.

Latensi terlalu tinggi antara produser dan pemain

Situasi ini terjadi ketika latensi terlalu tinggi dari saat video ditangkap hingga saat diputar di pemutar video.

Video diputar kembali melalui HLS berdasarkan per-fragmen. Oleh karena itu, latensi tidak boleh kurang dari durasi fragmen. Latensi juga mencakup waktu yang dibutuhkan untuk buffering dan transfer data. Jika solusi Anda memerlukan latensi kurang dari satu detik, pertimbangkan untuk menggunakan GetMedia API sebagai gantinya.

Anda dapat menyesuaikan parameter berikut untuk mengurangi latensi keseluruhan, tetapi menyesuaikan parameter ini juga dapat mengurangi kualitas video atau meningkatkan laju rebuffering.

  • Durasi fragmen — Durasi fragmen adalah jumlah video antar divisi dalam aliran yang dikendalikan oleh frekuensi keyframe yang dihasilkan oleh encoder video. Nilai yang disarankan adalah satu detik. Memiliki durasi fragmen yang lebih pendek berarti lebih sedikit waktu yang dihabiskan untuk menunggu fragmen selesai sebelum mengirimkan data video ke layanan. Fragmen yang lebih pendek juga lebih cepat untuk diproses oleh layanan. Namun, jika durasi fragmen terlalu pendek, probabilitas meningkat bahwa pemain akan kehabisan konten dan harus berhenti dan menyangga konten. Jika durasi fragmen kurang dari 500 milidetik, produsen mungkin membuat terlalu banyak permintaan, menyebabkan layanan mencekatnya.

  • Bitrate — Streaming video dengan bitrate lebih rendah membutuhkan waktu lebih sedikit untuk membaca, menulis, dan mengirimkan. Namun, streaming video dengan bitrate lebih rendah biasanya memiliki kualitas video yang lebih rendah.

  • Jumlah fragmen dalam daftar putar media — Pemutar yang sensitif terhadap latensi hanya boleh memuat fragmen terbaru dalam daftar putar media. Sebagian besar pemain mulai dari fragmen paling awal sebagai gantinya. Dengan mengurangi jumlah fragmen dalam daftar putar, Anda mengurangi pemisahan waktu antara fragmen sebelumnya dan baru. Dengan ukuran playlist yang lebih kecil, fragmen dapat dilewati selama pemutaran jika ada penundaan dalam menambahkan fragmen baru ke daftar putar, atau jika ada penundaan pemain mendapatkan daftar putar yang diperbarui. Sebaiknya gunakan 3-5 fragmen, dan gunakan pemutar yang dikonfigurasi untuk memuat hanya fragmen terbaru dari daftar putar.

  • Ukuran buffer pemutar — Sebagian besar pemutar video memiliki durasi buffer minimum yang dapat dikonfigurasi, biasanya dengan default 10 detik. Untuk latensi terendah, Anda dapat mengatur nilai ini menjadi 0 detik. Namun, melakukannya berarti pemain menolak jika ada penundaan menghasilkan fragmen karena pemain tidak akan memiliki buffer untuk menyerap penundaan.

  • Player “catch up” - Pemutar video biasanya tidak secara otomatis menangkap pemutaran ke bagian depan buffer video jika buffer terisi, seperti ketika fragmen yang tertunda menyebabkan backlog fragmen diputar. Pemain khusus dapat menghindari hal ini dengan menjatuhkan bingkai, atau meningkatkan kecepatan pemutaran (misalnya, menjadi 1.1x) untuk mengejar bagian depan buffer. Hal ini menyebabkan pemutaran menjadi berombak atau peningkatan kecepatan saat pemain mengejar, dan rebuffering mungkin lebih sering karena ukuran buffer tetap pendek.