Sync player: using websocket to play video synchronously in different places

Time:2020-12-3

The author of this article: the starry sky is infinite

Link to the original text:liyangzone.com/2020/09/20/%E5%89%8…

Goeasy has been authorized to reprint by the author. There are some changes in goeasy’s reprint. Thank you for your sharing.

Some time ago, I had such a demand. I wanted to watch a movie with a person from a different place. I found some solutions on the Internet, but those cases all had some shortcomings

  • coplay:A browser plug-in can only play videos from major video websites. Video resources are limited. I don’t have videos I want to watch, such as some classic movies and American TV series

  • Low light level app:It’s still the problem above, and it’s only on the mobile phone

  • Remote desktop such as sunflower:Limited by the network problem, the stuck is very serious, the experience is not good

As a chetu Tsai who pursues user experience, I am a download party. I have to download movies to watch locally. I basically don’t watch things on video websites

So, is there a solution to synchronously play local files? The answer is yes. After some exploration and research, I have realized the synchronous playback of local files. At the same time, it supports PC and mobile terminals, and also supports advanced functions such as external subtitles. How to achieve this, please look down.

Function introduction & features:

A player that can watch videos synchronously can be used to watch movies and plays in different places, and support multiple people to watch at the same time.
There are two versions of this project. The web version runs on the browser, which can cross platform, not limited to operating system and equipment. It has simple functions and is suitable for users with low requirements. There are also client versions (windows, MAC) based on player DIY, playing 4K high-definition files and external subtitles, all of which are OK.

Demo:

Synchronization effect of web version
Sync player: using websocket to play video synchronously in different places
Synchronization effect between client and web version
Sync player: using websocket to play video synchronously in different places

Principle:

Based on websocket, it is similar to some chat rooms implemented with websocket, except that the message in the chat room is replaced by the action and time information of playing pause. After receiving the message, the client performs the corresponding actions: play, pause, fast forward, so as to achieve the effect of playing at the same time.

Project

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

How to use:

The core of this project is websocket, so at least one server is required to provide websocket service. Websocket service can be deployed by itself, and websocket service provided by goeasy, a third-party platform, can be used.

1. Self deployment:

Websocket server can be a cloud server with public IP, or an ordinary PC with public IP. It can also be without public IP. You can also use zerotier or other VPN tools to form a large LAN between two devices so that they can communicate with each other. Websocket server operating system is not limited, as long as there are node.js Environmental Science.

Websocket server deployment method: installation node.js Environment, move the server directory to the server, enter the server directory, and execute the following command:

Installation project dependency package

#Installation project dependency package

npm install 

#Start the websocket service

node index.js

2. Using the websocket service of goeasy

Register the goeasy developer account, create an application, obtain the appkey, and copy it to the corresponding location of the project.

Official website of goeasy:www.goeasy.io

No matter what kind of websocket service is used, this project has written two sets of codes, just comment out the unused one (go easy by default).

In addition to the websocket server, there are also two HTTP servers, one is the web server (providing access to HTML, CSS, JS and other files), and the other is the video server (providing access to video files).

You can deploy web services to the following locations:

  • Server with public IP
  • Static web services provided by GitHub pages or code cloud in China
  • Local host (local server), the devices in the same LAN access the intranet IP of the server

A video file only needs a video address. There are also several choices:

  • Server with public IP
  • Local host (local server), the devices in the same LAN access the intranet IP of the server
  • Third party video address

Sync player: using websocket to play video synchronously in different places

Scenario 1:

The bandwidth of the cloud server is large enough (at least greater than the bit rate of playing video), and the cloud server can be used as either a websocket server or an HTTP server. All devices in the above figure access the IP or domain name of the cloud server.

Scenario 2:

The bandwidth of the cloud server is very small. At this time, it can only be used as the websocket server. At this time, PC1 and PC2 in the above figure can be used as the HTTP server. PC1 and phone1 can access the intranet IP of PC1 in an intranet. PC2 and phone2 access the intranet IP of PC2 in an intranet. PC3 can be used as their own HTTP server. If there is a server providing video files for phone3, it can also be used.
Sync player: using websocket to play video synchronously in different places
Scenario 3:

It is necessary to use zerotier or other VPN tools to form a large LAN. Any PC can be used as websocket server and HTTP server (the upload bandwidth should be large enough). In the figure above, all devices can access the intranet IP of that PC.

The simplest way to use it is to download nginx, open a local server, download the client folder of the project and put it in the nginx root directory, as well as the video files. Register the goeasy developer account and create an application, get the appkey, and fill in the appkey to the code (script)/ main.js )Corresponding position. Then the browser opens 192.168.3.58/client/and fills in your video address 192.168.3.58/movie/ xxx.mp4 Or network video address, the other party also operates in this way, you can achieve synchronous video playback.

The function of the web version is relatively simple and limited by network problems. Operations such as fast forward need to be buffered for a period of time. If you don’t meet the function of the web version and have higher requirements on the user experience, such as supporting more file formats, playing HD local video files, and plug-in subtitles, I have also found another way to meet your needs.

That is DIY, an open source player source code: player (shooter).

Sagittarius video official website:splayer.org

Source code address:github.com/chiflix/splayerx

After searching for the key words of electron + player, I found the open source player based on the implementation of electron, and downloaded the source code to study.

After some research, I found the code position to control the video playing, pause and fast forward, and transplanted the code to control the synchronization, so as to realize the synchronization function and be compatible with the web version.

The specific methods are as follows:Modifying the tutorial

Some icon styles in this project are derived from this project:coplay

GitHub address of the project:Click to goWelcome ⭐⭐⭐ STAR ⭐⭐⭐

About goeasy:

Goeasy is a mature and stable enterprise level websocket PAAS service platform. Developers do not need to consider the construction of websocket server. They only need a few lines of code to easily realize the websocket communication between clients and between servers and clients.

As the leading third-party websocket message push platform in China, goeasy has excellent compatibility. In addition to all common browsers, it is also compatible with uni app, various small programs, as well as Vue, react native, cocos, Laya, egret and other common front-end frameworks.

At the same time, goeasy has built in the essential features of websocket, such as heartbeat, disconnection and reconnection, message reissue, historical message and client online and offline reminders. Developers also don’t need to build websocket services to deal with cluster high availability, security and performance issues. Goeasy has been running stably for 5 years, supporting tens of millions of concurrent operations, successfully supporting important activities of many well-known enterprises, and its security and reliability have been tested for a long time.

If you are interested in building your own websocket, you can refer to this technical sharing《Several problems to be considered in building websocket message push service

This work adoptsCC agreementThe author and the link to this article must be indicated in the reprint

Recommended Today

The actor model is so excellent under distributed high concurrency

Write at the beginning In general, there are two strategies for communicating in concurrent threads: shared data and messaging. One of the biggest problems of concurrent programming with shared data is data condition competition. It’s a headache to deal with all kinds of locks. Most of the traditional popular language concurrency is based on shared […]