[Twitch API 系列 1] 如何將 Twitch 直播嵌入到你的網頁

如何將 Twitch 直播嵌入到自有網頁

本文快速介紹如何實作嵌入 Twitch 直播內容到個人網頁上，並附上範例及實際效果

讀者可在自己網站，簡單隨意地鑲嵌 Twtch Live Stream，完全免費

鑲嵌語法操作說明

目前鑲嵌 Twitch 直播最簡單的方式就是用 iframe

如果只是想試試效果，最低限度只要寫以下內容就能測試：

<iframe
    src="https://player.twitch.tv/?channel=你的頻道名稱&parent=你的網站網址"
    height="480"
    width="320"
    frameborder="1"
    scrolling="no"
    allowfullscreen="no">
</iframe>

channel：這代表你的頻道帳號名稱，從頻道網址就可以確認

你也可以填寫別人的頻道帳號名稱，圖奇在這方面沒有限制

parent：這代表你的網站網址域名，需要自行準備

需特別注意，這邊要求的網站網址域名必須具備：

1. https 連線，不可用 http

2. 網域名稱，你的網頁伺服器必須持有一串有效的對外網址，例如 www.google.com 這種，不能使用任何 IP 或 localhost

3. 憑證，一個能有效驗證你的網域名稱安全性的憑證，沒有的話需自行上網查如何在 Let's Encrypt 等機構線上申請一個

務必綜合上述三項之力，才能成功鑲嵌 Twitch Stream 到該網站上 

實際效果

以下是用知名部落格團隊域名 bynum5566.blogspot.com 來嘗試鑲嵌：

讀者可以試試看，有問題再提出

實際效果詳解

剛剛我們是在本篇文章網址 https://bynum5566.blogspot.com/2020/07/twitch.html 內測試

而我們實際下的參數是這樣：

<iframe
    src="https://player.twitch.tv/?channel=thermaltakegaming&parent=bynum5566.blogspot.com"
    height="480"
    width="320"
    frameborder="1"
    scrolling="no"
    allowfullscreen="no">
</iframe>

channel 隨便找的，不重要

parent 的部分，注意到我們下的參數是 bynum5566.blogspot.com

為什麼？

以下用表格分析各種情境的網址代表什麼意思：

網址	意義
bynum5566.blogspot.com/2020/07/twitch.html	特定站點 blogspot.com 下 特定子網域 bynum5566 的 特定資料夾 /2020/07 內的 特定一篇文章 twitch.html 的詳細位址
bynum5566.blogspot.com	特定站點 blogspot.com 下 特定子網域 bynum5566 的位址
blogspot.com	特定站點 blogspot.com

我們在下 domain 時，一定要抓緊，這是代表一個網站位址的重點

blogspot.com 是一個相當龐大的網站體系，甚至我們無法把它當作單一網站來看待，例如 blogspot.com/about 會導到 blogger.com 服務的入口網頁，其中可以再深入進行註冊、登入等服務

而 bynum5566.blogspot.com 比較接近我們常識所認知的「一個網站」，也是本次介接的重點， 這樣「一個網站」是作為獨立主體所存在，其轄下各個頁面檔案放置在不同資料夾中：

https://bynum5566.blogspot.com/2020/07/redmine-3000.html

https://bynum5566.blogspot.com/2020/07/twitch.html

redmine-3000.html、twitch.html 都是 html 檔案，而一起被放在 /2020 這個資料夾中的 /07 這個資料夾內

至於前面的知名部落格經營團隊名稱 bynum5566，在這串網址中代表的意義是「子網域」

你各位可以想像，一台網站伺服器所費不貲，如果只用來架前面說的「一個網站」，那非常浪費且不符合現代企業所要求的效益...（除非您架設的是像 bynum5566.blogspot.com 這樣兼具流量與品質的優質網站，但這很難）

因此，常見的作法是在一個主體母域名（blogspot.com）下切割出個別的子網域（例如 bynum5566），來當作獨立網站使用。之後銜接起來的整串網址 bynum5566.blogspot.com 就能代表「一個網站」所使用

註：也有把子資料夾切割出來當作獨立網站的做法，故上述是以現有例子說明，並非放諸四海皆須照此標準，但 blogspot 的作法算是相當常見，可放心理解為一種常見模式

回到 Twitch 的介接應用，Twitch 要求的是一個網站的 domain，所以需接上 bynum5566.blogspot.com  這樣的獨立網站網址

往內來說，在該網站轄下，無論哪個資料夾、哪個 html 檔案，想要放上我剛剛撰寫的實測 iframe code，都是可以適用的，無須一再重寫

往外來說，假設今天有一獨立網站 test.blogspot.com。即便一樣位於 blogspot.com 內，由於子網域已切開，所以無法貼上剛剛的 code 作使用

Twitch 要求一個獨立網站的 https domain，只要其有效且具備憑證，就能成功操作

希望在嵌入語法時，也能幫助各位對網站原理有更深一層認識

謝謝大家