分類
好用軟體

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

分類
程式技術

好用Google中文字體

製作網站時, 前端的中文字體真的是很傷腦筋, 又沒有那麼多的選擇, 又需要考慮使用者端是否有對應的字型. Google Font 計畫提供了許多字型可供應用, 也有不少繁體字型可供應用.

先來看看有哪些吧:

https://fonts.google.com/earlyaccess

上面是目前所有新增的 Google Font 的字體(非英文與拉丁文為主的), 我們可以用 Chinese 來查看看有哪些:

楷體 cwtexkai
圓體 cwtexyen
仿宋體 cwtexfangsong
Noto Sans TC notosanstc
明體 cwtexming
黑體 cwtexhei

這6種字體可供應用, 使用方式也很簡單, 直接使用對應的 CSS 即可, 以楷體為例, 可以看到他的 CSS 引入語法如下:

@import url(http://fonts.googleapis.com/earlyaccess/cwtexkai.css);

之後只需要在對應的 class 下 font-family 語法即可, 如下:

font-family: 'cwTeXKai', serif;

為方便一次檢視所有字體, 可以參考範例資料:

http://sample.diary.tw/42/index.htm

繼續閱讀:
http://www.ithome.com.tw/news/108941

分類
程式技術

持續維持開發者的熱情與學習

從這裡看來的:

每位開發者都該看:如何在四十歲後還能繼續從事軟體開發? http://www.inside.com.tw/2016/09/21/being-a-developer-after-40

的確開發者需要一定的熱忱維持才行(其實任何工作也是如此), 其實年齡一直都不是問題, 而是心態, 不過面對變化快速的技術, 開發者需要隨時把握時間來積極學習(哪個工作不是如此呢?), 面對這樣的挑戰.

找個自己喜愛的技術領域, 持續關注與學習, 多研究相關的應用領域, 另外教學相長也是很重要的, 參加讀書會或是 open source 聚會等, 都能讓自己保持活力與學習的心情, 這個也是一種持續進步的方法.

文章中提到的種種, 也都是很棒的建議方向, 大綱如下:

  1. Forget The Hype (忘記各種程式語言與架構的炒作與熱潮)
  2. Choose Your Galaxy Wisely(慎選你的星系)
  3. Learn About Software History(了解各種軟體的歷史)
  4. Keep on Learning (持續學習!)
  5. Teach(指導其他人)
  6. Workplaces Suck(工作場所糟糕透了)
  7. Know Your Worth(了解自我的市場價值)
  8. Send The Elevator Down (虛心地接受任何意見)
  9. LLVM(一個自由軟體專案,是一種編譯器的基礎建設,以 C++ 寫成)
  10. Follow Your Gut(相信你的直覺)
  11. APIs Are King(API 是王道)
  12. Fight Complexity(將複雜的事情簡單化)

加油, 每一個你都是最棒的.

分類
程式技術

略縮語(ellipsis)的html特殊字元與直排走文

略縮語, 也就是… (這裡用三個點來表示, 但在 html 裡, 有特殊字元可用, 分別是水平用的 … 與垂直的 ⋮ 兩個特殊字元 (參考完整版本: https://dev.w3.org/html5/html-author/charref)

另外直排走文的部分可以使用 writing-mode 這個屬性來指定, 如 vertical-rl 與 vertical-lr, 一般中文若為直式走文, 應為從右至左, 所以是 vertical-rl.

不過有趣的是, 在原本的水平走文時, 使用 … 與 ⋮ 都可以正常顯示方向, 但在垂直走文時, 這兩個略縮語, 反而會造成相反的方向, 這點在使用上要特別注意, 或是反過來說, 只需要使用 … 即可, 走文方向控制會處理好這個略縮語的走向.

參考這個在 jsfiddler 的範例:

https://jsfiddle.net/timhuang/jxhhyxkz/2/

 

另外也請參考略縮語的 css 自動截字的語法: 網頁排版文字排不下的略語語法 https://diary.tw/archives/1292

writing-mode語法參考: http://ithelp.ithome.com.tw/articles/10139081

分類
數學

[數學]快算答案的算式

題目: 1999 x 19981998 – 1998 x 19991999

答案是 0

算式:

分類
懶得分類

1TB的SD卡

同事傳來一個網址:

http://www.appledaily.com.tw/realtimenews/article/3c/20160922/953422

真的科技在進步的速度很快, 現在已經有 1TB 的 SD 卡問世了, 之前寫過

1TB硬碟: https://diary.tw/archives/422

再來是

2TB硬碟: https://diary.tw/archives/746

現在是 1TB 的 SD卡, 真的進步的速度很快呢.

分類
好用軟體

如何在mac os下的Firefox也有手勢放大縮小功能

習慣好用的Firefox, 在 MAC 下也是, 原來試著用 Safari, 再來用一下 Google Chrome, 都還是沒有 Firefox 的方便好用, 但是可惜在 MAC 下的 Firefox 預設並沒有支援兩指手勢(pinch)縮放畫面功能, 雖然仍有支援上下一頁的 swipe, 還有兩指的上下捲動, 但少了這一味還是可惜了一點.

查找了一下, 有個 plugin 可以提供這樣的功能:

https://addons.mozilla.org/zh-TW/firefox/addon/pinch-to-zoom-firefox-osx/

這樣一來就可以讓在 MAC 上的 Firefox 也支援 pinch to zoom 的功能了.

分類
好用軟體

CloudFlare已開始在免費計畫中支援Websockets!

CloudFlare (https://www.cloudflare.com/)自之前開始支援免費的 SSL 後, 現在又一新增功能, 免費的 Websockets, 大家都知道之前在使用 CloudFlare 時, 若要使用 Websockets 服務, 必須到 Enterprise tier 的 Plan 才有支援, 費用上可能很可觀, 不過現在開始, 已經支援了, 而且在所有 Plan 都提供了, 也就是即使是免費計畫也包含了.

大家的 nodejs project , 有使用 websockets 的, 都可以透過這個支援而使用 CloudFlare 了, 是不是太棒了.

來看看他的說明吧:
https://support.cloudflare.com/hc/en-us/articles/200169466-Can-I-use-CloudFlare-with-WebSockets-