摘要：但所有這些方案都是將視頻分成小片，由瀏覽器多帶帶下載，因此會(huì)產(chǎn)生最小五秒鐘的延遲。對(duì)筆者來(lái)說(shuō)這是最好的樹莓派視頻方案。確保用來(lái)分發(fā)視頻流的服務(wù)器安裝了。在樹莓派上你可能需要將分辨率降至來(lái)確保編碼速度仍能維持。

最近在做的一個(gè)小項(xiàng)目需要用到相關(guān)技術(shù)，找到這篇文章貌似不錯(cuò)，于是就翻譯轉(zhuǎn)載上來(lái)了。
Recently I"m interesting in these technologies and I"m working on a project related to it. I"ve found this useful article so I translated and posted it here.
原文地址 / Original post:
HTML5 Live Video Streaming via WebSockets -  PhobosLab

筆者之前做一個(gè)實(shí)時(shí)監(jiān)控應(yīng)用的時(shí)候，曾搜索過(guò)一些將 iPhone 的攝像頭拍攝的畫面實(shí)時(shí)傳輸?shù)綖g覽器的方案，一個(gè)都沒(méi)有。

就 HTML5 來(lái)說(shuō)，視頻（實(shí)時(shí)）直播是一個(gè)很悲催的活，HTML5 視頻目前還沒(méi)有一個(gè)正式的流式傳輸支持，Safari 支持很蹩腳的 HTTP Live Streaming 并且也即將有 Media Source Extension 規(guī)范和 MPEG-DASH。但所有這些方案都是將視頻分成小片，由瀏覽器多帶帶下載，因此會(huì)產(chǎn)生最小五秒鐘的延遲。

下面是一個(gè)完全不同的方案，可以支持所有現(xiàn)代瀏覽器：Firefox、Chrome、Safari、Mobile Safari、Android 版 Chrome 甚至是 IE10。

原文的這個(gè)位置提供了一個(gè)_偽_直播例子。

這套方案向后兼容，沒(méi)有用到什么新奇技術(shù)，目前暫時(shí)不支持音頻。但它出乎意料地好用。

來(lái)自攝像頭的視頻被 ffmpeg 編碼，然后通過(guò) HTTP 傳遞給一個(gè) Node.js 寫的小腳本；腳本會(huì)將這條 MPEG 視頻流通過(guò) WebSockets 分發(fā)給所有鏈接的瀏覽器；瀏覽器使用 JavaScript 解碼 MPEG 視頻流并將解碼后的畫面渲染到 Canvas 元素上。

你甚至可以用樹莓派來(lái)傳輸視頻。可能會(huì)有點(diǎn)慢，但是筆者測(cè)試過(guò)以 30fps 的幀率實(shí)時(shí)編碼 320x240 視頻不成問(wèn)題。對(duì)筆者來(lái)說(shuō)這是最好的樹莓派視頻方案。

下面是構(gòu)建步驟。首先你需要取得最新版本的 ffmpeg，最新的安裝包可以從 deb-multimedia 獲得。如果你使用 Linux，你的攝像頭應(yīng)該在位于 /dev/video0 或 /dev/video1；在 OS X 或 Windows 上你可以用 VLC。

確保用來(lái)分發(fā)視頻流的服務(wù)器安裝了 Node.js。下載 phoboslab/jsmpeg 項(xiàng)目的 stream-server.js 腳本。安裝 WebSocket 包 ws 并啟動(dòng)服務(wù)器：

npm install ws
node stream-server.js 你的密碼

這里的密碼是用來(lái)確保不會(huì)有好奇寶寶來(lái)劫持你的視頻流用的。如果服務(wù)器運(yùn)行正常，你應(yīng)該會(huì)看到這樣的輸出：

Listening for MPEG Stream on http://127.0.0.1:8082///
Awaiting WebSocket connections on ws://127.0.0.1:8084/

服務(wù)器啟動(dòng)后，你就可以啟動(dòng) ffmpeg 并將它指向到正在運(yùn)行的這個(gè)域名和端口了：

ffmpeg -s 640x480 -f video4linux2 -i /dev/video0 -f mpeg1video -b 800k -r 30 http://example.com:8082/你的密碼/640/480/

這條命令會(huì)開始從攝像頭捕捉 640x480 的視頻，并編碼成 30fps 碼率 800kbps 的 MPEG 視頻。編碼后的視頻會(huì)通過(guò) HTTP 被發(fā)送到所指定的服務(wù)器和端口。確保密碼正確，URL 中的長(zhǎng)和寬也需要正確指定，否則服務(wù)器無(wú)法正確判斷當(dāng)前的分辨率。

在樹莓派上你可能需要將分辨率降至 320x240 來(lái)確保編碼速度仍能維持 30fps。

要觀看直播，需要從前文提到的 jsmpeg 項(xiàng)目中下載 stream-example.html 和 jsmpg.js 文件，更改 stream-example.html 中的 WebSocket URL 為你的服務(wù)器地址，并使用你喜歡的瀏覽器打開。

如果一切正常，你就能看到少于 100ms 延遲的流暢的攝像頭畫面。很好很強(qiáng)大對(duì)不？

更便捷的方案請(qǐng)圍觀原文的 Instant Webcam。

只是備忘一下，近期會(huì)再發(fā)一篇博文來(lái)總結(jié)一下各個(gè)方案的實(shí)際使用效果。
重復(fù)一次原文地址 / Original post:
HTML5 Live Video Streaming via WebSockets -  PhobosLab