Skip to content
Make your own video room like https://getaroom.video to watch videos remotely with all your friends
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
examples
src
.gitignore
CNAME
LICENSE
README.md
_config.yml
package-lock.json
package.json
webpack.config.js

README.md

GroupWat.ch

Make your own video room to watch videos remotely with all your friends

Demo

Here's is a demo : https://groupwat.ch/examples/advanced.html

Features

  • Play videos in sync with people from anywhere on the globe
  • Video call, voice call, chat room
  • Support .srt and .vtt subtitles, can be added from your local disk
  • Play your local video files [No downloding or streaming]
  • Video.js video player, highly customizable and open-source
  • Uses WebSocket server not WebRTC, hence easy to deploy without HTTPS
  • Handy to use as a standalone in your web-browser

Note : current version on Groupwat.ch supports two peers (people) only, we are adding multiple peer support very soon

QuickStart

Include CSS

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
<link href="https://unpkg.com/video.js@7.1.0/dist/video-js.css" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/groupwat.ch/dist/css/styles.min.css">

Include JS

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/video.js@7.1.0/dist/video.js"></script>
<script src="https://unpkg.com/groupwat.ch"></script>

Initialize the plugin

Replace YOUR_CHANNEL_ID and YOUR_ROOM_ID with your own unique identifiers.

Read WebSocket.in docs to get help with choosing YOUR_CHANNEL_ID and YOUR_ROOM_id.

<div id="video_container"></div>  
<script type="text/javascript">

var config = {
  socket_server:'wss://connect.websocket.in/YOUR_CHANNEL_ID?room_id=YOUR_ROOM_ID',
  container : 'video_container',
  src : 'https://vjs.zencdn.net/v/oceans.mp4',
  socket_server : "wss://YOUR_SOCKET_SERVER",
  videoCall:true
}

var mGWatch = new GWatch(config);
</script>

This example code usage free WebSocket server from WebSocket.in for WebRTC signaling, you may use your own WebSocket server if you wish to.

Codepen : https://codepen.io/hack4mer/full/dgVJpN

Configuration

Following are configuration options available for the GWatch API

Note: This doc table might be outdated, see GWatch.js source for updated configurations and Event.js for all supported events.

Option Description Value
container ID of the div in which the GWatch UI should load required
socket_server Complete URL of the socket server required
src URL of the video file to play required, if localSource != true
localSource Show a local-disk video file selector Default: false
videoCall Enable video, voice & chat features Default: false
disableVideo When true: Disables video & voice features, allows chat only Default: false
disableChat When true: Disables the chat feature, allows video & voice only Default: false
devmode Devevelopment mode, informative console logs are disabled is set to false Default: false
onSocketConnected Function to be fired when socket connection is succesful function(){ console.log("socket connected");
onSocketError Function to be fired when socket connection fails function(){ console.error("socket connection failed");}

License

MIT

You can’t perform that action at this time.