EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒體服務器前端源碼重構(六)- webpack-dev-server 自適應支持手機端訪問

關於EasyDSS

EasyDSS商用流媒體服務器解決方案是一套集流媒體點播、轉碼與管理、直播、錄像、檢索、時移回看於一體的一套完整的商用流媒體服務器解決方案，EasyDSS高性能RTMP流媒體服務器支持RTMP推流，同步輸出HTTP、RTMP、HLS、HTTP-FLV，支持推流分發/拉流分發，支持秒開、GOP緩衝、錄像、檢索、回放、錄像下載、網頁管理等多種功能，是目前市面上最合理的一款商用流媒體服務器！
詳情可以訪問EasyDSS流媒體服務器官方網站：www.easydss.com

---

問題分析

很多時候,前端開發的頁面,不僅要在PC端測試效果, 還要在手機端測試效果. 在開發階段, 我們以 webpack-dev-server 來啓動瀏覽器, 打開正在開發的頁面. webpack-dev-server 可以做到實時監聽文件修改, 自動更新瀏覽器中的網頁, 一旦代碼發生修改, 無須人工干預, 頁面就同步到最新狀態. 但是 webpack-dev-server 的默認配置, 不充許本機以外的設備訪問開發頁面, 這個時候, 當我們用手機通過局域網IP來訪問頁面時, 連接不上. 於是, 去官網文檔裏尋找解決之道. webpack 的官網文檔給我的印象是亂亂的, 和其他一些內容混在一塊.

這裏, 我記錄下 webpack-dev-server 開啓手機內網訪問頁面的配置過程. 一來給自己留個記錄; 二來, 方便大家搜索, 在官網文檔以外的地方, 很快的搜到這個問題的答案.

解決方案

要讓 webpack-dev-server 支持手機端通過內網IP訪問, 只需要在 webpack.config.js 中添加如下配置段:

    ...
    devServer: {
        host: '0.0.0.0',
        useLocalIp: true,
        open: true,
        openPage: "",
        proxy: {
            "*": {
                target: 'http://xxx',
                secure: false
            }
        }
    },
    ...

關鍵的配置屬性:

host 配置成 ‘0.0.0.0’, 充許本機以外的設備訪問

useLocalIp true, 將以內網IP爲http地址信息打開瀏覽器, 不用敲 cmd ipinfo 去查內網IP了

通過以上配置, 直接在命令行敲 webpack-dev-server 將打開的瀏覽器地址欄地址發送到手機上, 就可以從手機訪問測試頁面了. 當然, 手機和PC需在同一局域網內哦.

---

EasyDSS商用流媒體服務器提供一站式的轉碼、點播、直播、時移回放服務，極大地簡化了開發和集成的工作，並且EasyDSS支持多種特性，完全能夠滿足企業視頻信息化建設方面的需求：

• 多屏播放：支持Flash、HTML5播放，兼容Windows、Android、iOS、Mac等操作系統。
• 自由組合：EasyDSS軟件產品之間無縫對接，也可將EasyDSS流媒體服務器軟件與其他第三方平臺對接，組合靈活自由。
• 支持雲架構：支持阿里雲、騰訊雲、華爲雲、青雲、七牛雲存儲等各大雲服務商，支持雲架構，部署更靈活。
• 與CDN無縫對接：EasyDSS軟件產品支持與網宿、帝聯、藍汛等CDN無縫對接。
• 二次開發簡單：提供編程語言無關化的RESTful API接口，只要瞭解JS、HTML、JAVA、ASP.NET、PHP、ASP等開發語言中的任意一種，就能運用EasyDSS提供的RESTful API進行二次開發。
• 簡單易用：圖形化操作，模塊清晰，流程簡單，極易上手。

適用場景