手機推流 --> nginx rtmp server --> OBS拉流 --> OBS推到實況平台 nginx.conf worker_processes 1; error_log logs/rtmp_error.log debug; events { worker_connections 1024; }

jQuery 3.* http://api.jquery.com/jquery.ajax/ $.ajax({ method: 'GET', // "GET", "POST", "PUT" dataType: 'json', url: 'https://example.com/', headers: {}, cache: false

Content Security Policy (CSP) 內容安全政策 Content Security Policy是寫給瀏覽器看的 他寫在從伺服端回應給使用者瀏覽器端網頁的HTTP Header裡 主要用來限制網頁中對外部的請求來源(例如:css,js(ajax,ws),webfont,img,video,iframe等等) 還有一部份是禁止HTML行內的JS或CSS運作 以及限制<form>表單的指向網址 過濾XSS語法是伺服器端語言的工作(例如PHP) 如果不幸過濾失敗的話CSP的功能可以阻止惡意語法在瀏覽器端運作

綜合 全球 Google Maps OpenStreetMap - 開源開放編輯的地圖 Bing Maps (Microsoft) 台灣 gov

這裡是浪Play直播(舊名:金剛kingkong直播)聊天室截取工具 :banana: BABANANA Chat :banana: 的說明文件。 這個聊天室頁面可使用==OBS擷取==或是==網頁瀏覽器直接觀看==，細節請觀看下方說明。 :::info 如果有更新改版，更新訊息都會寫在這個說明頁面。 使用上只要重新整理網頁就能更新。 註: OBS的網頁暫存檔(cache)有時候會卡比較久，要多重新整理幾次才會正常更新。 ::: :fries: 說明文件 / 教學 使用網址:

OBS直播相關工具 戶外直播 戶外直播軟體架構 nginx rtmp server設定 自製OBS面版 浪Play(金剛)直播聊天室

# 戶外直播軟體架構 (obs, rtmp) 這篇主要是介紹戶外直播/戶外實況/IRL在程式方面的架構 不包含硬體架構和其使用心得 ## 直播架構 * [方法一] **手機直播App** * 直推直播平台 * 這個很簡單,這邊就不寫了 * 轉推自架[Nginx RTMP server](https://github.com/arut/nginx-rtmp-module/),然後用OBS播放器拉流轉推直播平台 * 播放器 * OBS內鍵的影片播放器 * 可以拉流RTMP,但是網路卡鈍時處理的效果不好 * 外部播放器 * 影音播放程式 * [VLC media player](https://www.videolan.org/vlc/index.zh-TW.html) * 網頁HTML5直播播放器 * [方法二] **使用實況背包(IRL Backpack

# nonolive直播聊天室CSS修正(OBS版) :::info *2019/1/6修正 ::: **使用網址:** `https://www.nonolive.com/popout/chat/你的實況台房號` (手機瀏覽器用`電腦網頁版模式`直接用上面網址就能看了,不用改CSS) ## OBS版CSS修正 ```css body { /*background-color: rgba(0,0,0,0.7) !important;*/ } .chat-panel-input-wrap { display: none; } .chat-panel__footer { display: none; } .send-msg-btn { display: none; } .chat-panel { padding: 0; } .msg-filter-btn { /*background-color: rgba(255,0,0,0.7) !important;*/ } .chat-panel .chat-item .sende

# OBS直播相關工具 ## OBS官網 * [OBS (Open Broadcaster Software)](https://obsproject.com/) ## OBS套件 * 遠端控制OBS * [OBS Remote](http://www.obsremote.com) * [obs-websocket](https://obsproject.com/forum/resources/obs-websocket-remote-control-of-obs-studio-made-easy.466/) (OBS端) * 網頁控制端: [OBS Tablet Remote](http://t2t2.github.io/obs-tablet-remote/) * 追加應用: * [nginx-obs-automatic-low-bitrate-switching](https://github.com/715209/nginx-obs-automatic-low-bitrate-switching)

## 意見反應 * Discord: https://discord.gg/8njhfp8 :::info < [:blue_book:回到 實況直播工具集: 目錄](https://hackmd.io/@Eotones/stream/) :::

# Twitch 2019/9/26網頁版中文字體修正 這是用來修正Twitch 2019/9/26網頁改版後實況主中文名稱會被強制換行的問題 然後順便把中文字體從預設的`新細明體`改成`微軟正黑體` ## 用法 首先瀏覽器要安裝**Stylus**套件 用來修改CSS chrome和firefox都有 ### CSS: ```css= body { font-family: "微軟正黑體",Roobert,Helvetica Neue,Helvetica,Arial,sans-serif!important; } .channel-header-user-tab__user-content > p.tw-font-size-5 { white-space: nowrap; } ``` ### 含以下前綴的網址: `https://www.twitch.tv/` ### 顯示結果: ![1](https://cdn.discordapp.com/attachments/421913696722485288/626884212699562033/twitch

# Linux常用指令 Windows下安裝git時會另外安裝**bash**(預設選項會是打勾安裝), 這個bash小黑窗是讓你可以在Windows環境下也能使用linux基本指令, 另外bash內有附**vim**這個指令版的文字編輯器。 ## 快捷鍵 * `ctrl + c` - 中斷目前畫面上的操作(中斷前景程序process) * `ctrl + l` - 清畫面 * `ctrl + d` - 離開(等同輸入exit+enter) * `ctrl + z` - 將目前畫面上的操作切換到背景(不中斷操作) * 用法: [Linux 切換 process 至背景或前景作業 – Ctrl + z](https://dinos80152.wordpress.com/2015/03/04/linux-%E5%88%87%E6%8F%9B-process-%E8%87%B3%E8%83%8C%E6%99%AF%E6%88%96%E5%89%8D%E6%99%AF%E4%BD%9C%E6%A5%AD-ctrl-z/) * [Linux中ctrl-c, ctrl-z,

# 17直播手機網頁版CSS修正  ## 使用條件 * 手機版網頁(要用手機瀏覽器) * 使用Stylus(可以用火狐裝)修改CSS * 舉例: * 網頁: https://17.live/live/3751322 (要用手機瀏覽器才能進手機版網頁) * 含以下前綴網址: `https://17.live/live/` * 已知問題: * 自動播放的直播還是存在背景裡,聲音無法關閉(CSS沒有權限關影片播放器,只能隱藏畫面) ```css= video, div[class^="MobileBlock__MobileBlockRelativeWrapper"], div[class^="Nav__NavRelativeWrapper"], div[class^="Snackbars__SnackbarsWrapper"], section[class^="SuggestedPanel__PanelWrapper"], h3[class^="SuggestedPanel__Panel

# 金剛影像、聲音使用者端位元率測試 :::warning * 這是從使用者端接收的位元率推算,不保證正確 * 這個語法只有**Chrome瀏覽器**能用(播放器要選**HTML5播放器**) * 記得畫質要選**最佳**才會是最接近原始上傳的畫質 :::  ## 用法 1. 使用Chrome瀏覽器 2. 在金剛**直播頁面**或是**實況記錄影片頁面** (直播或影片都要在**播放狀態**才能測試) 3. 按`F12`, 分頁切換到`Console` 4. 將以下語法貼在**輸入欄位** 5. 要取消的話`F5`重新整理頁面就可以了 ```javascript= var vbyte_last = 0; var abyte_last = 0; var kkplayer2 = document.querySelectorAll("video")[0]; var vbyte_test = function(){ let vbyte = kkplayer2.webkitV

# CSS Flex 排版 flex屬性主要分成`容器`和子層的`物件` 為什麼要分兩種 因為子層`物件`本身也可以是`容器`讓更下層的`物件`使用 所以flex屬性才需要區分成`容器`和`物件` 再來是flex本身就是非常強大的RWD排版語法 flex練熟的話就可以不用bootstrap也能排出很好的RWD版面(不考慮細節美化) 目前主流的Web App很多都已經改成flex排版 可以參考: * twitch * discord ###### tags: `web`,`css`, `flex` ## 基本語法 ### 父層容器 ```htmlmixed= <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> ``` ```css= .flex-container { display: flex; } ``` ### 子層物件 ```htmlmixed= <div class="flex-container"> <div cla

# Javascript自訂變數預設值 如果變數沒有給值則換成預設值: ```javascript= //預設值是3 var a; console.log(a || 3); // 3 var b = 4; console.log(b || 3); // 4 console.log(null || 3); // 3 console.log(undefined || 3); // 3 console.log(false || 3); // 3 console.log(true || 3); // true ``` ### 這個用法的缺點: * 1會被當成true * 0會被當成false * 如果預想要輸入的值是true/false也不適合用 ```javascript= //預設值是3 console.log(undefined || 3); // 3 console.log(1 || 3); // 1 console.log(0 || 3); // 3 (非預期結果) ``` ```javascript= //預設值是true console.log(undefined ||

# JS: handleEvent HTML: ```htmlmixed= <input id="msg" type="text" value="msg123456"> <div id="output"></div> ``` JS: ```javascript= let msg; let output; let main = { init: function(){ msg = document.getElementById('msg'); output = document.getElementById('output'); msg.addEventListener('input', this, false); // 這邊的 this == main, 且為 object // event發生時會觸發 main.handleEvent(e) }, handleEvent: function(e){ // 這邊寫if是為了保留將來可以增加其他e

# 移除網址中的Facebook追蹤參數 ?fbclid= ## 網站端(Apache)使用 .htaccess 重新定向 ### 移除網址中的fbclid參數,但保留其他參數 * root網站根目錄寫法: ( 例: https://example.com/ ) ```apache= <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteCond %{QUERY_STRING} "^(.*)&?fbclid=[^&]+&?(.*)$" [NC] RewriteRule ^(.*)$ /$1?%1%2 [R=301,L] </IfModule> ``` ``` 輸入 https://example.com/?a=111&b=222&fbclid=XXXX&c=333&d=444 轉跳 https://example.com/?a=111&b=222&c=333&d=444 ``` * 非root網站子目錄寫法: ( 例: https://example.com/test/abc/ ) ```