Sync Sofa (streaming video playback synchronizer extension)

This chrome extension allows multi-user sync streaming video in a fast, simple and stable way.

GitHub go.mod Go version (subfolder of monorepo) Chrome web store users

Sync Sofa is a full stack web extension support a easy-to-use and stable way to synchronize streaming playback for multiple users. It can improve the experience when users from different locations want to share a video/movie remotely. Currently, the feartures include:

Current version:

v1.0.7 - update on 7 July 2020

⚠⚠⚠ Notice, this version is not compatible with any version before 1.0.6 (<= 1.0.5), please please please make sure your version is the same as your peer's version

Add:
add version detection (lower version number will be detected from user with higher version number if room was established by lower version extension)

Fix:
fix support for https://www.bilibili.com/bangumi/* (bilibili movie)
fix support for Youku & mangoTV

▶︎
all
running...

Supported list

Click here to tell us more

Setting

😊 This part is optional, we have already set default options for you, if you are not interested, please skip to next part.

Server list

Recently, Many Chinese users said our service is unstable, that is because our default server is located at us, so here is the server list, you can pick the nearest one.

Before setting, check server status here: https://sync-status.onns.xyz/.

We will be grateful for supporting us to build more server, if it is convenient (Cause this project is unprofitable).

Alipay, Wechat pay, Paypal

alipay wechat pay paypal

If you have already built your own server, and wanna share, please tell us!

Options page

There are two ways to visit options page.

  1. Right click Sync Sofa extension, choose Options.
  2. Left click Sync Sofa extension, choose Setting icon in popup page.

Your webpage should be like this:

Sync Sofa - Options

Refresh video page

After saving options, please also refresh the video page or local mp4 page or http://127.0.0.1:8080/ to make changes work.

Usage

Notices

⚠️ Before use, please make sure the version number of two clients are consistent.

⚠️ Before use, please make sure the server host of two clients are consistent.

⚠️ If you want to play local .mp4 file, please enable Allow access to file URLs in extension details page.

  1. Open chrome://extensions/, find Sync Sofa, click Details button, enable Allow access to file URLs.
  2. Right click Sync Sofa extension, choose Manage Extensions, enable Allow access to file URLs.

⚠️ If there are multiple versions of extensions in your browser, please enable one and disable others.

Open a video page

You two don't have to open the same webpage, you play the video via local .mp4 file and your partner watch it one some video websites, is ok as long as you both watch the same video actually (source providers are different).

In this doc, for example, User A will watch the video on Bilibili and User B will do it on Youtube. Here is the webpage:

PS: I'm a fan of Boki, and screenshots have been Gaussian blurred. If there is copyright infringement, please contact us to delete.

User A
User B

If there are any ads before the video, watch them before the next step.

Request new code

Click the Sync Sofa extension and then click REQUEST NEW CODE button.

User A

If nothing goes wrong you will receive a message like Room created and room code copied to clipboard, and the room code has been copied to your clipboard, send it to your partner.

Start connection

Your partner receives the room code, click the Sync Sofa extension, paste it in the input area and click START button.

User B

Enjoy yourselves

User A
User B

Now you can play the video, your operations will be synced to your partner. Enjoy yourselves!

VLC support

If you and your partner play video via VLC media player, Sync Sofa can also synchronize your operations.

Start VLC on the server with the Web Interface

First we need to enable controlling VLC via our browser, here is the official documentation:

  1. Open VLC media player
  2. Go Tools → Preferences (select "All" radio-button) → Interface → Main interfaces, check "Web"
    Step 2
  3. Go Tools → Preferences (select "All" radio-button) → Interface → Main interfaces → Lua, set Lua HTTP - Password
    Step 3
  4. Save and reopen VLC media player
  5. Open http://127.0.0.1:8080/ in your browser

Your webpage should be like this:

VLC media player - Web Interface

Request new code

Open http://127.0.0.1:8080/, click the Sync Sofa extension and then click REQUEST NEW CODE button.

If nothing goes wrong you will receive a message like Room created and room code copied to clipboard, and the room code has been copied to your clipboard, send it to your partner.

Start connection

Your partner receives the room code, click the Sync Sofa extension, paste it in the input area and click START button.

Enjoy yourselves

Now you can play the video, your operations will be synced to your partner. Enjoy yourselves!

Notice:

⚠️ Keep your browser open and http://127.0.0.1:8080/ itself.

Close Controller webpage

After your video is finished, please click STOP button on Sync Sofa extension manually or just close http://127.0.0.1:8080/.

Installation

Google Chrome

Install from Chrome Web Store

  1. Open Sync Sofa - Online Video Synchronizer - Chrome Web Store in your Chrome
  2. Click Add to Chrome button
  3. Choose Add extension

Install from local .crx file

  1. Open Github release page
  2. Download sync_sofa.[version].crx, [version] is the number of the latest version
  3. Open chrome://extensions/ in your Chrome
  4. Turn on Developer mode (in the top right corner)
  5. Drag sync_sofa.[version].crx into the chrome://extensions/ page
  6. Choose Add extension

Notices:
If the extension is disabled by Chrome, try Install from chrome web store or Install from unpackaged folder.

This extension is not listed in the Chrome Web Store and may have been added without your knowledge.

Install from unpackaged folder

  1. Download stable version or development version (with new features and some bugs maybe)
  2. Unzip the .zip file you downloaded
  3. Open chrome://extensions/ in your Chrome
  4. Turn on Developer mode (in the top right corner)
  5. Click Load unpacked (in the top left corner)
  6. Choose [download_path]/[unzip folder]/client/chrome_extension
  7. Click select

Microsoft Edge:

Install from Microsoft Edge Addons

  1. Open Sync Sofa - Online Video Synchronizer - Microsoft Edge Addons in your Microsoft Edge
  2. Click Get button

Firefox (will be supported in later version)

Self-hosting Guide

Notices:
⚠️ Before hosting, make sure your server can communicate securely with HTTPS and link to an domain name. All deploy script are based on Let's Encrypt certificates, you can customize with your own SSL certificate providers.
⚠️ dev mode intends for http transmission, prod mode intends for https transmission.

Without Docker

1. Get binary executable file

2. In the directory of binary file, adjust config file base on your need:

3. Run ./server to delopy the server, deployment is successful if you see:

found config file, read parameters from config file...
server is listening at {your_port_number}...

With Docker

Make sure docker service is runing on your server, make change to the script blow and run:

Release History

v1.0.7

🛠 update on 7 July 2020

⚠⚠⚠ Notice, this version is not compatible with any version before 1.0.6 (<= 1.0.5), please please please make sure your version is the same as your peer's version

Add:
add version detection (lower version number will be detected from user with higher version number if room was established by lower version extension)

Fix:
fix support for https://www.bilibili.com/bangumi/* (bilibili movie)
fix support for Youku & mangoTV

v1.0.6

🛠 update on 28 June 2020

⚠⚠⚠ Notice, this version is not compatible with any version before, please please please make sure your version is the same as your peer's version

v1.0.5

🛠 update on 12 May 2020

Improve stability

Test for a new logic to avoid infinite echo back (each party repeat the last operation of other party) : introduce a queue as a buffer of operation and if the operations is beyond frequency threshold, the client will automatically to halt and cool down for sometime.

Add support for edge browser (beta)

v1.0.4

🛠 update on 10 May 2020

Now user will get notification when they successfully connected to each other
Improve stability, better sync performance
Change the notification UI using sweetalert

v1.0.3

🛠 update on 8 May 2020

improve stability & UX logic
Added support of following websites:

Fixed the support of duonao live;
Removed the support of 91mjw (temporarily);
Refined documentation, will add more detail in next verison;

v1.0.2

🛠 update on 31 Mar 2020

Add support of play process bar control sync
Fixed the issue that when syncing playing time, there is the possibility to crash the extension

v0.0.1

🛠 update on 26 Mar 2020 (beta version)

Add support of 2 parties connection
Add support of sync pause and play action
Add support of out-of-sync notification

Meta

Yiliang "Louis" Wang – @blog – @mail

Onns – @blog – @mail

Contributing

  1. Fork it (https://github.com/LouisYLWang/Sync-Sofa/fork)
  2. Create your feature branch (git checkout -b feature/fooBar)
  3. Commit your changes (git commit -am 'Add some fooBar')
  4. Push to the branch (git push origin feature/fooBar)
  5. Create a new Pull Request

FAQ

  1. Q: When I installed, Chrome popup says that Sync Sofa requires the permissions of read and change your data on a number of websites and read your browsing history, sounds so horrible, is that safe?
    A: We do not collect your browsing data, the only thing we do is to get your current tab information and make sure you are visiting a site we support (support list). All information is collected and processed locally. We do not mess up the data on the websites you are watching, just inject a sync script to get your pause, play and seek operation. All source code can be reviewed at our github page, we promise everything we did is necessary and not harmful.

  2. If your find your extension button is darken, please first make sure you are in a video playing page.

  3. If you find your extension can not request room code, please first check the option page and click RESET button. If it still not work, please close your web browser, wait for a while and try again. Currently our server is hosting abroad, it may cause connecting issue.

  4. If you find your extension cannot connect to your peer, please check following:

    1. please make sure the version number of two clients are consistent. To check the version number, you need to open chrome extension page (if this link is not work, please type chrome://extensions/ into the address bar and visit). You will find a extension with the title of Sync Sofa - Online Video Synchronizer 1.0.6. 1.0.6 is your current version number of Sync Sofa.
    2. If 4.1 does not solve your problem, please try step 2 again.

How to get debug info

  1. Open Debug mode in Options page.
  2. Refresh video page (to make changes work).
  3. Shift + ctrl + i in Windows or Shift + cmd + i in MacOS.
  4. Choose console tab.

Sync Sofa （在线视频同步播放插件）

以稳定，快捷的方式远程同步观看在线/本地视频

GitHub go.mod Go version (subfolder of monorepo) Chrome web store users

Sync Sofa是一个稳定易用的Chrome浏览器拓展插件，可同步两端用户的视频播放操作，提高与身处异地的小伙伴一同观看视频的体验，目前支持以下主要功能：

当前版本特性:

v1.0.7 - 2020年7月5日更新

⚠⚠⚠ 注意，此版本与<= 1.0.5的任何版本都不兼容，请务必确保你的版本与小伙伴的版本一致。

支持网站列表

点击这里向我们反馈更多网站

设置

😊 此部分为可选设置，我们已经为你配置好默认服务器，如果你不感兴趣，或者没有修改服务器的需求，请移步至下一部分.

服务器列表

最近许多用户反映国内的访问不稳定，是因为我们的默认服务器在美国，因此我们提供了备用服务器列表，你可以根据你的位置切换到离你距离更近的服务器。

在设置服务器前，请检查服务器的状态：https://sync-status.onns.xyz/.

我们会感谢你对该开源项目作出的贡献，你可以通过提供自己部署的服务来支持我们，也可以帮我们分担一点服务器费用的压力。（也可以一键三连）

支付宝, 微信支付, 贝宝

alipay wechat pay paypal

选项页

打开选项页有下列两种方法：

  1. 右键点击Sync Sofa插件图标, 选择选项。
  2. 左键点击Sync Sofa插件图标, 在插件弹窗中选择底部设置图标。

设置界面如下：

Sync Sofa - Options

刷新视频页面

修改设置并保存后，请刷新视频网站页面/本地视频页面/ http://127.0.0.1:8080/（如果你使用VLC播放本地视频）来使设置生效。

使用说明

注意事项

⚠️ 使用前请确保两个客户端版本号一致。

⚠️ 使用前请确保两个服务器域名一致。

⚠️ 如需播放本地.mp4文件，请在扩展详细信息页面启用“允许访问文件url”。

方法1. 在地址栏输入chrome://extensions/，找到Sync Sofa，点击详情按钮，启用允许访问文件网址。

方法2.右击浏览器左上角Sync Sofa图标，选择管理拓展程序, 启用允许访问文件网址。

⚠️ 如果你的浏览器中安装了多个不同版本的Sync Sofa,请只启用其中一个并禁用其他版本。

打开视频页面

你们可以同步观看不同来源的视频，在播放本地.mp4视频文件时，你的小伙伴可以选择在视频网站上和你同步观看，此外，你们还可以在不同的视频网站看观看相同的视频。

例如，用户A在Bilibili上观看此视频：

此时用户B可在YouTube上同步观看同一视频：

PS：我是boki的粉丝，所以就用了她的视频截图，已经高斯模糊处理过了，如果有侵权的话，请联系我们删除，真的很抱歉！

如果视频开始前有广告，请在广告结束后进入下一步。

获取连接码

点击 Sync Sofa 插件图标并点击REQUEST NEW CODE（获取链接码） 按钮.

User A

如一切正常，你会收到弹窗提示Room created and room code copied to clipboard （房间已建立，连接码已复制到剪贴板），同时连接码将自动拷贝到剪切板中，请将它发给你的小伙伴。

开始连接

你的小伙伴收到room code（连接码）后，点击Sync Sofa插件图标，粘贴到输入栏中点击START（开始）按钮。

User B

愉快观看吧

User A
User B

现在你可以播放视频了，你的播放，暂停，更改时间等操作都会同步给你的小伙伴。愉快地同步观看吧!

VLC支持

如果你们都通过VLC 媒体播放器播放视频，Sync Sofa也可以同步你们的操作。

通过Web控制界面操控VLC播放

首先你们需要开启VLC的Web控制界面，使浏览器可以控制VLC的播放，请参考以下官方文档：

  1. 打开VLC媒体播放器
  2. 进入 工具 → 偏好设置 (左下角显示设置选择 "全部") → 界面 → 主界面, 勾选 "Web"
    Step 2
  3. 进入 工具 → 偏好设置 (左下角显示设置选择 "全部") → 界面 → 主界面 → Lua, 设置 Lua HTTP - 密码
    Step 3
  4. 点击保存 并重启VLC媒体播放器
  5. 在浏览器中打开 http://127.0.0.1:8080/

这时你的网页应该如下图所示:

VLC media player - Web Interface

获取连接码

确认已在浏览器中打开 http://127.0.0.1:8080/,
点击 Sync Sofa 插件图标并点击REQUEST NEW CODE（获取链接码） 按钮.

如一切正常，你会收到弹窗提示Room created and room code copied to clipboard（房间已建立，连接码已复制到剪贴板，同时连接码将自动拷贝到剪切板中，请将它发给你的小伙伴。

开始连接

你的小伙伴收到room code后，点击Sync Sofa插件图标，粘贴到输入栏中点击START（开始）按钮。

愉快观看吧

现在你可以使用Sync Sofa通过VLC同步本地视频播放状态了，你的播放，暂停，更改时间等操作都会同步给你的小伙伴。愉快地同步观看吧!

注意:

⚠️ 在播放时，切勿关闭http://127.0.0.1:8080/页面。

关闭控制页面

视频播放完毕后，点击Sync Sofa插件页面上的STOP按钮，或关闭http://127.0.0.1:8080/页面。

安装

谷歌浏览器

从谷歌商店安装

  1. 在Chrome浏览器中打开 Sync Sofa - Online Video Synchronizer - Chrome Web Store
  2. 点击 Add to Chrome 按钮
  3. 选择 Add extension

从本地 .crx 文件安装

  1. 打开 Github release page（版本发布页面）
  2. 下载 sync_sofa.[version].crx, [version] 为当前最新版本编号
  3. 在Chrome浏览器地址栏中输入 chrome://extensions/
  4. 启用 开发者模式 (页面右上角)
  5. 将 sync_sofa.[版本号].crx 拖入 chrome://extensions/ 页面
  6. 点击 添加插件 按钮

注意:
如果该插件被Chrome浏览器禁用，请尝试 从谷歌商店安装 或者 安装未打包的插件

This extension is not listed in the Chrome Web Store and may have been added without your knowledge.

安装未打包的插件

  1. 下载 稳定版本 or 开发版本 (新特性，也许也有bug)
  2. 解压你下载的.zip 压缩文件
  3. 在Chrome地址栏输入 chrome://extensions/ 打开插件管理页面
  4. 开启右上角开发者模式 按钮
  5. 点击左上角加载未打包的拓展 按钮
  6. 选择 下载路径/解压路径/client/chrome_extension
  7. 点击 选择

微软Edge浏览器:

从Edge浏览器插件中心安装

  1. 在Edge浏览器中打开 Sync Sofa - Online Video Synchronizer - Microsoft Edge Addons
  2. 点击 获取 按钮

Firefox（后续版本添加支持）

其实也可能不会

服务端部署指南

注意:

⚠️ 部署前，建议你的服务器已经部署了SSL/TLS证书，并已连接到域名。以下部署脚本基于使用Let's Encrypt certificates验证的服务器，如使用其他的证书提供商，可能需要修改部分脚本以正常运行。

⚠️ dev模式使用http协议进行传输，prod使用https协议进行传输

直接部署（不使用Docker容器）:

1. 获取执行文件

2. 修改配置文件：

3. 在执行文件所在路径下，执行 ./server 部署服务器, 部署成功信息如下:

found config file, read parameters from config file...
server is listening at {your_port_number}...

使用Docker容器部署

在部署前请确认Docker容器在服务器端可正常运行，请按照如下提示修改参数

版本日志

v1.0.7

🛠 2020年7月5日更新

⚠⚠⚠ 注意，此版本与<= 1.0.5的任何版本都不兼容，请务必确保你的版本与小伙伴的版本一致。

v1.0.6

🛠 2020年6月28日更新

⚠⚠⚠ 注意，此版本与之前的任何版本都不兼容，请务必确保你的版本与小伙伴的版本一致。

v1.0.5

🛠 2020年5月12日更新

v1.0.4

🛠 2020年5月10日更新

v1.0.3

🛠 2020年5月8日更新

v1.0.2

🛠 2020年3月31日更新

v0.0.1

🛠 2020年3月26日更新 (测试版)

开发者

Yiliang "Louis" Wang – @blog – @mail

Onns – @blog – @mail

参与更新

  1. 拷贝当前代码（https://github.com/LouisYLWang/Sync-Sofa/fork）
  2. 创建你自己的分支 (git checkout -b feature/fooBar)
  3. 添加评论 (git commit -am 'Add some fooBar')
  4. 提交代码 (git push origin feature/fooBar)
  5. 创建一个更新请求

常见问题

  1. Q: 在我安装的时候，Chrome提示我Sync Sofa可以读取和更改您在一些网站上的数据以及读取您的浏览记录，听起来很严重，它安全吗？

    A: 我们不会收集你的浏览数据，我们只会读取你当前标签页的标题，用来判断你是否在访问我们支持的页面(支持网站列表)，以避免影响使用体验的事情发生。所有对你浏览数据的收集和处理只会发生在本地；事实上我们也不会随意修改网站的数据，我们只会使用一个同步脚本来监测你播放，暂停及更新进度等操作（我们不得不这样做）。所有的源码都可以在 [我们的项目主页]审核(https://github.com/LouisYLWang/Sync-Sofa), 我们承诺目前做的所有事情都是必要且无害的.

  2. 如果你发现按钮变灰, 请确认你是否在我们支持的网站操作(支持网站列表).

  3. 如果你发现插件无法获取同步码，请按以下顺序检查问题：

    1. 请检查 选项页面 并点击重置 按钮
    2. 请参考 选项页面 根据你所在的位置选择并设置合适的服务器
    3. 请检查服务器当前状态 https://sync-status.onns.xyz/是否正常启动
    4. 如以上都不能解决你的问题，请通过项目反馈页面或项目wiki页面右下角的反馈按钮通知我们。

  4. 如果你发现插件无法正常同步操作，请按以下顺序检查问题：

    1. 请务必确认两方版本号是否一致，欲检测版本号，需打开chrome extension page，并找到Sync Sofa - Online Video Synchronizer *.*.*，其中 *.*.* 为当前版本。
    2. 请检查 选项页面 并点击重置 按钮
    3. 请参考 选项页面 根据你所在的位置选择并设置合适的服务器
    4. 请检查服务器当前状态 https://sync-status.onns.xyz/是否正常启动.
    5. 如以上都不能解决你的问题，请通过项目反馈页面或项目wiki页面右下角的反馈按钮通知我们。

如何获取调试信息

  1. 在选项页里打开 debug模式。
  2. 刷新视频页面。
  3. Shift + ctrl + i 在 Windows 下 或者 Shift + cmd + i 在 MacOS 下.
  4. 选择 console 标签页.