Jamstack Sitenize Dakikalar İçinde Yayın Nasıl Eklenir?

Geçen hafta, dostum Todd Sharp'ın Streaming on Streaming adlı canlı yayınında bulunmaktan ayrı bir keyif aldım. O oturumun kaydını buradan izleyebilirsiniz:

Todd, Amazon Interactive Video Service'in (IVS) veya daha basit bir ifadeyle Twitch platformunun inanılmaz gücünü alıp ellerinize sunmanın bir yolunun baş geliştirici savunucusudur. IVS size şunları sağlar:

• İçeriğiniz için kanallar oluşturma yeteneği.

• Web tabanlı araçlardan OBS gibi daha güçlü araçlara kadar içeriğinizi yayınlamanın birden fazla yolu.

• Oldukça basit bir web SDK'sı da dahil olmak üzere içeriğinizi görüntülemenin birden fazla yolu.

• Süper detaylı raporlama.

• Ayrıca transkripsiyonlar, Lambda tabanlı sohbet denetimi ve daha fazlası gibi şeylere olanak tanıyan akışla derin entegrasyonlar.

  
  

Bu ticari bir hizmettir ancak AWS'deki hemen hemen her şey gibi, bazı şeyleri test etmenize ve sizin için anlamlı olup olmadığını görmenize olanak tanıyan ücretsiz bir katman da vardır.

Todd'la yaptığım oturumda, kendi belgelerini ve konsolunu "ilk kez geliştirici deneyimi" yoluyla sunmak istedi. Bu nedenle, öncelikle ürününüzle ilgili ilk geliştirici deneyimini düşünmek ve gerçekten önemsemek, muhtemelen yapabileceğiniz en önemli şeylerden biridir.

Geliştirici savunuculuğu alanındaki kendi kariyerimde, geliştiricinin katılımını sürekli inceleyip yorum yapmadan yeni bir şey denememin neredeyse imkansız olduğunu biliyorum. Todd bunu canlı yayınında yaptığı için büyük saygıyı hak ediyor.

Bir şeyleri kırmakla, yanlış şeyler yapmakla ve DX söz konusu olduğunda genel olarak en kötü kabusunuz olmakla tanınıyorum, bu onun adına oldukça cesurca bir davranıştı.

(Açık olmak gerekirse, bu akışın hiçbirini önceden planlamadık. Bana önceden hiçbir şey verilmedi ve sahip olduğum tek gerçek bilgi onun blog yazılarını ve genel sohbetini okumaktı.)

Tahmin edebileceğiniz gibi "kendi IVS'nizi yuvarlayın" gibi bir şey gerçekten karmaşık olacak, ancak bir saatlik oturumumuzda kanalımı kurduk, OBS'den ve bir web aracından yayın yaptım ve basit bir kurulum yapabildim. Akışı görüntülemek için web sayfası.

Jamstack'ta akışı destekleme fikri inanılmaz derecede çekici geldiğinden, burada öne çıkan bazı noktaları paylaşacağımı düşündüm. Bu biraz üst düzey olacaktır, ancak belgeler oldukça ayrıntılıdır ve ayrıntılar hakkında size daha fazla ayrıntı verecektir.

Ayrıca Başlarken kılavuzuyla başlamak isteyeceksiniz.

Bunu akılda tutarak, başlamanın ne kadar basit olduğuna dair temel bir taslağı burada bulabilirsiniz.

Birinci Adım - AWS'yi edinin

Bunu geçeceğim. Demek istediğim, sanırım söylediğim gibi değilim ve hiçbir şeyi varsaymamalısınız, ancak insanların büyük bir yüzdesi zaten AWS kullandığından, benim varsayımım sizin zaten bir hesabınız olduğu yönünde.

Root olanı yaptım ve kullandım, ancak yukarıda paylaştığım başlangıç bağlantısını takip ederseniz, daha kısıtlı erişime sahip bir kullanıcı ayarlamış olursunuz ki bu Yapılacak Doğru Şey ve Teknolojide Her Zaman Doğru Şeyi Yaparız. Öhöm.

İkinci Adım - Kanalınızı Oluşturun

Sonraki yapacağınız şey AWS konsolunun IVS bölümünde bir kanal tanımlamaktır:

Bir hatırlatma olarak, IVS'nin tox'u üzerindeki arama kutusu, bir şeyler bulma konusunda gerçekten iyi bir iş çıkarıyor. AWS biraz bunaltıcı olabilir ancak aramaları son zamanlarda işleri çok daha kolay hale getirdi.

Çoğu insanın akış hakkında bilgi sahibi olduğunu ve bir kanal hakkındaki temel fikri edindiğini varsayıyorum, ancak yayın yapmaya başlarsam muhtemelen kendime ait tek bir kanalım olur.

Şirketimin web sitesine yayın eklemek isteseydim eğitim, harici etkinlikler ve benzeri şeyler için bir kanala sahip olduğumu hayal edebilirdim.

En azından bir kanala ihtiyaç vardır. Yeni bir kanal oluştururken asgari olarak ad:

Seçeneklerden birinin akışları otomatik olarak S3'e depolamak olduğunu unutmayın. Bunu Todd'la yayında etkinleştirmedim, ancak etkinleştirmenin bu kadar basit olması gerçekten güzel. Açıkçası, büyük video dosyalarını saklamanın bir maliyeti olacak, ancak bunu etkinleştirmenin ne kadar basit olduğunu takdir ediyorum.

Üçüncü Adım – Yayıncınızı Belirleyin

Başlangıç belgeleri, SDK'larını, OBS Studio'yu veya FFmpeg'i kullanarak akış kapağınızı ayarlamayla ilgilidir. Geçmişte OBS Studio'yu kullanmıştım, dolayısıyla Todd'la yayın yaparken bunu kullandım. Ancak insanları daha önce hiç kullanmadıysanız oldukça bunaltıcı olabileceği konusunda uyaracağım.

Bu kesinlikle benim içindi (kahretsin, hala ne yaptığımı zar zor biliyorum).

Bunun yerine, Todd'un daha sonra akışta benimle paylaştığı başka bir seçeneği paylaşmama izin verin: Stream.ivs.rocks . Bu, IVS'yi test etmek için kullanabileceğiniz web tabanlı bir akış çözümüdür.

Sayfayı tarayıcınızda açın (Edge'in desteklenmediğini unutmayın, ancak bu konuda hiçbir sorun yaşamadım) ve ayarlarınıza ulaşmak için dişli çark simgesini tıklayın. Her ikisini de AWS konsolunda kanal ayrıntılarınızda bulabileceğiniz "İçe aktarma uç noktanızı" ve "Akış anahtarınızı" belirtmek isteyeceksiniz.

Benim yaptığım hatayı yapmayın - "İçe alma sunucusu" "İçe alma uç noktası" ile aynı DEĞİLDİR, bunu görmek için "Diğer besleme seçenekleri"ni açıp genişletmek isteyeceksiniz.

Bunu yaptıktan sonra aşağıdaki "Yayını başlat" düğmesini tıklayabilirsiniz, kelimenin tam anlamıyla bu kadar! Bu, "gerçek" bir yayın için yapacağınız bir şey olmasa da kurulumu çok daha basit ve hızlıdır.

Yayını başlattıktan sonra AWS konsoluna geri dönün, "Canlı kanallar"a tıklayın; yayınınızı çalışırken görebilirsiniz:

Kanal ayrıntılarına giderseniz, orada da görüntülenir:

Bu arada, oradayken ve gelecekte geçmiş yayınları ve yayınla ilgili her türlü harika ölçümü görüntüleyebilirsiniz.

Bu kullanılan terminolojinin çoğuna aşina değilim, bu nedenle akış konusunda yeniyseniz (ve geri bildirim olarak Todd ile paylaştığım bir şey) bu akılda tutulması gereken bir şeydir, ancak istatistikleri seviyorsanız, AWS size yardımcı olur.

Dördüncü Adım - Ön Uç

Aslında akışı görüntülemek, bunu nerede yapacağınızı bulmayı gerektirir. Bir web uzmanı olduğumu ve bu yazının bunu Jamstack'ta yapmakla ilgili olduğunu düşünürsek, onların belgelerindeki web kılavuzu bir sonraki adıma gitmek isteyeceğiniz yerdir. Tekrar ediyorum, ilk uygulama çok basit olabilir.

İşte tam bir uygulama:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <script src="https://player.live-video.net/1.18.0/amazon-ivs-player.min.js"></script> <style> video#video-player { width: 800px; height: 450px; } </style> </head> <body> <h2>My Stream</h2> <video id="video-player" playsinline controls autoplay></video> <script> const pbURL = 'https://e0e6ec1c389e.us-east-1.playback.live-video.net/api/video/v1/us-east-1.100330257216.channel.4tjprROF5ZWE.m3u8'; document.addEventListener('DOMContentLoaded', init, false); async function init() { if (IVSPlayer.isPlayerSupported) { const player = IVSPlayer.create(); player.attachHTMLVideoElement(document.getElementById('video-player')); console.log('player made'); player.load(pbURL); player.play(); } else console.log('u stink'); } </script> </body> </html>

Hadi parçalayalım. SDK'larını yüklerken üstte bir komut dosyası etiketiniz var. Daha sonra, önemli parçaları <video> etiketi olan HTML'mi ve onu uygun şekilde boyutlandırmak için CSS'imi aldım.

JavaScript, IVSPlayer bir örneğini oluşturur ve onu DOM'a ekler. pbURL değeri AVS kanalı yapılandırmasından gelir:

Ve işte burada!

Şimdi, çok fazla heyecanlanmadan önce, bunun kullanabileceğiniz en basit kod olduğunu, ancak aslında çok da dayanıklı olmadığını ve test sırasında kesinlikle bununla karşılaşacağınızı unutmayın, eğer yayın yapmıyorsanız, çalışırken bir hata alırsınız. Akışı yüklemek için. Bu kesinlikle mantıklı, yani daha iyi kod bunu halledebilir.

Web referansına hızlıca göz attım ve etkinlik desteğini görüyorum, bu nedenle akışın başlangıcını dinlemesini sağlayabilirsiniz; ya bu noktada yükleyin ya da web sayfasını görüntüleyen kişinin bir akışın başladığını bilmesini sağlamak için DOM'da bir şeyler yapın.

Bu kadar!

Tamam, elbette, bu üretim açısından pek değerli değil, ancak kelimenin tam anlamıyla bir yayın çözümünü bir saat içinde tamamladım. Bu ücretsiz olmayacak, bu yüzden akılda tutulması gereken bir şey, ancak bu kadar hızlı başlayabilmenizin yanı sıra kutudan ne kadar güç çıkarabildiğiniz beni gerçekten şaşırttı.

AWS'nin her şeyi halletmesi Jamstack için mükemmel bir seçimdir. Entegre edebileceğiniz sunucu tabanlı API'ler de var ve Netlify Functions gibi bir şeyi burada kullanırdım.

Tekrar ediyorum; dokümanlara göz atın. Sindirilecek çok şey olacak ama burada değindiğimden çok daha fazlası var.

Daha sonra Todd'un dev.to'daki birçok örneği paylaştığı gönderilerine göz atın. Son zamanlarda, tarayıcıda gerçek zamanlı, çok sunuculu bir görüntülü sohbet gösterdi ve ardından , yine tarayıcı olan çoklu sunucu ve canlı yayın örneğini gösterdi.

Sohbeti ve orada moderatörlük yapma gücünüzü içeren gönderileri sanırım benim favorim. Ayrıca kendi "LoFi" radyo istasyonunuzu oluşturma konusunda yazdığı makalenin özellikle harika olduğunu da tavsiye edeceğim.