本文作者：星空有限
原文链接：https://liyangzone.com/2020/0...
GoEasy已获作者受权转载，GoEasy转载时有改变，感激作者的分享。

前段时间我有这样一个需要，想和一个异地的人一起看电影，先后在网上找了一些计划，不过那几个案都有一些毛病

  • coplay: 一个浏览器插件，只能播放各大视频网站的视频，视频资源无限，我想要看的视频没有，比方一些经典电影和美剧之类
  • 微光APP: 还是下面的问题，而且只有手机端
  • 向日葵等远程桌面: 受限于网络问题，卡顿很重大，体验不好

作为一个对用户体验有谋求的切图仔，我是一个下载党，看电影必须下载到本地看，根本不看视频网站上的玩意

那么有没有能实现同步播放本地文件的计划呢，答案是必定的，通过我的一些摸索和钻研，我实现了本地文件的同步播放，同时反对PC和手机端，而且还反对外挂字幕等高级性能，如何实现请往下看。

性能介绍&个性：

一个能够同步看视频的播放器，可用于异地同步观影、观剧，反对多人同时观看。
本我的项目有两个版本，web版运行在浏览器上，可跨平台，不限操作系统、设施，性能简略实用于要求不高的用户。还有基于SPlayer(射手影音)DIY的客户端版本(windows、MAC)，播放4K高清文件、外挂字幕，通通没问题。

演示demo:

web版同步成果

客户端与web版同步成果

原理：

基于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官网：https://www.goeasy.io

无论是应用哪种websocket服务都能够，本我的项目写了两套代码，只需将不必的那套正文掉即可(默认GoEasy)。

除了websocket服务器之外，还须要两个http服务端，一个是web服务端(提供html、css、js等文件的拜访)，一个是视频服务端(提供视频文件拜访)。

你能够将web服务部端署到以下地位：

  • 具备公网IP的服务器
  • github-pages或国内的码云提供的动态web服务
  • localhost(本地服务器)，同一个局域网内的设施拜访该服务器内网IP

视频文件只需一个视频地址就行，也有以下几种抉择：

  • 具备公网IP的服务器
  • localhost(本地服务器)，同一个局域网内的设施拜访该服务器内网IP
  • 第三方视频地址

应用场景1：

云服务器带宽足够大(至多要大于播放视频的码率)，云服务器既能够作为websocket服务端，也能够作为http服务端。上图中所有设施都拜访云服务器的ip或域名。

应用场景2：

云服务器的带宽很小，这时候它只能作为websocket服务端，这时能够用上图中的PC1和PC2作为http服务端，PC1和PHONE1在一个内网拜访PC1的内网IP，PC2和PHONE2在一个内网拜访PC2的内网IP，PC3可作为本人的http服务端，PHONE3若是有提供视频文件的服务端，也能够应用。

应用场景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(射手影音)。

射手影音官网：https://splayer.org

源码地址：https://github.com/chiflix/sp...

在以electron + 播放器为关键字一番搜寻之后，我找到了这个基于electron实现的开源播放器，并下载了源码来钻研。

通过一番钻研之后，我找到了管制视频播放、暂停、快进的代码地位，并将管制同步的代码移植了进去，从而也实现了同步性能，并且与web版兼容。

具体方法请看：批改教程

本我的项目局部图标款式来源于此我的项目: coplay

本我的项目github地址：点击返回 ，欢送⭐⭐⭐STAR⭐⭐⭐

对于GoEasy：

GoEasy是一个成熟稳固的企业级websocket PAAS服务平台，开发人员不须要思考websocket服务端的搭建，只须要几行代码，就能够轻松实现客户端与客户端之间，服务器与客户端之间的的websocket通信。

GoEasy作为国内当先的第三方websocket音讯推送平台，具备极佳的兼容性。除了兼容所有常见的浏览器以外，同时也兼容uni-app，各种小程序，以及vue、react-native、cocos、laya、egret等常见的前端框架。

同时GoEasy曾经内置websocket中必备的心跳，断网重连，音讯补发，历史音讯和客户端高低线揭示等个性，开发人员也不须要本人搭建websocket服务解决集群高可用，平安和性能问题。GoEasy曾经稳固运行了5年，反对千万级并发，胜利撑持过很多知名企业的重要流动，安全性和可靠性都是久经考验。

有趣味本人搭建websocket的话，能够参考这篇技术分享《搭建websocket音讯推送服务，必须要思考的几个问题》