透過Embedly銜接上百種網路服務API

隨著線上的影音媒體網站等越來越發達,將網站、部落格中的影音圖像等放到第三方的網站服務,在透過API嵌入到自己的網頁中是相當常見的事情。
評論
評論

隨著線上的影音媒體網站等越來越發達,將網站、部落格中的影音圖像等放到第三方的網站服務,在透過 API 嵌入到自己的網頁中是相當常見的事情。然而,隨著各式各樣的網路服務興起,開發者們也必須學習越來越多種不同的網路服務 API,而透過 Embedly 這個統一的架構,就可以解決我們的問題!

什麼是 API?

曾經製作過網頁、或者是寫過部落格的朋友們應該知道,當我們需要將儲存在網路上的圖片、影音等加入到自己的部落格或是網頁中時,就需要依照網站的說明去學習使用嵌入碼,像是 YouTube 的就是如下圖:

而透過 JavaScript,便可以呼叫各個服務所提供的 API 來進行更複雜的客製化調整,像是透過 JavaScript 直接調整時間軸進行互動式播放、或者是在同一個播放器中根據使用者的操作輪流播放不同影片等。

然而,若是我們需要同時嵌入數個不同的來源網站的資料時就會很困擾,由於各家的嵌入方式有所差異,當今天只要嵌入 YouTube 時只要學一種、但若是要同時嵌入 YouTube、Facebook、Flickr、Picasa,甚至是更多網路服務時,就必須得分別去了解各個 API 的差異、並且依照不同的平台使用不同的嵌入程式。

Embedly

Embedly 便是提供了一個統一的 API,讓我們能夠透過同一組介面來嵌入高達 108 種不同的網站服務內容!

這對開發者、網站經營者而言有什麼優點呢?大致上可以分成兩部份,首先,我們再也不需要去各個不同的網站上翻閱 API 文件,學習各種不同的嵌入方式、就可以輕易的加入各種服務內容到網站當中,代表著開發上所需要的時間、成本也都減低了。

此外,由於 Embedly 會長期的更新服務,加入更多網站支援、並修正 API 的問題,所以若像是 YouTube 的網站 API 有更新的話,我們只要繼續使用 Embedly 的服務,他們便會在後端幫我們處理 YouTube API 更新的相容性問題,所以後續的維護成本也降低了許多。

使用方式

在使用上面,我們同樣必須透過 JavaScript 呼叫網址,再取得內容之後加入到 HTML 的頁面中,透過呼叫以下的 API 網址:

http://api.embed.ly/v1/api/oembed?url=:url&maxwidth=:maxwidth&maxheight=:maxheight&format=:format&callback=:callback

並分別傳入以下參數內容:

  • url = 要嵌入的網路資源頁面
  • maxwidth = 最大寬度
  • maxheight = 最大高度
  • format = JSON 或是 XML
  • callback = 回傳後所要執行的 callback function

而像是下面這段簡單的 JavaScript 搭配 jQuery 的程式碼便可以嵌入 Vimeo 的影片到網頁中:

 // Call API to get a video oEmbed JSON response var url = escape('http://vimeo.com/9503416'); var api_url = 'http://api.embed.ly/v1/api/oembed?url=' + url + '&callback=?'; //jQuery JSON call $.getJSON( api_url, function(json) {     var html = json.html;     $('#videodiv').html(html); });

而上述的程式碼最厲害的便是,即便是帶入不同影音服務的 URL,像是 YouTube 或是 TED 等,也都可以正確的顯示無誤、不需另外進行額外的調整,是不是很棒呢?

除此之外就算是圖片、文字型的內容也同樣可以透過一樣的介面來完成嵌入的工作,各位讀者有興趣的話,可以先在 Embedly 的網站,將欲嵌入的網址輸入到 Demo 頁面 進行測試。

Embedly Script Tag

上述的方式可能對於非 JavaScript 的開發者而言略顯得困難,但不需要擔心,因為 Embedly 提供了 更簡單的外掛 可以直接加入到網頁中。透過加入以下程式片段到你的 HTML 或是部落格頁面中:

<script src="http://scripts.embed.ly/embedly.js" type="text/javascript"></script>
這段加入的程式便會自動分析你的頁面,並且將連結轉換成嵌入式的內容直接加到網頁中!像是 官網上的範例 便是將 Twitter 搜尋出來帶有圖片的結果直接自動化嵌入到網頁中:

另外 Embedly 也有提供 WordPress 的 Plugin,只要在文章的內容中加入任何的網路服務連結,這個 Plugin 便會自動判斷並嵌入該連結的內容到文章中,提供給使用 WordPress 的讀者參考。

結論

隨著網路上越來越多網路服務平台的興起,像是 Embedly 這種透過銜接、整合各個不同平台的統一的入口網站、服務也逐漸的越來越受到使用者與開發者的青睞,且隨著網路的持續成長,這樣的服務在未來像必是會更加風行。

參考資源


台達電子 5G 智慧工廠應用落地,升級智能產線助產值提升 75%

台達電子看見智造新力量,在遠傳 5G 專長助力下,打造全國首座 5G 智慧工廠,導入 5G 專網、人工智慧與物聯網應用於實際廠房。以下且看遠傳與台達如何達成 5G 智慧化產線,建構產能進化加速器。
評論
photo credit:遠傳
評論

5G 商用啟動為智慧製造注入強大動能,高網速、低延遲、廣連結的特點成為製造業轉型的關鍵引擎。台達電子看見智造新力量,在遠傳 5G 專長助力下,打造全國首座 5G 智慧工廠,導入 5G 專網、人工智慧與物聯網應用於實際廠房。

台達產線自動化再升級,結盟遠傳 5G 實力締佳績  

台達深耕工業自動化領域 20 多年,積極實現智慧製造系統。5G 技術作為實現工業 4.0 的關鍵能達成更即時、精準的製程,提升產能效率,與台達推動智慧製造目標相契合,因此早在 5G 開台前台達即與遠傳一拍即合,成為國內投入 5G 智慧工廠的領先群。

台達在遠傳 5G 網路技術的支持下,率先於台達桃園一廠內生產線實際導入5G專網、AGV無人搬運車、AMR 自主移動機器人、AI 瑕疵檢測數據分析、AI 產線平衡(AI Line Balancing)、智慧監控(Smart Auditor)、MR 混合實境等先進應用,這條 5G 商用生產線的示範廠已於今年正式對外公開展示,以 5G 做為生產線核心,成功打造全國第一座 5G 智慧工廠。

photo Credit:遠傳

5G 商用生產線全運轉,滿足工廠產線快速配置、提升產能效率  

首個 5G 商用生產線即是架構在遠傳高可靠度、高覆蓋率、高客製化的 5G 企業專網,在廠房區域裡,台達 AMR 自主移動機器人透過 5G 與管理平台交換資料,於生產過程中智慧化人機協同作業,大幅縮減生產工時,並依據監測資訊即時下達指令,提高產能。

台達具工控產品的成熟開發能力,廠內產線的工作站有不同對應的機台,且機台設備各不同,為要能達到快速切換、少量多樣的效能,以遠傳 5G 導入 AI 產線平衡是關鍵一環。在切換產線之際,製程監視器須動態且彈性更換,同時落實 Smart Auditor,以智慧監控系統指派工作站,進而透過影像辨識確保操作、流程正確性,提升產能最佳化。

Photo Credit:台達

透過 5G 技術,場域內的生產機器、設備與運輸載具更智慧化,採用 AI 瑕疵檢測數據分析,藉由 5G 即時傳送製程檢測產生的資料,進行大數據分析而能快速遠端調整製程,有助於提高檢測精準度、產品良率與產能。

遠距廠房管理無國界 遠傳 5G 專網成智造進化加速器

實際上,這次 5G 商用生產線也導入 Microsoft HoloLens 混合實境與物聯網數位雙生科技,達成 5G MR 遠距廠房管理、維修與監控,能加速人員培訓與經驗傳承,透過遠端產線巡檢,減少人工作業維護。

台達副總裁暨企業策略業務發展和聯盟總經理柯淑芬博士表示:「台達 5G PLC 智慧產線串聯智能機台結合遠傳 5G 通訊,打造完整自動化系統,以大數據優化流程,提高整體智能產線效益,在單位面積產值提升 75%,而在人均產值提升 69%,實測成果亮眼,相信與遠傳持續合作能創造更強大製造競爭力。」

內圖三-5G專網
Photo Credit:遠傳

遠傳 5G 專網穩定又安全性高的效能、具備資料傳輸與場域空間規劃的高機動性、以及高度彈性的特質,成為解決製造業少量多樣、高頻換線的突破性關鍵,能夠一舉達成 AGV 跨區運送、MR 輔助備料與組裝、AOI 深度學習等產能提升的效益。近年來遠傳發揮 5G 專長持續發展遠傳大人物(大數據、人工智慧、物聯網)技術,結合產業需求發展,提供創新應用的解決方案,成為企業數位轉型的首選夥伴。

Photo Credit:遠傳

本文章內容由「遠傳」提供,經關鍵評論網媒體集團廣編企劃編審。