Örneğe Göre İç HTML Sayfalarından Medya Akışı

Bu yüzden, medya akışının nasıl çalıştığıyla ilgili bazı cesur ayrıntıları anlamaya çalışan bir yazılım mühendisiyim. Uygulamamla ilgili çeşitli kodekleri, kap biçimlerini ve akış protokollerini anlamaya çalışarak günün aslan payını harcadım. Şimdiye kadar, nasıl çok iyi bir şekilde yanlış yönlendirilebileceğine dair anlayışım :

• Akış ortamı gerçekten kapsayıcı biçimine ve akış protokolüne dayanır :
  • Tüm ses verileri (ses codec'i aracılığıyla) bir ses bit akımına kodlanır
  • Tüm video verileri (yine kodek üzerinden) bir video bit akışına kodlanır
  • İki akış, sonuçta bir dosya (MP4, vb.) Haline gelen bir kapta birleştirilir ( çoğullanır mı? ) .
  • Özel bir medya sunucusu daha sonra bu kapsayıcıyı (MP4 dosyası veya başka bir biçim) RTSP gibi bazı standart akış protokolü aracılığıyla bir istemciye (belki de birinin tarayıcısında çalışan bir HTML5 Video oynatıcı) sunar.
    • Bir tarayıcı istemcisi durumunda, tarayıcının kendisinin bir şekilde HTML5 Video Oynatıcısına sunduğu bir RTSP istemcisi olduğunu varsayalım
• Ben olabilir bir bir MP4 dosyasını barındırmak web böyle nginx veya httpd olarak, sunucunun, ancak bu sunucular RTSP sunucular olmadığından, yalnızca MP4 tedavi isteklerine mümkün olacaktır indirme istekleri ve böylece, akarsu getiremeyecek medya dosyaları
  • Benzer şekilde, ne nginx curlne curlde RTSP'yi konuştuğundan , dosyaları bir nginx sunucusundan almak için kullanacak olsaydım, dosya indirme olarak değerlendirilirdi
• Ama akış medya sunucusuna (VideoLAN, RED5 Wowza vs.) MP4 dosyası barındırmak ve zaman, ben bir RTSP istemcisi kullanıyorsanız (veya herhangi bir desteklenen streaming medya istemci), bu sunucudan akışı istemek için o zaman ve ancak o zaman gerçek akış gerçekleşir mi
  • Bu nedenle, YouTube veya Vimeo "videoları" HTTP sunucuları tarafından HTTP (S) üzerinden sunulan HTML sayfalarında barındırılsa da, bu sayfalardaki (videoların gerçekte oynatıldığı yer) gömülü video oynatıcıların gerçekten bir saniye başladığını varsayıyorum. , bir akış sunucusuna sonradan bağlantı ve akış RTSP veya HTTP olmayan başka bir protokol üzerinden gerçekleşiyor

Bu benim anlayışım ve sanırım önce yukarıda belirttiğim bir şey yanlışsa, lütfen beni düzelterek başlayın! Aşağı yukarı doğru olduğumu varsayarsak:

Akış medya oynatıcıları, HTML sayfalarında çalışır ve HTML sunucuları tarafından sunulur, akışlı medya sunucularıyla (RTSP isteklerini sunan) akış (RTSP vb.) Bağlantıları nasıl kurulur?

Akış medya oynatıcıları, HTML sayfalarında çalışır ve HTML sunucuları tarafından sunulur, akışlı medya sunucularıyla (RTSP isteklerini sunan) akış (RTSP vb.) Bağlantıları nasıl kurulur?

Ortak Uygulamalar

RTSP şu anda, doğrudan akışlı (ör. IP kamera) veya yeniden akışlı (motor gibi ) uygulamalar / cihaz arabirimlerinde, kaydedilmiş medya dosyalarını bir HTTP web oynatma arabirimi üzerinden fiziksel bir konumdan gömülü oynatıcı.

Gibi görünüyor RTSP bir olan durum bilgisi protokol ve akış zaman daha TCP den UDP kullanır ve daha (IP kamera gibi) bir sunucu cihazı olarak TCP / IP ağına bağlı olduğunu kullanılır ve yemler UDP, vb yoluyla akışları dışarı Daha sonra bu beslemelere (sunucu) aynı ağdaki istemci olarak bağlanırsınız ve buna göre RTSP isteklerini kullanabilirsiniz.

^{Protokol direktifleri}

^{HTTP'ye bazı yönlerden benzer olmakla birlikte, RTSP, multimedya oynatmayı kontrol etmede yararlı olan kontrol dizilerini tanımlar. HTTP vatansız olsa da , RTSP'nin durumu vardır; eşzamanlı oturumları izlemek için gerektiğinde bir tanımlayıcı kullanılır. HTTP gibi, RTSP uçtan uca bağlantıyı korumak için TCP kullanır ve çoğu RTSP kontrol iletisi istemci tarafından sunucuya gönderilirken, bazı komutlar diğer yönde (yani sunucudan istemciye) gider.}

^{Burada temel RTSP istekleri sunulmaktadır. OPTIONS isteği gibi bazı tipik HTTP istekleri de kullanılabilir. Varsayılan aktarım katmanı bağlantı noktası numarası, hem TCP hem de UDP için 554'tür [3], ikincisi kontrol istekleri için nadiren kullanılır.}

^_kaynak

^vatansız

^{Durum bilgisi olmayan bir protokol, sunucunun, her iletişim ortağı hakkında oturum bilgilerini veya durumunu birden çok istek süresince tutmasını gerektirmez. Buna karşılık, dahili durumun sunucuda tutulmasını gerektiren bir protokol durum bilgisi olan bir protokol olarak bilinir .}

^{Vatansızlığın bir dezavantajı, her talebe ek bilgi eklenmesi gerekebileceğidir ve bu ek bilgilerin sunucu tarafından yorumlanması gerekecektir.}

^_kaynak

Mantıksal Akış

Bu formdaki medya akışını anlamanın yolu:

• medya içeriğinin bulunduğu sunucu, video / ses veri içeriğini akış dağıtımı için uygun formatlarda ve segmentlerde kapsülleyecek, sıkıştıracak, kodlayacak, vb.
• akış ortamına erişmek için bağlantıları dinleyen web sunucusu, ortam akışını sağlamak için gereken tüm kaynakları sağlar
• istemci geçerli kaynakları ve dosyaları ister ve indirir ve ardından yapılandırılmış olarak URL işaretçisi ve diğer parametreler aracılığıyla bunları oynatmak için sürekli bir şekilde birleştirir. İstemci düzeyindeki oynatma yazılımı, içeriğin düzgün oynatılmasını sağlamak için sırayla iletilen paketleri bir araya getirir.

HTTP ve RTSP'nin genel karşılaştırması için lütfen aşağıdaki Akış Teknolojileri bölümüne bakın.

ayrıca

Aşağıda Kendi Videolarınızı Asla Ev Sahipliği Yapmamanız Gereken 10 Neden bölümünde, sorunuzu "genel" olarak çok özel olmadan yanıtlamaya yardımcı olacak noktalara değindim.

Esasen, yerleşik medya oynatıcı kontrollerine sahip web sitesinin şunları yapacağını söylüyor:

• ⁽¹⁾ istemciden "bağlantı ve istek" üzerine istemci web tarayıcısı ayarlarını algılamak ve
• ⁽²⁾ bu, kodek ve diğer istemci tarafı algılama ayarlarını geçerli parametre değerlerine ayarlar ve ardından
• ⁽³⁾ videoyu ve video dosyalarını doğrudan barındırdığınız akış sunucusundan , barındırılan sunucudaki medya dosyasının URL'sini gösteren gömülü medya oynatıcı yapılandırmalarınızdaki diğer koda dayalı olarak doğrudan aktaracaktır.

^{Akış Teknolojileri}

^{İstemci tarayıcısı verileri sunucudan almalı ve işlenmek üzere akış uygulamasına iletmelidir. Akış uygulaması, verileri resimlere ve seslere dönüştürür. Bu işlemin başarısında önemli bir faktör, müşterinin uygulamanın bilgileri görüntüleyebileceği verileri daha hızlı alma yeteneğidir. Fazla veri bir arabellekte saklanır - uygulama içinde veri depolama için ayrılmış bir bellek alanı. Veriler iki sistem arasında aktarılırken gecikirse, tampon boşalır ve malzemenin sunumu düzgün olmaz.}

^{HTTP Protokolü}

^{HTTP, belgelerin İnternet'e bağlanmasının en baskın yoludur. İstemci, akışa alınacak dosyayı içeren sunucuya bağlantı kurar, dosya alınır ve bağlantı kapatılır. HTTP sunucusu tarayıcıya aktarılacak dosya türünü bildirir.}

^{HTTP Kullanmanın Avantajları}

^{HTTP kullanarak bir dosya aktarırken, özel bir aktarım sunucusu gerekli değildir. Tarayıcınız MIME türlerini anladığı sürece bir HTTP sunucusundan bir akış dosyası alabilir. HTTP kullanarak dosya akışının belirgin avantajlarından biri, güvenlik duvarlarından geçebilmesi ve proxy sunucuları kullanabilmesidir.}

^{Bazı Dezavantajları}

^{HTTP akışı, dosyaların güvenilir bir şekilde teslim edilmesini sağlamak için TCP / IP (İletim Kontrol Protokolü ve İnternet Protokolü) kullanır. Bu işlem eksik paketleri kontrol eder ve tekrar gönderilmelerini ister. Verilerin teslimatta kaybolması durumunda göz ardı edilmesini istediğinizde akış senaryosunda sorunlu hale gelir, böylece dinamik dosyalar oynatılmaya devam eder. HTTP modem hızını algılayamaz, bu nedenle sunucu yöneticileri farklı bağlantı türlerine sahip sunucu kullanıcılarına bilerek farklı sıkıştırma hızlarında dosyalar üretmelidir. HTTP sunucularından dosya akışı, yüksek talep durumları için önerilmez.}

^{RTSP Protokolü}

^{RTSP, akış sunucusu sağlayıcılarının çoğu tarafından kullanılan standart protokoldür. RTSP sunucuları, medya dosyalarını aktarmak için UDP'yi (Kullanıcı Datagram Protokolü) kullanır. UDP, dosyaların hedeflerine ulaştığını sürekli olarak kontrol etmez. Bu, akış uygulamaları için bir avantajdır, çünkü gecikme çok uzun olmadığı sürece dosya aktarımlarının kesilmesine izin verir. Bu yöntemin sonucu, zaman zaman veri kaybı olmasıdır, ancak gecikme küçükse dosyalar oynatılmaya devam eder.}

^kaynak

^{Kendi Videolarınızı Asla Düzenlememeniz İçin 10 Neden}

^{Kendi Kendine Barındırılan Videoya Yerleştirme veya Yerleştirme Videosu Hakkında Konuşuyoruz}

^{İlk olarak, video dosyanızı YouTube, Vimeo veya Wistia gibi üçüncü taraf bir video barındırma hizmetine yüklersiniz.}

^{Ardından, size verdikleri küçük bir kodu kopyalayıp kendi WordPress sitenizdeki yayınınıza veya sayfanıza yapıştırın. Video sitenizde, yerleştirme kodunu yapıştırdığınız yerde görünür, ancak videonun kendisi, WordPress sitenizin barındırıldığı kendi web sunucunuzun aksine video ana makinesinin sunucularından yayınlanır.}

^{4. Web Video için Standart Tek Dosya Formatı Yok}

^{Geçerli HTML5 taslak belirtimi, tarayıcıların hangi video biçimlerini desteklemesi gerektiğini belirtmez. Sonuç olarak, her biri farklı bir formatı destekleyen büyük web tarayıcıları birbirinden ayrıldı. Internet Explorer ve Safari, H.264 (MP4) videoları oynatır, ancak WebM veya Ogg oynatmaz. Firefox, Ogg veya WebM videolarını oynatır, ancak H.264 oynatmaz. Neyse ki, Chrome tüm büyük video formatlarını oynatacak, ancak videonuzun tüm büyük web tarayıcılarında oynatılmasını sağlamak istiyorsanız, videonuzu birden çok formata dönüştürmeniz gerekir: .mp4, .ogv ve .webm}

^{5. Umarım videoları dönüştürmeyi seversiniz. Çok.}

^{Kitlenizin çoğu, videolarınızı yüksek hızlı bir İnternet bağlantısı sayesinde masaüstü veya dizüstü bilgisayarlarından izleyecektir. Bu kişiler için, istedikleri takdirde tam ekran izleyebilmeleri için büyük, HD kalitesinde bir dosya sunmak istersiniz. Genel olarak bu, yüksek akış bit hızında (5000 - 8000 kbps) 1080p veya 720p dosyası anlamına gelir.}

^{Ancak, telefon ve tablet gibi mobil cihazlara ve daha yavaş İnternet bağlantısına sahip izleyicilere dağıtım için daha küçük, daha düşük çözünürlüklü bir sürümü kodlamak istersiniz.}

^{6. Video Oynatıcılar}

^{Bir video oynatıcı, sitenize yüklediğiniz, bağlantı hızıyla birlikte hangi cihazın videonuzu istediğini otomatik olarak algılayacak ve daha sonra bu kişiye uygun sürümü dağıtacak küçük bir web yazılımı parçasıdır.}

^{7. Hantal Kod [veya Kısa Kodlar]}

^{Üçüncü taraf bir eklenti veya WordPress'in yerleşik video yeteneklerini kullansanız da, video oynatıcıya hangi formatları oluşturduklarını ve sunucudaki konumlarını bildirmek için biraz kod oluşturmanız gerekir. Şuna benziyor…}

<video poster="movie.jpg" controls>
<source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'/>
<source src="movie.ogg" type='video/ogg; codecs="theora, vorbis"'/>
<source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>
<p>This is fallback content</p>
</video>

Peki sitenize video eklemek için en iyi çözüm nedir?

Üçüncü taraf bir video barındırma hizmeti kullanın, ardından videonuzu WordPress yayınınıza veya sayfanıza gömün.

Birinci Adım: Videonuzu Vimeo PRO gibi popüler ve köklü video barındırma hizmetlerinden birine yükleyin.

İkinci Adım: Videonuz yüklendikten ve görüntülenmeye hazır olduğunda, URL'yi videonuza kopyalayın. WordPress sitenize dönün ve URL'yi videonuzun görünmesini istediğiniz yayınınıza veya sayfanıza yapıştırın.

---

^{İnsanlar sayfanızı görüntülediğinde, video URL'yi yapıştırdığınız konumda görünür. Ancak video dosyasının kendisi, WordPress sitenizin barındırıldığı kendi sunucunuzun aksine video ana makinesinin sunucularından yayınlanacaktır.}

_{Katıştırılmış video oynatıcı, kullanıcının cihazını, tarayıcısını ve İnternet bağlantı hızını otomatik olarak algılar ve ardından video dosyasının uygun sürümünü onlara sunar. Sitenize yüklenecek bir şey yok. Güncel tutmak için eklenti yok. Zor kod yok.}

_kaynak

Aşağıda, bir video tarayıcıda görüntülendiğinde neler olup bittiği sorunuzu aşağıda ele alacağım. Konu çok geniş, bu yüzden sadece ilgili öğelere değineceğim.

HTML5, <VIDEO>JavaScript ve CSS kullanırken görüntülenen videoyu tarayıcıya entegre etme sorununu çözen etiketi tanıttı . Önceki <OBJECT>etiket harici yazılım gerektiriyordu ve sayfaya kötü bir şekilde entegre edilmişti. Geçerli olan yeni etiket, herhangi bir standart getirilmemesine rağmen tarayıcının bir video oynatıcı olmasını da gerektiriyordu. Sonuç, tek çözümün video sunucusunun birkaç video formatı sunması ve tüm bu alternatif kaynakların <VIDEO>, tarayıcının desteklediği tarayıcıyı seçeceği etikette belirtilmesi olduğu standartların tamamen parçalanmasıydı .

Birden çok kaynağa sahip bir etiket örneği:

<video width=320 height=240 controls poster=image.jpg>
   <source src="movie.mpd">
   <source src="movie.webm">
   Your browser does not support the video tag.
</video>

<VIDEO>Etiket kendisi protokol agnostik, yani RTSP olmak üzere tarayıcı tarafından desteklenen herhangi bir protokol kullanabilir. Destek MPEG-DASH protokolü çoğu cihaz ve yerli tarayıcılar veya hiçbir ekstra eklentileri gerekli değildir yolu deneyerek HTML5, oynayacak, böylece (HTTP üzerinden Dinamik Adaptif Akış) son zamanlarda, çok kapsamlı bir hale gelmiştir. Bu Aygıt ve Tarayıcı Uyumluluk tablosuna bakın . Sunucunuzu MPEG-DASH hizmetine hazırlamak için bu Mozilla makalesine bakın . DASH HTTP aracılığıyla çalışır, bu nedenle HTTP sunucunuz bayt aralığı isteklerini desteklediği ve .mpd dosyalarını sunacak şekilde ayarlandığı sürece çalışır mimetype="application/dash+xml".

İstemci ve sunucu arasındaki normal etkileşim aşağıdakine benzer. HTML5 VIDEO için, oynatma için yeni bir bağlantı açabilmesine rağmen tarayıcı da oynatıcıdır.

İlk bağlantı, istemcinin videoyu görüntülemek için kullandığı meta verileri sağlar. Bu meta verileri almak için RTSP protokolü kullanılmışsa, daha sonra video + ses verilerini aktarmak için bir RTP bağlantısı oluşturulur. RTCP protokolü, sunucuya ek komutlar aktarmak için kullanılır.

RTP, RTCP ve RTSP'nin tümü farklı bağlantı noktalarında çalışır. Genellikle RTP N bağlantı noktasında olduğunda, RTCP N + 1 bağlantı noktasındadır. Bir RTP oturumu, alıcının sonunda birleştirilecek birden fazla akış içerebilir; örneğin, ses ve video ayrı kanallarda olabilir.

Kimsenin içeriğinizden kilitlenmemesi için hem telifsiz kodekleri, webM veya Theora'yı hem de H.264 videoyu ve hem Vorbis hem de MP3 sesini sunmalısınız. (Kolay dedi, yapmak zor.)

RTSP için ayrıntılı olarak olan budur:

1. İstemci, tipik olarak RTSP için bilinen bağlantı noktası 554 numaralı TCP bağlantı noktasında sunuculara bir TCP bağlantısı kurar.

2. İstemci daha sonra HTTP'ye benzer bir biçime sahip, her biri sunucu tarafından onaylanan bir dizi RTSP başlık komutu vermeye başlayacaktır. Bu RTSP komutları içinde istemci, sunucuya desteklediği RTSP sürümü, veri akışı için kullanılacak aktarım ve ilişkili UDP veya TCP bağlantı noktası bilgileri gibi oturum gereksinimlerinin ayrıntılarını açıklayacaktır. Bu bilgiler DESCRIBE ve SETUP başlıkları kullanılarak iletilir ve sunucu yanıtı üzerinde, istemcinin ve herhangi bir geçici proxy aygıtının akışı daha sonra değiş tokuşlarda tanımlamak için kullanabileceği bir Oturum Kimliği ile çoğaltılır.

3. Aktarım parametreleri anlaşması tamamlandıktan sonra, istemci, sunucuya RTP veri akışının dağıtımına başlamasını bildirmek için bir OYNAT komutu verir.

4. İstemci akışı kapatmaya karar verdikten sonra, sunucuya bu kimlikle ilişkili RTP dağıtımını durdurmasını bildiren Oturum Kimliği ile birlikte bir TEARDOWN komutu verilir.

Daha fazla okuma :

• Akış protokollerinin temelleri
• Uygulama Katmanı Protokollerini Anlama - Gerçek Zamanlı Akış Protokolü (RTSP)
• HTML5 Video'ya Giriş (Opera)
• HTML5 Ses ve Video: Bilmeniz Gerekenler
• RTSP Analizi Wireshark

İşte hızlı ve kirli bir cevap-

Web'de video oynatmak ve gerçek zamanlı olarak gerçek zamanlı olarak oynatmak arasında bir fark vardır.

Oynatma, web sayfasına dahil olan bir oynatıcı aracılığıyla yapılır (flash, JS veya bir html5 video nesnesi kullanıyor olabilir). İstemci (tarayıcı) bu oynatıcıyı indirir ve çalıştırır. Oyuncu, basit bir indirme URL'sinden video getirir. Aslında, Youtube'da bile, barındırılan video dosyalarına doğrudan erişmenizi ve herhangi bir dosya gibi indirmenizi sağlayan programlar vardır. Sistem düzenli olarak eski bir indirme bağlantısı kullandığından, RTSP gibi karmaşık akış protokollerine gerek yoktur

Gerçek zamanlı akış (örneğin, bir web kamerasından) .. iyi, daha zor. Flash'ta bu işlev yerleşik olarak bulunur, ancak artık kullanılmamalıdır. HTML5 video gerçek zamanlı akışı desteklemez, ancak insanlar dosya barındırma sunucusunu sunduğu video dosyasını sürekli değiştirerek "kandırmayı" başardılar.