分類
好用軟體

使用ffmpeg擷圖live streaming

Live streaming擷圖, 可以利用 ffmpeg 工具來達成, 指令如下:

ffmpeg -y -i {live streaming url} -frames:v 1 {output file}

其中 -y 為 overwrite, -i 為 input, -frames:v 1 指擷出一張圖, 而最後的 output 為輸出, 範例指令如:

ffmpeg -y -i https://cph-p2p-msl.akamaized.net/hls/live/2000341/test/master.m3u8 -frames:v 1 test.jpg

(上面的 live streaming url 使用這裡的測試連結: https://ottverse.com/free-hls-m3u8-test-urls/ 第6項)

取得的內容為:

如此便能快速取得擷圖.

繼續閱讀:

https://ffmpeg.org/ffmpeg.html

分類
程式技術

使用Clappr Video Player時滿版需求(CSS)

之前 Flash Player 因為已經 EOL 下架了. 參考: https://diary.tw/archives/11 (相信很多人也已經改了 html5 的解決方案了).

不過若是以純 video player, 個人建議使用這個 clappr player 是適合的替代品( https://github.com/clappr/clappr) , 用純 html5 的 media element 解決方案來達成 media player 功能, 無論是 mp4 或是 hls 的 live streaming.

目前有個使用上的需求, 就是要能滿版 player , 也就是不要出現比例上不正確時的上下出黑(letterbox)或左右出黑(pillarbox)的狀況.

上下出黑的 letterbox 示意圖:

左右出黑的 pillarbox 示意圖:

而要拉伸視訊至滿版播放器要如何進行設定呢? 原本在查找 clappr doc (http://clappr.github.io/)時, 一直沒有找到對應的設定, 後來發現其實在原本的 css 就有個設定可以達成, object-fit 這個屬性: https://developer.mozilla.org/zh-TW/docs/Web/CSS/object-fit

當這個屬性設定為 object-fit: fill; 時, 就可以達成 stretch to fit 的功能, 也就是不成比例的拉伸(或壓縮)為對應的尺寸, 而不會出現為了維持比例而出現的 letterbox 或 pillarbox.

可以參考這個範例:

https://codepen.io/timhuang/pen/vYGvpqo

繼續閱讀:

https://www.jacksonlin.net/20181218-letterbox-on-youtube/

 

分類
WebTrend

什麼是LBRY, 和Youtube有什麼關係?!

這個 LBRY 讀做 library, 主要的訴求是:

LBRY is a free, open, and community-run digital marketplace.
Build the future of content freedom.

可以參考這裡: https://lbry.tech/

LBRY is a secure, open, and community-run digital marketplace.

可以參考這裡: https://lbry.org/

簡單地說就是一個供應安全、自由、開放、又是社群經營的數位市集, 所以能有內容儲存、交易、推薦等機能的一個開放架構.

分類
WebTrend

遠距醫療挑戰與契機

  1. 遠距醫療挑戰與契機!健保署:2021 年正式納入健保給付範圍 https://geneonline.news/index.php/2020/12/04/telemedicine-future-trend/
  2. 台灣遠距醫療法規現況與未來挑戰 https://udn.com/news/story/6871/5009650
  3. 健保署葉逢明:匡列一億臺幣預算 2021將為健保給付遠距醫療元年 https://news.gbimonthly.com/tw/article/show.php?num=35138

看起來遠距醫療因為疫情與偏鄉等資源分配議題, 加速開放了, 這個產業應用, 實際上的難度不在遠距, 而是在診斷啊, 若不是能用視訊方式來實現的檢查, 實務上真的能看診或解決病患的問題嗎?

這個方式很棒, 但是是否能有效看診, 或是解決病患的痛苦, 才是要思考的問題, 不過政府與醫界能正視與肯投入這個應用技術的方式來擴大與解決醫病問題, 的確是很值得鼓勵的!

分類
blog服務

方便好用的媒體寄存發行工具-Publit.io

網站有時需要寄存媒體服務(像是圖片, 影片等), 可以放在本機, 可以利用CDN, 也可以利用這種寄存服務. Publit.io

https://publit.io?fpr=diarytim (此連結為本站推薦代碼)

它提供了圖片寄存, 影片寄存, 而且免費方案就能享有10GB空間, 每月20GB傳輸量可供應用.

分類
好用軟體

VideoLink2me快速線上視訊會議網站

通常要開視訊會議需要高昂的硬體設備, 當然, 也有軟體的解決方案, 是不是有更快速的方式呢? 有的, 可以利用這個網站: https://videolink2.me/

只需要在線上直接建立視訊會議室即可快速發起視訊會議, 不用註冊, 馬上可以發起一個線上的視訊會議, 而且免費.

另外它也直接只有聲音參與的方式, 並可以有文字聊天與傳送檔案功能, 目前使手瀏覽器可用外, 還有 chrome browser 的 app: http://bit.ly/vl-chrome-app, 還有 iPhone/iPad 的 App: https://itunes.apple.com/en/app/apple-store/id983787504?mt=8

需要快速開個會嗎? 用 videolink2.me 試看看.

繼續閱讀:
http://www.playpcesor.com/2015/01/videolink2me-p2p.html

分類
Javascript

有趣的trackingjs javascript framework

這個利用 javascript 寫的 tracking js 用來做許多視訊與圖形辨識上的應用, 官方介紹在這裡:

http://trackingjs.com/

來看看他的應用有哪些:

  1. 相片裡的人臉辨識 http://trackingjs.com/examples/face_tag_friends.html 像 facebook 裡的標記朋友那樣的功能.
  2. 人臉的眼、口辨識: http://trackingjs.com/examples/face_hello_world.html
  3. 動態的人臉追蹤, 這是從 webcam 動態追蹤人臉: http://trackingjs.com/examples/face_camera.html
  4. 相片的顏色辨識: http://trackingjs.com/examples/color_hello_world.html
  5. 從 webcam 的影像做顏色辨識: http://trackingjs.com/examples/color_camera.html
  6. 從 video 中的影像做顏色辨識: http://trackingjs.com/examples/color_video.html

還有很多其他型式的應用, 簡單來說, 這個 framework 把原本是在應用程式中才能做的特殊影像辨識技術應用在 browser 裡的 javascript 來達來, 目前比較會有問題的是在效率的問題, 不過若是未來 browser 強化與隨著 cpu 等級提升, 相對這些也就都不會是問題了.

快來玩看看吧.

分類
WebTrend

有趣的360全影攝影

剛在 youtube 上看到有趣的 360全景影片, 可以用滑鼠拖拉的方式進行角度的調整, 這樣的攝影方式十分有意思, 目前有一些全景相機(攝影機)可以錄製這樣的影像.

像是這款 Ricoh Theta:

RICOH Theta M15 全天球360°球型環景相機(公司貨)

來看看有趣的全景影片吧:

(引用自: https://www.youtube.com/watch?v=7IaYJZ2Usdk )

繼續閱讀:
https://blog.3bro.info/archives/youtube-360-degree-streaming-video/
http://www.playpcesor.com/2015/03/youtube360google.html

更多 Youtube 360影片:
https://www.youtube.com/channel/UCzuqhhs6NWbgTzMuM09WKDQ

分類
WebTrend

線上轉檔服務-bitcodin

線上影音轉檔服務 bitcodin, 強調快速, 而且支援 MPEG-DASH, 當然也支援 HLS.

之前有介紹過 AWS 上的 Amazon Elastic Transcode 服務(link), 現在這家 bitcodin 來了, 速度很快, 利用他的 sample video 測試, 約是 17倍快的時間可以轉檔完成. 很厲害.

網站在這裡: https://www.bitcodin.com/

而且價格不算貴, 一樣是有 free tier 而且可以選擇多種計價, 依使用量來選擇方案: https://www.bitcodin.com/pricing/

Input 的方式可以用 HTTP、FTP、Dropbox, Output 的方式可以用 FTP、Amazon S3、Dropbox 都有各三種的方式可供選擇, 配合他的 REST API 可以應用的情境就十分廣泛了, 自建的影音庫, 線上隨訊視訊等.

這麼快的轉檔效率, 看起來真的還蠻有競爭力的.

分類
程式技術

在bootstrap下的影片responsive設定

在 bootstrap 下, image 可以很容易地使用 img-responsive class 進行 image 的 responsive 設定, 但是 embed 或是 video 如何處理呢?

在 bootstrap 3.2 起, 增加了好用的 embed-responsive 功能, 簡單說明語法如下:

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe>
</div>

在外部建立一個 div, 包含了 embed-responsive 與 embed-responsive-16by9 or embed-responsive-4by3 class, 然後在 video 或 iframe 包含 embed-responsive-item class, 就可以順利地讓 embed video 能有完整地 responsive 功能了.

參考範例:
http://codepen.io/ncerminara/pen/zbKAD/