groupwat.ch

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

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

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