分類
Javascript

hls.js 應用於html video tag播放 HLS功能的外掛

同事介紹的這組 hls.js (https://github.com/video-dev/hls.js/)是應用於 video tag 中的播放 HLS (http live streaming) 的外掛, 可以讓原本的 video tag 增加播放 HLS 功能.

相較於之前介紹的 clappr player (https://diary.tw/archives/1811), 這組 hls.js 是直接使用 video tag 來進行(其實 clappr player 是在 div 下自建 video tag, 只是 hls.js 更直接).

hls.js 可以直接讓 browser 的 video tag 播放 hls 內容, 包含了 vod 與 live streming, 也提供了 web demo lab, 方便大家自行測試開發:

https://hls-js.netlify.app/demo/

(之前的 clappr demo 在這裡: http://clappr.io/demo/)

若需要公開測試的 hls 來源, 可以參考:

相信對於開發實作 hls video player 應用, 能有很大的幫忙.

 

分類
程式技術

使用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/

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

分類
好用軟體

上網測速工具整理(線上瀏覽器直接可用版)

上網速度慢, 最常用工具就是測速, 而有哪些好用的測速工具呢?

SPEED TEST: https://www.speedtest.net/ 這是個老牌的測速工具, 也有 Android 與 iOS 的 APP.

(speedtest)

分類
wordpress

[WordPress]快速匯入JSON/CSV/XML內容至wordpress

這裡要介紹的是快速將 JSON/CSV/XML檔案的內容至 wordpress 裡的方法, 介紹使用工具為:

https://wordpress.org/plugins/wp-all-import/

雖然沒有 JSON 檔案格式, 不過可以利用這個線上工具進行:

分類
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

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

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

分類
python

[Python]計算地球上兩個座標點距離

有兩點座標在地球表面上, 要計算兩點的距離, 會用到 haversine (半正矢公式)來進行計算.

其中 Haversine 公式就是用來計算這個球面上的大圓距離, 公式如下:

利用這個公式, 可以建立一個 python function (半徑為地球半徑: 6371km):

import numpy as np

def haversine_distance(lat1, lon1, lat2, lon2):
  r = 6371
  phi1 = np.radians(lat1)
  phi2 = np.radians(lat2)
  delta_phi = np.radians(lat2 - lat1)
  delta_lambda = np.radians(lon2 - lon1)
  a = np.sin(delta_phi / 2)**2 + np.cos(phi1) * np.cos(phi2) * np.sin(delta_lambda / 2)**2
  res = r * (2 * np.arctan2(np.sqrt(a), np.sqrt(1 -a)))
  return np.round(res, 2)

不過其實 python 原本就有函數庫: haversine 也可以直接引用:

import haversine as hs
loc1=(28.426846,77.088834)
loc2=(28.394231,77.050308)
hs.haversine(loc1,loc2)

(上面預設單位就是 km 了)

程式碼範例與執行結果請參考:

https://colab.research.google.com/drive/1Tap7kaY-yG09OvpJKhja9ni2T8yMdxJZ?usp=sharing

 

參考資料:

https://towardsdatascience.com/heres-how-to-calculate-distance-between-2-geolocations-in-python-93ecab5bbba4

https://towardsdatascience.com/calculating-distance-between-two-geolocations-in-python-26ad3afe287b

 

 

 

分類
好用軟體

Google表單上傳檔案

最近在填寫商場活動表單時, 需要上傳發票檔案, 才發現原來 Google 表單也可以上傳檔案, 於是動手來試試.

新增一個表單, 然後在題型這裡選擇-檔案上傳, 會跳出一個提示:

作答者可將檔案上傳到雲端硬碟

檔案會上傳到表單擁有者的 Google 雲端硬碟。在表單中新增檔案上傳問題後,作答者必須登入 Google 才能回答問題。請務必只與你信任的對象共用這份表單。

看起來可以上傳檔案, 不過需要有 google 帳號且登入 google 帳號的狀況下才能上傳.

而上傳空間也預設總量為 1GB (此限制為1張表單內的使用空間量), 量到後也會停此收集這個表單作答. 網路上查了一下, 原來在 2017 年時, 就有這個功能了, 真是後知後覺, 沒關係, 還是動手來做一下:

https://forms.gle/GhpXvKrUEQEzLQhJ6

應用在做問卷時, 需要拍照, 或是上傳文件, 非常方便實用的一個表單功能.

PS. 用戶上傳的檔案會佔用自己的 google drive 空間, 並且以新開一個目錄的方式來收集檔案. 收集的檔案名稱最後會附加上用戶的google帳號名稱(display name), 雖然會佔用空間, 但也是確保能有效收集到檔案的方式, 在使用上要留意自己的空間是否充足. (如下圖, 擁有者都會是自己)


繼續閱讀:

https://diary.tw/archives/684

https://www.thenewslens.com/article/73365

分類
系統技術

再談URL長度上限

先來看一下之前寫的:

由 browser 的上限來看是 2083, 而由 apache / iis 來看則是 8190 / 4096 兩個等級.

不過無論如何, 這個 url 上限的討論是個很熱門的問題:

https://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers

除了 RFC / Browser / Web Server 外, 還多提出了 CDN (其中的 status code 414 (414 URI Too Long, https://tools.ietf.org/html/rfc7231#section-6.5.12) 就是在描述這個:

這個很重要, 因為 CDN 是轉遞內容的重要功能, 不過看起來長度也都放得很寬.

再來看個別瀏覽器利用測試的方式來查看長度:

BrowserAddress bardocument.location or anchor tag
Chrome32779>64k
Android2192>64k
Firefox>64k>64k
Safari>64k>64k
IE1120475120
Edge 1620471024

也都有相當的長度.

不過由以上來看, 還是得保守地使用約在 2000 bytes 長度的 url 較為保險.

 

分類
python

[Python]中油油價取得

來寫個中油油價取得.

不過一開始原以為這頁是利用靜態的內容產出的 table:

https://www.cpc.com.tw/historyprice.aspx?n=2890

利用 beautifulsoup 時, 使用 selector 雖然可以找到對應的 element, (table#tbHistoryPrice), 但找不到該 table 以下的 tr, td 對 element, 所以無法透過 select 解析並取出資料.

於是仔細看了一下 html source code, 發現原來只有一個空的 table, 而沒有內容, 而表格內容利用是 javascript 動態生成的, 而資料來源仍為靜態的 javascript 中的變數 (pieSeries), 這樣就好解決了.