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

HTTPLive Streaming (HLS) adalah protokol komunikasi streaming media HTTP berbasis 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 streaming video dengan menyediakan sesi HLS streamingURL, baik secara terprogram maupun manual. Anda juga dapat memutar video dengan memasuki sesi HLS streaming URL di bilah Lokasi browser Apple Safari atau Microsoft Edge.

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

penting

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

Gunakan AWS CLI untuk mengambil sesi HLS streaming URL

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

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

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

Ambil HLS URL titik akhir 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 URL permintaan sesi HLS streaming ke titik akhir yang dikembalikan.

    Live

    Untuk pemutaran langsung, daftar putar HLS media 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 HLS media 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 - 08:00 GMT

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

    Panggil mode LIVE_REPLAY pemutaran GetHLSStreamingSessionURL API dengan dan Pemilih HLS Fragmen 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 HLS media berisi media yang ditentukan oleh pemilih HLS fragmen. 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 mulai 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 - 08:00 GMT

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

    Panggil mode ON_DEMAND pemutaran GetHLSStreamingSessionURL API dengan dan Pemilih HLS Fragmen 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 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 kredensil Anda. AWS

    Anda dapat menggunakan ini URL dan HLS pemain mana pun untuk melihat HLS aliran.

    Misalnya, gunakan pemutar VLC media.

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

Contoh: Gunakan HLS di HTML dan JavaScript

Contoh berikut menunjukkan cara menggunakan AWS SDK for JavaScript v2 untuk mengambil sesi HLS streaming 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 for JavaScript untuk browser

Di halaman web, sertakan tag skrip berikut untuk mengimpor AWS SDK for 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 lebih lanjut, lihat JavaScript dokumentasi AWS SDKuntuk.

Siapkan klien Kinesis Video Streams

Untuk mengakses streaming video denganHLS, pertama-tama buat dan konfigurasikan klien Kinesis Video Streams. Lihat Menyetel Kredensial di Browser Web untuk metode otentikasi lainnya.

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

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

Ambil titik akhir untuk pemutaran HLS

Gunakan klien Kinesis Video Streams untuk GetDataEndpoint API memanggil untuk 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 sesi HLS streaming URL

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

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

Tampilkan HLS aliran di halaman web

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

Video.js

Lakukan hal berikut untuk mengimpor Video.js dan CSS kelasnya 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 video HTML elemen untuk menampilkan video:

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

Mengatur HLS URL sebagai sumber elemen HTML video:

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 video HTML elemen 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 video HTML elemen untuk menampilkan video:

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

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

const playerElement = document.getElementById('hlsjs'); const 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 Streaming HTTP Langsung (HLS) dengan Kinesis Video Streams.

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

Situasi ini terjadi ketika Anda berhasil mengambil sesi HLS streaming URL menggunakanGetHLSStreamingSessionURL, tetapi video gagal diputar kembali ketika URL disediakan untuk 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 sesi HLS URL streaming hanya digunakan oleh satu pemain. Jika lebih dari satu pemain menggunakan satu sesi HLS streamingURL, layanan mungkin menerima terlalu banyak permintaan dan mencekatnya.

  • Verifikasi bahwa pemain Anda mendukung semua opsi yang Anda tentukan untuk sesi HLS streaming. 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 MP4 wadah f. 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 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 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 membutuhkan 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.