# TCPlayer patch for FIREFOX
目標: 針對使用 TCPlayer 在 Firefox 上無法播放 WEBRTC 的問題
工具: [Patch-package](https://github.com/ds300/patch-package), [postinstall-postinstall](https://www.npmjs.com/package/postinstall-postinstall) (使用 yarn 安裝的情況下)
#操作步驟
* 安裝上述工具,yarn 需要 postinstall-postinstall
* 在 package.json 加入 script
```
"scripts": {
"postinstall": "patch-package"
}
```
* 針對要調整的 node_module 作更動
* 輸入指令產生對應的 patch
* npx patch-package package-name
* yarn patch-package package-name (使用 yarn 的情況下)
* 把產生的 patch 檔發佈到分支上與團隊共享
```
git add patches/some-package+3.14.15.patch
```
* Docker file 條整
```
# 複製 patch 檔案到部屬的目錄裡,避免找不到要 patch 的對象
COPY patches/ ./patches/
```
## 詳細
* 原因: TCplayer 在判斷 FireFox 版本的含式回傳空字串導致判斷是否支援WebRTC的結果為 ``` false ```
* 可能的原因: ``` FIREFOX_VER ``` 這個含式使用正則表達式從 ``` USER_AGENT ``` 取出瀏覽器版號
```
return/Firefox\/([.\d]+)/.test(USER_AGENT),RegExp.$1
```
根據[MDN文章](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/n)此用法已經淘汰不建議使用,所以當前解法為改用 ``` exec() ``` 對 USER_AGENT 查詢並將結果以陣列的形式返回之後判斷陣列有無內容否則回傳空字串
```
return (/Firefox\/([.\d]+)/.exec(USER_AGENT) || [])[1] || '';
```
[參考文章](https://stackoverflow.com/questions/31906705/alternative-to-deprecated-regexp-n-object-properties)
* 其他: TCplayer 判斷是否支援WebRTC的結果為 false 之後會轉去 ``` convertProtocol ``` 這個還是對影片網址作替換。其中的 ``` hlsSrc ``` 會導致瀏覽器報錯 ``` ReferenceError: assignment to undeclared variable hlsSrc ```
* 當前解法是在含式裡先定義 hlsSrc
```
let hlsSrc='';
```
## Patch 錯誤狀態
目前有遇到的錯誤
* No patch files found
* 狀況: 找不到對應的 patch 檔。
* 解法: 請確認部屬的目錄有 patch 路徑
* Failed to apply patch for package <node_module_name> at path
* 狀況: 專案的 node_module 版號與要 patch 的版號不一致
* 解法: 確認該 package 的版號後刪除本地的 node_module 和 patch 資料夾並輸入指令 ``` npm i ``` 重新安裝。再次對要修改的 node_module 作更動並產生 patch 檔