Azure Media Services ile zamanlanmış meta veriler için sinyal gönderme

Makale
01/22/2024

Uyarı

Azure Media Services 30 Haziran 2024'de kullanımdan kaldırılacak. Daha fazla bilgi için bkz. AMS Kullanımdan Kaldırma Kılavuzu.

Zamanlanmış meta veriler, canlı akışa eklenen özel verilerdir. Hem veriler hem de ekleme zaman damgası medya akışının kendisinde korunur. Bunun amacı, video akışını yürüten istemcilerin video akışıyla ilgili olarak aynı özel meta verileri aynı anda alabilmesidir.

Not

Zamanlanmış meta veriler yalnızca RTMP ve RTMPS alımıyla oluşturulan canlı etkinlikler için çalışır.

Önkoşullar

Media Services hesabı
Şirket içi kodlayıcıdan canlı akış hakkında bilgi. Bunu daha önce yapmadıysanız, önce OBS hızlı başlangıcıyla canlı akışı deneyin. Bu kurulumu ve çalıştırmayı tamamladıktan sonra aşağıdaki adımları gerçekleştirebilirsiniz.
HTTP gönderilerini test etmek için bir araç.

Örneği görüntüleme

Aşağıdaki örnekte video oynatıcının video akışının zamanlanmış meta verilerini nasıl yakaladığı ve görüntülediği gösterilmektedir. Shaka oynatıcısını ve EmsgEvent aracılığıyla Olay İletisi verilerine ('emsg') yönelik yerleşik desteğini kullanır.

Media Services ayrıca şema kimliği uri'sini https://aomedia.org/emsg/ID3kullanan Shaka player ID3 MetadataEvent, 'emsg' olaylarını da destekler.

Stackblitz'de kodu gözden geçirme

Stackblitz'de birlikte çalışmanız için örnek bir Shaka oyuncusu sağladık. Örnek kodun çatalını Stackblitz.com için bu düğmeyi kullanın.

HTML sayfasını gözden geçirme

index.html belge aşağıdakileri içerir:

ileti gönderildikten sonra gösterilecek div öğesi.
standart bir HTML5 video öğesi. Video öğesinin ve olarak autoplay ayarlandığına start muteddikkat edin.
akış bulucu URL'si için bir giriş alanı. Giriş alanında görüntüleyebileceğiniz bir yer tutucu URL vardır, ancak canlı akış değildir. Bu değeri değiştireceksiniz.

<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>

JavaScript'i gözden geçirin

index.js dosyası oyuncu ve oyuncu olaylarını oluşturur ve yönetir. onEventMessage İşlev, Shaka Player'dan gelen olayı işlemek emsg ve POST'tan alınan iletileri görüntülemek için kaydedilir.

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);
    }
}

Akış bulucu ile canlı etkinlik oluşturma

Daha önce bahsedilen OBS hızlı başlangıcıyla henüz yapmadıysanız akış bulucu ile canlı bir etkinlik oluşturun.

Canlı etkinlik oluşturmak için Azure portal, REST veya sık kullandığınız SDK'yı kullanın. Alma URL'sini kopyalayın ve bir metin düzenleyicisine yapıştırın çünkü HTTP PUT isteğiyle oynatıcıya ileti göndermek için düzenlemeniz gerekir.
Canlı etkinliği başlatın ve ilişkili akış uç noktasının da başlatıldığından emin olun.

Canlı etkinliğin akışını oluşturma

Akış bulucuyu kopyalayıp Stackblitz'deki yürütücüdeki giriş alanına yapıştırın veya isteğe bağlı olarak index.html dosyasındaki giriş öğesindeki değeri güncelleştirin. Canlı etkinliğin oynatıcıya akışını görmeniz gerekir.

POST URL'sini oluşturma

Alma URL'sini düzenleyin:

olarak HTTPSdeğiştirinRTMPS.
İki nokta üst üste dahil olmak üzere bağlantı noktası numarasını kaldırın.
Yoldan kaldır'ı /live/ seçin.
Yola ekle'yi ingest.isml/eventdata seçin.

Örnek:

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

Olur

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

İstek oluşturma ve gönderme

Gövdedeki meta verileri yürütücüye bir HTTP POST göndermek için istediğiniz herhangi bir aracı veya SDK'yi kullanabilirsiniz.

Üst bilgiler ve istek gövdesi

Anımsatıcı: HTTP İçerik türü üst bilgisi application/json olarak ayarlanmalıdır. Ardından, görüntülemek istediğiniz bilgileri anahtar kümesiyle birlikte "ileti" olarak ekleyin. Aşağıda basit bir örnek ileti verilmiştir:

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

{

“message”: “Hello world!”

}

İsteği gönderdiğinizde, JSON yükündeki iletinin video öğesi üzerinde kayan div'de gösterilmesini görmeniz gerekir.

Alternatif istekler

Etkileşimli bir katman için ek bilgi gönderebilirsiniz. Bu senaryonun tam kurulumu burada ele alınmıyor, ancak istek gövdesi test için şöyle görünebilir. Her "sorunun" yanıtlarını yineleyip (burada anahtar olarak "ileti"yi değiştirerek) ve izleyicinin seçmesi için bir düğme sağlayabilirsiniz.

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."},
    ]
}

İpucu

Tarayıcı için Geliştirici Araçları'nı açın ve tetiklenen video olaylarının yanı sıra istek JSON yükünden alınan iletileri watch.

cURL kullanan örnek POST

cURL kullanırken üst bilgiyi kullanarak -H “Content-Type: application/json”ayarlamanız gerekir. Komut satırında JSON verilerini ayarlamak için bayrağını -d kullanın (komut satırını kullanırken JSON gövdesinde ters eğik çizgiyle kaçış tırnakları). İsteğe bağlı olarak kullanarak -d \@\<path-to-json-file\>bir JSON dosyasına işaret edebilirsiniz.

Veri gönderirken POST örtülüdür, bu nedenle -X POST bayrağını kullanmanız gerekmez.

Örnek POST:

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

Kaynakları temizleme

Canlı etkinliği ve akış uç noktasını kapattığınıza ve kullanmaya devam etmeyi planlamadığınız kaynakları sildiğinizden emin olun; aksi durumda faturalandırılırsınız.

Yardım ve destek alma

Sorularınız için Media Services ile iletişime geçebilir veya aşağıdaki yöntemlerden birini kullanarak güncelleştirmelerimizi izleyebilirsiniz:

Q & A
Stack Overflow. ile soruları etiketleme azure-media-services.
Destek istemek için @AzureSupport @MSFTAzureMedia veya kullanın.
Azure portal üzerinden bir destek bileti açın.

Share via