sync-player：使用websocket實現異地同步播放視訊

GoEasy發表於2020-10-20
Web

本文作者：星空無限

原文連結：liyangzone.com/2020/09/20/%E5%89%8...

GoEasy已獲作者授權轉載，GoEasy轉載時有改動，感謝作者的分享。

前段時間我有這樣一個需求，想和一個異地的人一起看電影，先後在網上找了一些方案，不過那幾個案都有一些缺點

  • coplay: 一個瀏覽器外掛，只能播放各大視訊網站的視訊，視訊資源有限，我想要看的視訊沒有，比如一些經典電影和美劇之類

  • 微光APP: 還是上面的問題，而且只有手機端

  • 向日葵等遠端桌面: 受限於網路問題，卡頓很嚴重，體驗不好

作為一個對使用者體驗有追求的切圖仔，我是一個下載黨，看電影必須下載到本地看，基本不看視訊網站上的玩意

那麼有沒有能實現同步播放本地檔案的方案呢，答案是肯定的，經過我的一些摸索和研究，我實現了本地檔案的同步播放，同時支援PC和手機端，而且還支援外掛字幕等高階功能，如何實現請往下看。

一個可以同步看視訊的播放器，可用於異地同步觀影、觀劇，支援多人同時觀看。
本專案有兩個版本，web版執行在瀏覽器上，可跨平臺，不限作業系統、裝置，功能簡單適用於要求不高的使用者。還有基於SPlayer(射手影音)DIY的客戶端版本(windows、MAC)，播放4K高清檔案、外掛字幕，統統沒問題。

web版同步效果
BSQoHx.gif
客戶端與web版同步效果
BSQID1.gif

基於websocket實現，與一些用websocket實現的聊天室類似，只不過這個聊天室裡的訊息換成了播放暫停的動作和時間資訊，客戶端收到訊息後執行相應的動作:播放、暫停、快進，以達到同時播放的效果。

  • node.js
  • socketio
  • HTML5 video API
  • vue.js

本專案的核心是websocket，所以至少需要一臺伺服器提供websocket服務，websocket服務可以自己部署，可以使用第三方平臺GoEasy提供的websocket服務。

1、自己部署：

websocket伺服器可以是一臺具有公網IP的雲伺服器，也可以是一臺具有公網IP的普通PC，沒有公網IP也可以。你也可以使用zerotier或其他VPN工具將兩臺裝置組成一個大區域網，讓它們能互相通訊。websocket伺服器作業系統不限，只要有node.js環境。

websocket服務端部署方法：安裝node.js環境，將server目錄移動到伺服器上，進入server目錄，執行以下命令：

安裝專案依賴包

# 安裝專案依賴包

npm install 

# 啟動websocket服務

node index.js

2、使用GoEasy的websocket服務

註冊GoEasy開發者賬號並建立一個應用，獲得appkey，複製到本專案相應位置即可。

GoEasy官網：www.goeasy.io

無論是使用哪種websocket服務都可以，本專案寫了兩套程式碼，只需將不用的那套註釋掉即可(預設GoEasy)。

除了websocket伺服器之外，還需要兩個http服務端，一個是web服務端(提供html、css、js等檔案的訪問)，一個是視訊服務端(提供視訊檔案訪問)。

你可以將web服務部端署到以下位置：

  • 具有公網IP的伺服器
  • github-pages或國內的碼雲提供的靜態web服務
  • localhost(本地伺服器)，同一個區域網內的裝置訪問該伺服器內網IP

視訊檔案只需一個視訊地址就行，也有以下幾種選擇：

  • 具有公網IP的伺服器
  • localhost(本地伺服器)，同一個區域網內的裝置訪問該伺服器內網IP
  • 第三方視訊地址

image

使用場景1：

雲伺服器頻寬足夠大(至少要大於播放視訊的位元速率)，雲伺服器既可以作為websocket服務端，也可以作為http服務端。上圖中所有裝置都訪問雲伺服器的ip或域名。

使用場景2：

雲伺服器的頻寬很小，這時候它只能作為websocket服務端，這時可以用上圖中的PC1和PC2作為http服務端，PC1和PHONE1在一個內網訪問PC1的內網IP，PC2和PHONE2在一個內網訪問PC2的內網IP，PC3可作為自己的http服務端，PHONE3若是有提供視訊檔案的服務端，也可以使用。
image
使用場景3：

需要使用zerotier或其他VPN工具將異地裝置組成一個大區域網，其中任意一臺PC均可作為websocket服務端和http服務端(需要上傳頻寬足夠大)。上圖中各裝置都訪問那臺PC的內網ip即可。

最簡單的使用方法，下載nginx開啟一個本地伺服器，下載本專案client資料夾放到到nginx根目錄裡，視訊檔案也放到裡面。註冊goeasy開發者賬號並建立一個應用，獲得appkey，並填入到appkey到程式碼(script/main.js)相應位置。然後瀏覽器開啟 192.168.3.58/client/，填入你的視訊地址192.168.3.58/movie/xxx.mp4或網路視訊地址，對方也這樣操作一番，即可實現同步播放視訊。

web版本的功能比較簡單，而且受限於網路問題，快進之類的操作需要緩衝一段時間。如果你不滿足web版功能，對使用者體驗有更高的要求，如支援更多檔案格式、播放高清本地視訊檔案、外掛字幕等，我也找到了另一種方式來滿足你的需求。

那就是DIY一個開源的播放器的原始碼：SPlayer(射手影音)。

射手影音官網：splayer.org

原始碼地址：github.com/chiflix/splayerx

在以electron + 播放器為關鍵字一番搜尋之後，我找到了這個基於electron實現的開源播放器，並下載了原始碼來研究。

經過一番研究之後，我找到了控制視訊播放、暫停、快進的程式碼位置，並將控制同步的程式碼移植了進去，從而也實現了同步功能，並且與web版相容。

具體方法請看：修改教程

本專案部分圖示樣式來源於此專案: coplay

本專案github地址：點選前往 ，歡迎⭐⭐⭐STAR⭐⭐⭐

GoEasy是一個成熟穩定的企業級websocket PAAS服務平臺，開發人員不需要考慮websocket服務端的搭建，只需要幾行程式碼，就可以輕鬆實現客戶端與客戶端之間，伺服器與客戶端之間的的websocket通訊。

GoEasy作為國內領先的第三方websocket訊息推送平臺，具備極佳的相容性。除了相容所有常見的瀏覽器以外，同時也相容uni-app，各種小程式，以及vue、react-native、cocos、laya、egret等常見的前端框架。

同時GoEasy已經內建websocket中必備的心跳，斷網重連，訊息補發，歷史訊息和客戶端上下線提醒等特性，開發人員也不需要自己搭建websocket服務處理叢集高可用，安全和效能問題。GoEasy已經穩定執行了5年，支援千萬級併發，成功支撐過很多知名企業的重要活動，安全性和可靠性都是久經考驗。

有興趣自己搭建websocket的話，可以參考這篇技術分享《搭建websocket訊息推送服務，必須要考慮的幾個問題》

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章