分類
好用軟體

Facebook直播即時投票畫面產生器

相信大家已經看過許多 Facebook 直播上有投票票數的畫面吧, 想要自己做直播, 也想要加入與網友互動投票票數的畫面要怎麼做呢? 網路上有一些介紹的文章, 不過還是用產生器做最快.

於是就寫了一個產生器來進行這種畫面產生, 連結如下:

http://sample.diary.tw/fblive-vote/

操作說明,

取得直播 id:

首先要開 Facebook 的直播(該直播必須在塗鴨牆上已公開了, 才能取得 id), 開好之後, 到已發行直播的介面上, 把滑鼠移動到發行直播的時間, 如下:

(以上圖片引用擷圖自: https://www.facebook.com/setnews/videos/1208775819207004/ 若原內容已移除請見諒.)

也就是把滑鼠移到那個”4小時”的上面, 下方會出現連結, 把連結最後的數字記下來, 也就是你的直播影片 id (postid), 也就是 1208775819207004

然後到產生器介面上填入該 id, 下面的背景色與背景圖可依需要填入, 最後的 6個互動投票會使用哪些, 說明文字是什麼, 以上面三立新聞為例, 可以填入如下內容:

按下 submit 即可產出連結, 再連到該畫面可得:

這個數字會隨著網友的投票而跳動, 也就是直播的來源之一, 操作方式在 OBS 壓縮器上, 新增一來源為 BrowserSource, 填入上面的網址, 即可將這個動態的結果秀在壓縮器上, 送出直播畫面的結果. (預設的 BrowserSource 為 800×600, 產生器的畫面是 1280×720, 記得要調整一下:

為你的 facebook 直播來點更有趣的互動吧.

投票選項若為2, 3 則為一行平均分配, 若為 4就會是像上面一樣上2下2, 若為 5則是上2下3的方式, 若為 6, 則為上3下3.

另外若是需要在 OBS 中, 背景內容能夠透明, 則將 bgcolor 與 bgimage 留空, 然後在 OBS 中, 的 BrowserSource 下方 CSS 部分調整 background-color: rgba(0, 0, 0, 0) 如下:

之後把這個 BrowserSource 放在最上層, 下面的圖層也都會透出來, 就可以做到透明圖層的效果了. 如下:

效果還蠻不錯的.

繼續閱讀:

如何使用第三方壓縮器在Facebook個人帳號上進行直播 https://diary.tw/archives/1620
皮克直播使用 obs 教學 http://tw.pikolive.com/liveteach/facebook
國外的操作教學 https://socialwall.me/en/capture-stream-in-real-time-facebook-live-reactions/
Facebook直播也能投票 心情計數這樣玩! https://www.saydigi.com/2016/11/facebook-live-reactions.html

分類
好用軟體

如何使用第三方壓縮器在Facebook個人帳號上進行直播

Facebook 上直播很有趣, 而且可以更快速地傳播, 但目前支援第三方壓縮器的功能只在粉絲團上有, 個人帳號沒有. 為什麼要用第三方壓縮器(encoder)呢? 主要是希望有更好的品質, 或是直接應用在玩遊戲的畫面直播, 像是 OBS (https://obsproject.com/), XSplit (https://www.xsplit.com/), Wirecast (付費工具, http://www.telestream.net/wirecast/overview.htm) 等工具.

然後目前 Facebook 介面上, 只有粉絲團有這個功能, 個人帳號只能用手機發起一個直播, 要如何進行這個部分呢, 可以使用 facebook api 來完成, 參考這裡:

https://developers.facebook.com/docs/videos/live-video/exploring-live#golivedialog

當然, 要實作這個需要寫個小程式的網頁來達成, 這裡實作了這個功能, 方便大家來使用, 請連結:

http://sample.diary.tw/fblive-with-3rd-encoder/

只需要點擊上面按鈕, 就可以進行設定程序了, 最後可以拿到 rtmp 用的 url 與金鑰, 就可以放到第三方的壓縮器進行直播.

OBS 輸入 rtmp 後直播操作介紹:
https://obsproject.com/forum/resources/how-to-stream-to-facebook-live.391/
https://axiang.cc/archives/22392

分類
Javascript

線上幸運抽獎-手機版

之前一直要找時間做一個手機用的版本, 終於昨天花點時間寫好了, 有需要的朋友們歡迎多加利用, 網址如下:

http://sample.diary.tw/lucky-draw/m

功能與原來的版本相同, 只是介面用了 jQuery mobile 的方式呈現, 分別將說明、名單、獎項與抽獎放在4個分開的介面上, 利用下方的切換功能來進行切換, 一樣可以隨時加碼. 抽獎結果的部分, 考慮手機介面較小, 所以最後抽出的放在最上面, 而且上方會出現目前待抽的獎項與剩餘人數, 剩餘獎項與已得獎組數等資訊.

最後還是希望大家能多多利用, 也提供建議, 謝謝.

原來的電腦版介紹: https://diary.tw/archives/1187