如何通過Firefox和WebRTC進(jìn)行YouTube直播

本文來(lái)自Meetecho的聯(lián)合創(chuàng)始人Lorenzo Miniero，他分享了如何通過Firefox和WebRTC進(jìn)行YouTube直播。Meetecho是著名的WebRTC服務(wù)器 Janus 的出品公司。LiveVideoStack對(duì)原文進(jìn)行了摘譯。

我們最近都看到了關(guān)于YouTube通過WebRTC進(jìn)行直播的新聞，但它僅僅適用于您使用谷歌瀏覽器?；鸷鼮g覽器和Edge均不適用，對(duì)于蘋果瀏覽器，說(shuō)實(shí)話，我并不太關(guān)心.....

我需要完成哪些工作，才能讓Firefox通過WebRTC發(fā)送內(nèi)容，并能觀看到它推送到Y(jié)ouTube上的直播呢？也許用一些HTML5 canvas的東西可以增加一些趣味。隨著Kamailio World Dangerous Demos賽季的開幕，這成了修補(bǔ)它的絕佳機(jī)會(huì)，這正是我所做的！

我需要的是：

一種在瀏覽器中捕獲視頻，然后以某種方式編輯它，并在WebRTC的 PeerConnection中使用它的方法;

WebRTC服務(wù)器從瀏覽器接收流;

某種技術(shù)將該流進(jìn)行轉(zhuǎn)換，使得YouTube的直播更加圓滿。

第一部分是很有趣的，因?yàn)槲抑皬奈催@樣做過。或者更確切地說(shuō)，在過去的幾年中，我已經(jīng)捕獲并發(fā)布過大量的WebRTC流，但我從未在瀏覽器端嘗試過捕獲視頻。我知道你可能會(huì)使用一些HTML5 canvas元素，但我從來(lái)沒有使用過它，所以我現(xiàn)在決定這樣做。還有朋友，它真的很有趣！它基本上總結(jié)為以下幾個(gè)步驟：

創(chuàng)建一個(gè)HTML5 canvas元素來(lái)進(jìn)行繪制;

通過慣用的getUserMedia來(lái)獲得媒體流;

將媒體流放入一個(gè)HTML5的video視頻元素中;

開始在canvas中繪制視頻幀，加上其他可能會(huì)很好的元素（文字疊加，圖像等）;

從canvas中使用captureStream（）獲取新的媒體流;

使用新的媒體流作為新的PeerConnection的源;

繼續(xù)在canvas上繪制，就像沒有盡頭一樣！

聽起來(lái)有很多步驟，但實(shí)際上它們很容易設(shè)置和完成。在短短幾分鐘內(nèi)，我有了一些基本代碼來(lái)允許我捕捉到我的網(wǎng)絡(luò)攝像頭，并為其添加一些疊加：在右上角加上一個(gè)logo，底部加上一個(gè)半透明條，還有一些文字的疊加。在修改代碼上我也做了動(dòng)態(tài)地修改，以便我可以動(dòng)態(tài)地更新它們。我相信對(duì)于很多之前使用過canvas的你們來(lái)說(shuō)，會(huì)嘲笑這些例子有多么的荒謬，但對(duì)于剛剛?cè)胧值奈襾?lái)說(shuō)，這是一個(gè)很大的成就！

不管怎樣，最酷的部分是我在測(cè)試網(wǎng)頁(yè)中進(jìn)行了一些基本的視頻編輯工作，以及將其用作PeerConnection源的方法。下一步是將這個(gè)WebRTC流送到服務(wù)器來(lái)讓我進(jìn)行播放。不足為奇的是，我使用了Janus的目的......這個(gè)想法很簡(jiǎn)單：我需要能夠接收WebRTC流的東西，然后能夠在其它的地方使用上它?？紤]到這是我?guī)啄昵伴_始研究Janus的關(guān)鍵原因之一，在幾年前它是一個(gè)完美的選擇！具體來(lái)說(shuō)，我決定使用的是Janus VideoRoom插件。實(shí)際上，正如預(yù)期的那樣，我需要一種方法來(lái)將傳入的WebRTC流提供給外部組件來(lái)進(jìn)行處理，在這種情況下，將其轉(zhuǎn)換為YouTube 直播所期望的用于發(fā)布的格式。這個(gè)VideoRoom插件，與其集成了SFU功能的相比，還有一個(gè)很好的功能，稱為“RTP轉(zhuǎn)發(fā)器”，這個(gè)功能完全允許。我將在后面解釋原因以及它的工作原理。

最后，我需要一些東西來(lái)將WebRTC流轉(zhuǎn)換為YouTube 直播所期望的格式。正如您可能知道的，傳統(tǒng)的方法是使用RTMP。有幾種不同的軟件可以幫助解決這個(gè)問題，但我選擇了簡(jiǎn)單的方式，使用FFmpeg來(lái)完成工作：事實(shí)上，我并不需要任何剪輯或發(fā)布功能（這些我已經(jīng)實(shí)現(xiàn)了），但只有一些東西可以轉(zhuǎn)化為正確的協(xié)議和編解碼器，這是FFmpeg非常擅長(zhǎng)的。顯然，為了實(shí)現(xiàn)這一點(diǎn)，我首先需要將WebRTC流推送到FFmpeg，在這里上述的“RTP轉(zhuǎn)發(fā)器”可以提供幫助。具體來(lái)說(shuō)，顧名思義，“RTP轉(zhuǎn)發(fā)器”可以簡(jiǎn)單地在某處轉(zhuǎn)發(fā)RTP數(shù)據(jù)包：在Janus VideoRoom的文章中，它們提供了一種方法，使用普通（或加密，如果需要的話）的RTP將來(lái)自WebRTC發(fā)布者的媒體數(shù)據(jù)包轉(zhuǎn)發(fā)到一個(gè)或多個(gè)遠(yuǎn)程地址。由于FFmpeg支持普通RTP作為輸入格式（使用一個(gè)SDP類型來(lái)綁定在正確的端口上并指定正在使用的音頻/視頻編解碼器），這是使用WebRTC媒體流提供它的最佳方式！

在這一點(diǎn)上，我得到了我所需要的一切：

瀏覽器作為編輯/發(fā)布軟件（canvas + WebRTC）;

Janus作為媒介（WebRTC-to-RTP）;

FFmpeg作為轉(zhuǎn)碼器（RTP-to-RTMP）。

也就是說(shuō)，最后一步是測(cè)試所有的這些。在本地測(cè)試中，這一切都預(yù)期的工作，在測(cè)試中使用優(yōu)秀的老版red5作為開源RTMP服務(wù)器，但很顯然，真正的挑戰(zhàn)是讓它與YouTube的 直播一起工作。所以我進(jìn)入到Meetecho 的YouTube帳戶的控制面板來(lái)驗(yàn)證它，等待要通常的24小時(shí)才獲得發(fā)布流的必要信息。這些基本上包括要連接的RTMP服務(wù)器，以及用于標(biāo)識(shí)流的唯一（和秘密）密鑰。

通過四處搜索，我找到了一些不錯(cuò)的代碼片段，展示了如何使用FFmpeg流式傳輸?shù)結(jié)ouTube Live，我修改了腳本以使用我的源和目標(biāo)信息，以便在那上面發(fā)布而不是在我的本地RTMP服務(wù)器上。令人欣喜的是，我讓它開始工作了，但它并不總是完美的工作，在某些地方總有一些問題，但是對(duì)于一個(gè)demo來(lái)說(shuō)，它已經(jīng)運(yùn)行的很好了。

就是這樣，真的，不需要其他“魔法”。這就可以很容易變成各種各樣的服務(wù)，可以通過做一些好的canvas上的工作（我做的是非?；A(chǔ)的）來(lái)改進(jìn)編輯部分，并使“RTP Forwarding + FFmpeg + YouTube Live授權(quán)證書”部分變得動(dòng)態(tài)化（例如，在端口和帳戶的使用方面），以支持多個(gè)流媒體和多個(gè)事件，但是這些細(xì)節(jié)都在那里。

是的，我知道你在想什么：我的意思是，我正在使用WebRTC進(jìn)行推流，并且它最終會(huì)進(jìn)入YouTube 直播中，但這不是一個(gè)直接的步驟。我所做的基本上是利用Janus的靈活性來(lái)處理WebRTC流，通過使用FFmpeg以YouTube的“Ye Olde”方式進(jìn)行實(shí)際廣播。無(wú)論如何，它仍然很酷！在客戶端使用HTML5 canvas使得以某種方式“編輯”推流部分變得容易了，給了我相當(dāng)多的創(chuàng)作自由。此外，使用WebRTC仍然給人一種很好的感覺！