直播導播台 Live!

最後編輯:2014-09-19 建立:2014-04-13 歷史紀錄

 

    IPA C 專案說明

IPA C太陽花運動期間由 g0v.today 彙整直播連結,運動之後直播連結四散不易傳播。希望透過直播連結導播台讓直播主主動 submit 連結,打造直播聯播網。

 

授權方式

(程式碼部分如 MIT/BSD /文件部分,如 CC-BY)

MIT, CC-BY

 

ET B專案目前狀態

IPA C開發中

 

JEFF H專案資訊

Repository: https://github.com/g0v/live

REX TLive: https://g0v.github.io/live/

JEFF HLink Manager: http://g0v.github.io/live/link_manager

Status Bar: http://g0v.github.io/live/status_bar.html

 

People

    NewCliCkerhttp://on.fb.me/1h5a301 這個小工具的作者是yutin嗎?我們這邊應該用的上喔?
    NewCliCker小工具的作者就是yutin沒錯 :+1:

 

NEWCLICK簡單來說就是 2014/05/10 09:00 ~ 21:00 我們可以利用 g0v x CCSP 2014 Hackathon 的免費場地衝自己專案的進度 :+1: (香油錢可自由樂捐)

  • 時間:2014/05/10 09:00 ~ 2014/05/10 21:00 ( iCal/Outlook, Google 日曆 )
  • 地點:台灣大學資訊工程學系德田館 B1 / 台灣大學資訊工程學系
  • 目前人數:18 / 200

直播導播台 Live! 小組

 

【報名方式】http://ccsp.kktix.cc/events/hackathon

此次黑客松會送給每位參加者一件紀念 T-shirt,報名時按照當日貴小組的預計出席人數來選擇票券,例如:〈你被服貿了嗎〉專案預計出席 4 個人,報名時就選擇 4 張「小組組員票」。

香油票的訂購方式較彈性,例如:一個 5 人小組參加 Hackathon,想要捐 1000 元,那就選擇 5 張「小組組員票」與 1 份 1000 元的「自由樂捐開源大眀神香油錢」。

    NEWCLICK

JACK S也許可使 Google AdSense 來請企業贊助

RSGHOSTReferences:

    IPA C目標與功能(要如何解決)

IPA C預定使用者

上傳連結:社運直播人、直播關注者

回報品質:直播觀看者

 

ET B預定功能

  • IPA C狀態回報系統
    • 回報:由觀看者回報直播狀態,分三種:ok、有問題(選擇、或key-in)、offline
    • 統計:後接 Google analytics
  • 訂閱
    • 觀看者
    • 直播者:可確認直播連結是否 ok

 

 

 

  • 投稿/審核連結

由直播人投稿連結後,管理群組簡單審核後直接貼入 hackfoldr 議題首頁。

    NewCliCker我一直在思考以下的問題,不知道大家意見如何?
    NewCliCker現階段也許人工審核是一種做法,但是若議題遍地開花,
    NewCliCker服貿、反核、割闌尾等等每一個議題北中南都有直播實況(遍地開花行事曆
    NewCliCker用人力來審核眞的是最好的方法嗎?有些直播講求時效性,等到有人批准審核時,也許實況直播就結束了。除了人工審核,我們也許要考慮增加一些自動化機制。
    NewCliCker理想上是利用各實況平台提供的api,沒有的話就利用像Yutin寫的 http://on.fb.me/1h5a301 這工具去掃,
    NewCliCker一是掃一些定期實況主(ex.音地、nonukestw)的最新正在實況的連結,這種比較不用審核的排在前面的folder,也省卻了需要審核的人力。
    NewCliCker另一是掃各大實況平台上面頻道的title,如果有特定關鍵字的就會列表出來。(ex. g0v、服貿、反核等等,可由使用者自訂filter),這個可以放在下面的folder,觀看人數越多的頻道排越上面。
    NewCliCker由於影像實況門檻正逐年降低,素人實況者正不斷增加,這樣就可以避免素人實況者因為不知道g0v實況連播網這窗口,而成為遺珠之憾。
    NewCliCker實例:有熱心使用者為Jsutin.tv這平台寫的實況列表
    NewCliCker就是直接掃整個Justin.tv平台並且針對一些關鍵字做即時分類及排序(以上例而言就是用頻道語言或收看人數來分類及排序),列表是即時的,每次F5都會更新至最新狀態。
    NewCliCker另外一點就是利用tag功能。由於影像實況門檻正逐年降低,素人實況者正不斷增加,實況列表也許需要有tag功能來方便觀眾分類不同的實況內容,同一個實況主可能今天實況服貿、明天實況反核...etc
    NewCliCker我有整理一份全球主要實況平台清單,台灣使用者較常用的排前七名https://gist.github.com/anonymous/11149505
    Justin Lee人工審核的部分是為了防止有人惡意搞破壞。而審核的部分先前的討論是交由特定的Facebook社團管理員來管理,針對這些會有直播的特定議題來說,Facebook社團成員的數量應該夠多,審核的時效性應該問題不大。
    Justin Lee不過如果可以用自動化的方式把連結加入資料庫,即時性部分應該可以做得更好。
    Justin Leetag的部分應該是有必要。
    Jeff Hung用 tag+1。
    Jeff Hung審核的部分,也許另外一種做法是類似 reddit、slashdot,讓 -1 比較多的自動沈下去。不過怎麼防 bot 也許就要再多想想了。有沒有人有相關系統的實作經驗可以分享的?
    NewCliCker贊同,實作的部分我覺得可以先參考實況平台的api,比如說Justin.tv的api有提供收看人數/人次,這種的指標就可以優先利用,不過缺點就是當該平台api改板就...0rz
    NewCliCkerref. Justin.tv api DocGitHub
    Justin Lee

NEWCLICK*

  • IPA C封存舊連結 history

自動收集過期連結,用 timeline 方式呈現或單純列表。

 

 

    JEFF H系統架構

 

JEFF HHackfoldr 整合

 

Hackfoldr 仍是一個最佳的 aggregator 解決方案。G0V Live! 利用與 hackfoldr 的 loosely integration 達成各項功能。

 

  • 影音串流支援
  • 原先 hackfoldr 若有多個 tabs 皆開啓影音串流,因為切換 tab 時 iframe 僅是隱藏,故 audio 仍會播放,若同時有多個影音串流播放中,則 audio 會被 mix 在一起,反而讓人聽不清楚。
  • 因此需要改而使用 <video> 直接於 hackfoldr 內嵌播放器,由 hackfoldr 於切換 tab 時,一併控制播放器。因此需要一一實作對於各家影音串流的支援。目前已支援的有:
    • youtube
    • ustream
  • 內嵌狀態回報控制列

 

  • 在切換到影音串流的 tab 之後,若有在 ethercalc 上加上 bar="<url>" 的 attribute,便會自動外增一個 iframe 顯示 <url>。此 <url> 即為狀態回報系統的狀態回報控制列,格式為: bar="hxxp://g0v.github.io/live/status_bar.html?<url>"
    • 依據 bar 設定顯示 iframe
    • 將此 iframe 於適當位置顯示於播放器旁邊。
      Jeff Hung狀態回報控制列放在播放器「下方」是個好選擇嗎?因為播放器本身就會有控制列了,這樣會變成下方會有兩個分屬不同系統且功能不同的控制列。
    • 狀態回報控制列的 <iframe> 應該要把播放器的 <iframe> 「擠開」。目前為「覆蓋」。
      Jeff Hung我先把狀態回報控制列放在「上方」了,缺點為「覆蓋」了 video title。
    • 自動偵測 <iframe> 高度,調整 hackfoldr 的設定。
  • clkao enhanced hackfoldr:

 

狀態回報系統

    Jethro Yu可用youtube API 直接查詢狀態{ live,none,upcoming }
    Jethro Yu介紹: https://developers.google.com/youtube/v3/docs/videos
    Jethro Yu範例: https://www.googleapis.com/youtube/v3/videos?id=j7AA2EsI_vI&key=AIzaSyDV_AKXmKO9cMD08u3W9j6PqC00qqFgYvI&part=snippet,statistics
  • 狀態回報控制列:
    • 使用 github pages,網址為 hxxp://g0v.github.io/live/status_bar.html?<url>
    • 畫面:

  • The web page of the Bar (HTML + Bootstrap)
    • mouse-over 「訂閱」按鈕時,pop up 說明解釋將會收到直播狀態改變通報。
      • 直播狀態改變通報 = 鄉民們按左邊按鈕的 events with proper aggregation
  • Mechanism to deploy as github pages
    • 請在 root folder 下打 `make deploy` 或 `./deploy.sh`。
  • 申請 Google Analytics
    Jeff Hung我在我自己的 Google Analytics 頁面下開了一個 g0v 的 account,於底下開了一個 g0v-live 的 property。
    Jeff Hung有沒有誰熟悉 Google Analytics 的?
  • 將 Google Analytics 的 account 開給需要的人。以下為有權限的人(有需要的人請把自己加進去,已經有權限的人請幫忙開):
    • jeffhung
  • 加上 social likes 按鈕,方便散佈資訊,並顯示 like counts。
    • 應該搭配 video 的 title,目前因為還抓不到,所以 title 的值為 <title>。
      • 取得 youtube title 的方法: curl 'hxxp://gdata.youtube.com/feeds/api/videos/<video_id>?format=5&alt=json'tx
  • bar 上面的「回報錯誤」看起來像是個按鈕,常會引人點按。
  • 當按下狀態回報按鈕時,發送 event 至 Google Analytics

  • 當 event 發送出去之後,暫時 disable 所有通報按鈕 N minutes。
    Jeff Hung目前 default 設定為 disable 5 分鐘。
  • 說明頁面
    • Jeff HungJustin Lee , 你可以幫忙嗎?我開了一個檔案在 app/assets/help.html。
    • 需要以另開新頁的方式開啟說明頁面,因為 status_bar 會被 <iframe> 包起來使用,上下寬度很小,沒有空間使用 pop-up。
    • 應該以 role 為單位解說。如:
    • Mock-up:

    Jeff Hung此 mockup 使用 Blasamiq 繪製,使用 Balsamiq 參與 open source 專案可以去信獲得免費 license。
  • 需要 TXT 協助。
  • 定時匯整記錄於 Google Analytics 的狀態回報,並依據 subscription 發送給 subscribers
    • 能夠以 service account 登入使用 google analytics api
      • Jeff Hung這邊我卡關了,以下先列出參考資料:
        Jeff Hunghttps://github.com/google/google-api-nodejs-client/blob/master/examples/jwt.js
        Jeff Hunghttps://developers.google.com/admin-sdk/directory/v1/guides/delegation
        Jeff Hunghttp://www.labnol.org/internet/google-apps-free/26926/
        Jeff Hunghttps://developers.google.com/analytics/devguides/reporting/core/v3/reference
        Jeff Hunghttps://developers.google.com/accounts/docs/OAuth2ServiceAccount
        Jeff Hunghttp://dannysu.com/2014/01/16/google-api-service-account/
        Jeff Hunghxxps://gist.github.com/PaquitoSoft/4451865
    • 抓取 category 為 VideoStatus 的 events,並整理之。
      • Jeff Hung存在 firebase 裡,schema 見 g0v-live.example.json。每一次抓取都有存起來,這樣 (1) 可以畫狀態變化圖;(2) 其實 google analytics 只能抓一天的資料。
        Jeff Hung因應 GA 只能抓最短一天的資料,所以這裡的 count 一律以「昨天+今天」處理
    • 發送給 subscribers
  • clkao enhanced hackfoldr:
    • http://hackfoldr.org/hackfoldrtest/9S9TGa-b0pU
    • https://ethercalc.org/hackfoldrtest
  • References:
    • https://github.com/g0v/api.ly/blob/master/bill-analytics.ls
    Justin Lee抱歉剛剛誤刪了一位朋友(是RSGHOST嗎?)在製作後端的訊息,現在確實需要後端的支援。
    Justin Lee在現場的時候,我已經寫了一部份的網頁,在用Firebase做後端遇到一些狀況,如果可以人幫忙處理後端就太好了

 

上稿審核界面

 

    Jeff Hung之前 Justin Lee 放上來的畫面不見了。:-(

JUSTIN L

 

 

4/23版

這本版本的想法是讓使用者提供網址就好。收到的網址再由rsghost那邊確認後,把直播帳號加入直播掃描清單,之後就無需手動加入。

 

    Jeff Hung已 deploy 至 github pages: http://g0v.github.io/live/link_manager/
    Justin LeeJeff++
  • JEFF H自動抓取影音 title

 

影音串流資料庫

 

儘管狀態回報系統使用 Google Analytics 記錄大家的狀態回報,我們仍然需要有個地方收集上稿的影音串流。目前看來 Justin Lee 選擇使用 firebase 儲存。

    Jeff Hung能否麻煩 Justin Lee 寫一下 firebase 那邊的 schema 設計?Thanks.
    Justin Lee目前是timestamp, title, url,還在調整當中
    Justin Lee只存url, added_at

 

JEFF H已下架的影音串流,仍應留在資料庫裡,於 archive 畫面以 timeline 顯現。

    Jeff Hung在 hackath8n 的討論裡,我們的共識是,所有 events 皆保留。
  • Archive 畫面 mock up

 

與 g8v.tw 整合

(TBD)

 

與太陽花盒子整合

  • 太陽花盒子:https://g0v.hackpad.com/Fr9H87GPcUM
    Jeff Hung太陽花盒子需不需要制作狀態回報界面?

 

 

    IPA C相關專案:

NEWCLICK第五權電視牆監看「評」台g8v.tv

https://g0v.hackpad.com/lk9pamtKwyr

ET B呼叫 NewCliCker (irc: newclicker) XD

NEWCLICK收到,感謝 ET Blue 的invited,讓我注意到這一篇,更感謝 IPA chiu 起的頭,讓我重新審視自己的思緒化為文字時該注意的條理與重點。我寫的專案在這邊 第五權電視牆監看「評」台 g8v . tv 草稿 ,直播導播/聯播台的概念算是g8v.tv中的 近/中程 目標,已經把共筆權限改成public,讓大家一起編輯討論,然後我會開始試著先把目前我已經部分完成的簡陋成果放進hackfoldr來簡單的present一下自己的構想。

 

 

IPA C太陽花盒子

https://g0v.hackpad.com/Fr9H87GPcUM

 

JACK S我覺得如果要馬上可執行的點子 可能不是搞介面與太陽盒 因為馬B的爛攤子太多了 等於每天都有可能需要 直播等 所以 介紹使用 google+ hangouts on air 可參考看看

我說的這算 馬上應用方法 當然與後續增強版版 如妳們說的 中 遠 期的開發

[Google+] Hangouts 視訊聚會超好用 § 群組聊天、畫板、螢幕分享初體驗

如何在YouTube 做Live 視訊直播?(Hangouts 直播)

這樣寫一個小型 自動內嵌 YouTube 的介面與聊天室軟體 也許會比較ez 因為在 YouTube 上你不需有大量頻寬的成本問題也降低了硬體成本 ˋ

我也有寫在這篇 g8v.tv 因為開版的好像不是同一人 @@

*

https://www.youtube.com/watch?v=wcCxO079CjQ

*

https://www.youtube.com/watch?v=C3WouWiu7pI

Hangouts外掛

https://chrome.google.com/webstore/detail/hangouts/nckgahadagoaajjgafhacjanaoiihapd?utm_source=chrome-ntp-icon

Hangouts API

https://google-developers.appspot.com/+/hangouts/writing?hl=zh-tw

 

使你的Google Chrome成為即時資訊中心 – Knew Tab

閱讀更多:http://blog.3bro.info/archives/knewtab/#ixzz307GjARbK

http://blog.3bro.info/archives/knewtab/

 

Handsome Stats

https://www.handsomestats.com/demo/