Cara memberi sinyal metadata berwaktu dengan Azure Media Services

  • Artikel

Logo Azure Media Services v3

Peringatan

Azure Media Services akan dihentikan pada 30 Juni 2024. Untuk informasi selengkapnya, lihat Panduan Penghentian AMS.

Metadata berwaktu adalah data kustom yang dimasukkan ke dalam streaming langsung. Data dan tanda waktu penyisipannya dipertahankan di aliran media itu sendiri. Hal ini agar klien yang memutar streaming video bisa mendapatkan metadata kustom yang sama pada saat yang sama persis dalam kaitannya dengan aliran video.

Catatan

Metadata berwaktu hanya berfungsi untuk acara langsung yang dibuat dengan penyerapan RTMP dan RTMPS.

Prasyarat

  • Akun Media Services
  • Keakraban dengan streaming langsung dari encoder lokal. Jika Anda belum melakukan ini sebelumnya, coba streaming langsung dengan mulai cepat OBS terlebih dahulu. Setelah menyiapkan dan menjalankannya, Anda akan dapat melakukan langkah-langkah berikut.
  • Alat untuk menguji posting HTTP.

Menampilkan sampel

Contoh di bawah ini menunjukkan bagaimana pemutar video menangkap dan menampilkan metadata berwaktu aliran video. Ini menggunakan pemutar Shaka dan dukungan bawaannya untuk data Pesan Peristiwa ('emsg') melalui EmsgEvent.

Media Services juga mendukung peristiwa Id3 MetadataEvent ID3 pemutar Shaka, 'emsg' yang menggunakan uri https://aomedia.org/emsg/ID3ID skema .

Meninjau kode di Stackblitz

Kami telah menyediakan sampel pemutar Shaka di Stackblitz untuk Anda kerjakan. Gunakan tombol ini untuk membuat fork kode sampel pada Stackblitz.com.

Buka Fork di StackBlitz

Meninjau halaman HTML

Dokumen index.html berisi:

  • elemen div tempat pesan akan muncul setelah dikirim.
  • elemen video HTML5 standar. Perhatikan bahwa elemen video diatur ke autoplay dan ke start muted.
  • bidang input untuk URL pencari lokasi streaming. Ada URL tempat penampung di bidang input yang dapat Anda lihat, tetapi bukan streaming langsung. Anda akan mengganti nilai ini.
<script type="module" src="./index.js"></script>
<link href="./style.css" type="text/css" rel="stylesheet">

<div class="grid-container">

  <div id="header">
    <a href="https://github.com/Azure-Samples/media-services-v3-node-tutorials/tree/main/Player/examples/shaka">
      <span class="microsoft"><svg aria-hidden="true" role="presentation" viewBox="0 0 26 25"
          xmlns="http://www.w3.org/2000/svg">
          <path d="M12.5708 0.981934H0.907471V12.3682H12.5708V0.981934Z" fill="#F25022"></path>
          <path d="M25.4625 0.981934H13.7992V12.3682H25.4625V0.981934Z" fill="#7FBA00"></path>
          <path d="M12.5708 13.5649H0.907471V24.9512H12.5708V13.5649Z" fill="#00A4EF"></path>
          <path d="M25.4629 13.5649H13.7996V24.9512H25.4629V13.5649Z" fill="#FFB900"></path>
        </svg></span>
      <span class="title">Shaka Player LL-HLS with Timed Metadata Sample</span>
    </a>
  </div>
  <div id="videoArea">


    <div id="video-container" data-shaka-player-cast-receiver-id="07AEE832">
      <div id="metadata" class="metadata-hide"></div>
      <video autoplay muted playsinline id="video" style="width: 100%; height: 100%"></video>
    </div>
  </div>
  <div id="clock">
  </div>

  <div id="console">Waiting for timed metadata signals to arrive...</div>
  <div id="manifest">
    <label>Your Manifest (paste and hit enter):</label>
    <input id="manifestUrl" type="url" placeholder="place manifest URL here" size="80"
      value="//aka.ms/lowlatencydemo.m3u8" />
  </div>

  <div id="footer">
  <a href="http://media.azure">Azure Media Services</a>
  </div>
</div>

Meninjau JavaScript

File index.js membuat dan mengelola peristiwa pemutar dan pemutar. Fungsi onEventMessage ini terdaftar untuk menangani emsg peristiwa dari Shaka Player dan menampilkan pesan yang diterima dari POST.

player.addEventListener('emsg', onEventMessage);

function onEventMessage(event) {         
    // In version 4.2.x of Shaka player, the event message from AMS will fire here.
    // In version 4.3.0 and higher of Shaka player, the message will only fire in the "metadata' event, since the Shaka player is looking for ID3 messages and filtering them out to that event.

    console.log('Timed Metadata Event Message');
    //console.log('emsg:', event)
    // emsg box information are in emsg.details
    const dataMsg = new TextDecoder().decode(event.detail.messageData);
    console.log('EMSG: Scheme = ' + event.detail.schemeIdUri);
    console.log('EMSG: StartTime = ' + event.detail.startTime);
    console.log(
        'video.currenttime=' + document.getElementById('video').currentTime
    );

    // The start time and the presentationTimeDelta are in seconds on the presentation timeline. Shaka player does this work for us. The value startTime-presentationTimeDelta will give you the exact time in the video player's timeline to display the event.
    console.log(
        'EMSG: startTime-presentationTimeDelta = ' +
        (event.detail.startTime - event.detail.presentationTimeDelta)
    );

    console.log(
        'EMSG: presentationTimeDelta = ' + event.detail.presentationTimeDelta
    );
    console.log('EMSG: endTime = ' + event.detail.endTime);
    console.log('EMSG: timescale = ' + event.detail.timescale);
    console.log('EMSG: duration = ' + event.detail.eventDuration);
    console.log('EMSG: message length = ' + event.detail.messageData.length);

    try {
        const frames = shaka.util.Id3Utils.getID3Frames(event.detail.messageData);

        if (frames.length > 0) {
            console.log('EMSG: message = ', frames[0]);
            console.log('EMSG: mimeType = ', frames[0].mimeType);

            if (frames[0].mimeType === 'application/json') {
                const jsonPayload = JSON.parse(frames[0].data);
                let message = jsonPayload.message;
                console.log('message=' + message);

                // Now do something with your custom JSON payload
                let metadataDiv = document.getElementById('metadata');
                metadataDiv.innerText = message;

                let logLine = document.createElement('p');
                logLine.innerText = 'onEmsg - timestamp:' + (event.detail.startTime - event.detail.presentationTimeDelta).toFixed(2) + ' ' + JSON.stringify(jsonPayload);
                document.getElementById('console').appendChild(logLine).scrollIntoView(false);

                metadataDiv.className = 'metadata-show';

                setTimeout(() => {
                    metadataDiv.className = 'metadata-hide';
                }, 5000); // clear the message

                console.log('JSON= ' + JSON.stringify(jsonPayload));
            }
        }
    } catch (err) {
        console.error(err.stack);
    }
}

Membuat acara langsung dengan pencari lokasi streaming

Jika Anda belum melakukannya dengan mulai cepat OBS yang disebutkan sebelumnya, buat acara langsung dengan pencari lokasi streaming.

  1. Gunakan portal Azure, REST, atau SDK favorit Anda untuk membuat acara langsung. Salin URL penyerapan dan tempelkan di editor teks karena Anda harus mengeditnya untuk mengirim pesan ke pemutar dengan permintaan HTTP PUT.
  2. Mulai acara langsung dan pastikan titik akhir streaming terkait juga dimulai.

Streaming acara langsung

Salin dan tempel pencari streaming ke bidang input di pemutar di Stackblitz atau perbarui nilai secara opsional pada elemen input dalam file index.html. Anda akan melihat streaming acara langsung ke pemutar.

Membuat URL POST

Edit URL penyerapan:

  1. Ubah RTMPS menjadi HTTPS.
  2. Hapus nomor port, termasuk titik dua.
  3. Hapus /live/ dari jalur.
  4. Tambahkan ingest.isml/eventdata ke jalur.

Contoh:

rtmps://mylivestream.channel.media.azure-test.net:2935/live/0251458ba5df44b2b807ea02f40fed76

menjadi

https://mylivestream.channel.media.azure-test.net/0251458ba5df44b2b807ea02f40fed76/ingest.isml/eventdata

Membuat dan mengirim permintaan

Anda dapat menggunakan alat atau SDK apa pun yang Anda suka untuk mengirim HTTP POST dengan metadata dalam isi ke pemutar.

Header dan isi permintaan

Pengingat: Header jenis Konten HTTP HARUS diatur ke aplikasi/json. Kemudian, tambahkan informasi yang ingin Anda tampilkan dengan kunci yang ditetapkan sebagai "pesan". Berikut adalah contoh pesan sederhana:

POST https://mylivestream.channel.media.azure-test.net/0251458ba5df44b2b807ea02f40fed76/ingest.isml/eventdata
Content-Type: application/json

{

“message”: “Hello world!”

}

Saat Anda mengirim permintaan, Anda akan melihat pesan di payload JSON muncul di div yang mengambang di atas elemen video.

Permintaan alternatif

Anda dapat mengirim informasi tambahan untuk overlay interaktif. Penyiapan lengkap untuk skenario tersebut tidak tercakup di sini, tetapi inilah tampilan isi permintaan untuk kuis. Anda dapat melakukan iterasi melalui jawaban untuk setiap "pertanyaan" (di sini mengganti "pesan" sebagai kunci) dan menyediakan tombol untuk dipilih oleh penampil.

POST https://mylivestream.channel.media.azure-test.net/0251458ba5df44b2b807ea02f40fed76/ingest.isml/eventdata
Content-Type: application/json


{
    "question": "What is the airspeed velocity of an unladen swallow?",
     "answers" : [
        {"a1": "A shrubbery!"},
        {"a2": "I am not a witch!"},
        {"a3":  "An African or European swallow?"},
        {"a4": "It's just a flesh wound."},
    ]
}

Tip

Buka Alat Pengembang untuk browser dan watch peristiwa video yang diaktifkan serta pesan yang diterima dari payload JSON permintaan.

Contoh POST menggunakan cURL

Saat menggunakan cURL, Anda harus mengatur header menggunakan -H “Content-Type: application/json”. -d Gunakan bendera untuk mengatur data JSON pada baris perintah (tanda kutip escape di isi JSON dengan garis miring terbelakang saat menggunakan baris perintah). Secara opsional Anda dapat menunjuk ke file JSON menggunakan -d \@\<path-to-json-file\>.

POST bersifat implisit saat mengirim data, sehingga Anda tidak perlu menggunakan bendera -X POST.

Contoh POST:

curl https://mylivestream.channel.media.azure.net/618377123f4c49b3937ade20204ca0b2/ingest.isml/eventdata -H "Content-Type: application/json" -d "{\\"message\\":\\"Hello from Seattle\\"}" -v

Membersihkan sumber daya

Pastikan Anda mematikan acara langsung dan titik akhir streaming dan menghapus sumber daya yang tidak ingin Anda gunakan atau Anda akan ditagih.

Dapatkan bantuan dan dukungan

Anda dapat menghubungi Media Services dengan pertanyaan atau mengikuti pembaruan kami dengan salah satu metode berikut: