最近在作的一個小項目須要用到相關技術,找到這篇文章貌似不錯,因而就翻譯轉載上來了。
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 - PhobosLabhtml
筆者以前作一個實時監控應用的時候,曾搜索過一些將 iPhone 的攝像頭拍攝的畫面實時傳輸到瀏覽器的方案,一個都沒有。html5
就 HTML5 來講,視頻(實時)直播是一個很悲催的活,HTML5 視頻目前尚未一個正式的流式傳輸支持,Safari 支持很蹩腳的 HTTP Live Streaming 而且也即將有 Media Source Extension 規範和 MPEG-DASH。但全部這些方案都是將視頻分紅小片,由瀏覽器單獨下載,所以會產生最小五秒鐘的延遲。node
下面是一個徹底不一樣的方案,能夠支持全部現代瀏覽器:Firefox、Chrome、Safari、Mobile Safari、Android 版 Chrome 甚至是 IE10。linux
這套方案向後兼容,沒有用到什麼新奇技術,目前暫時不支持音頻。但它出乎意料地好用。github
來自攝像頭的視頻被 ffmpeg 編碼,而後經過 HTTP 傳遞給一個 Node.js 寫的小腳本;腳本會將這條 MPEG 視頻流經過 WebSockets 分發給全部連接的瀏覽器;瀏覽器使用 JavaScript 解碼 MPEG 視頻流並將解碼後的畫面渲染到 Canvas 元素上。web
你甚至能夠用樹莓派來傳輸視頻。可能會有點慢,可是筆者測試過以 30fps 的幀率實時編碼 320x240 視頻不成問題。對筆者來講這是最好的樹莓派視頻方案。npm
下面是構建步驟。首先你須要取得最新版本的 ffmpeg,最新的安裝包能夠從 deb-multimedia 得到。若是你使用 Linux,你的攝像頭應該在位於 /dev/video0
或 /dev/video1
;在 OS X 或 Windows 上你能夠用 VLC。瀏覽器
確保用來分發視頻流的服務器安裝了 Node.js。下載 phoboslab/jsmpeg 項目的 stream-server.js 腳本。安裝 WebSocket 包 ws
並啓動服務器:服務器
npm install ws node stream-server.js 你的密碼
這裏的密碼是用來確保不會有好奇寶寶來劫持你的視頻流用的。若是服務器運行正常,你應該會看到這樣的輸出:
Listening for MPEG Stream on http://127.0.0.1:8082/<secret>/<width>/<height> Awaiting WebSocket connections on ws://127.0.0.1:8084/
服務器啓動後,你就能夠啓動 ffmpeg 並將它指向到正在運行的這個域名和端口了:
ffmpeg -s 640x480 -f video4linux2 -i /dev/video0 -f mpeg1video -b 800k -r 30 http://example.com:8082/你的密碼/640/480/
這條命令會開始從攝像頭捕捉 640x480 的視頻,並編碼成 30fps 碼率 800kbps 的 MPEG 視頻。編碼後的視頻會經過 HTTP 被髮送到所指定的服務器和端口。確保密碼正確,URL 中的長和寬也須要正確指定,不然服務器沒法正確判斷當前的分辨率。
在樹莓派上你可能須要將分辨率降至 320x240 來確保編碼速度仍能維持 30fps。
要觀看直播,須要從前文提到的 jsmpeg 項目中下載 stream-example.html 和 jsmpg.js 文件,更改 stream-example.html 中的 WebSocket URL 爲你的服務器地址,並使用你喜歡的瀏覽器打開。
若是一切正常,你就能看到少於 100ms 延遲的流暢的攝像頭畫面。很好很強大對不?
更便捷的方案請圍觀原文的 Instant Webcam。
只是備忘一下,近期會再發一篇博文來總結一下各個方案的實際使用效果。重複一次原文地址 / Original post:
HTML5 Live Video Streaming via WebSockets - PhobosLab