Post Reactions on a Video Streaming Website using Pusher API

  • Post published:September 17, 2015

Just like YouTube or Vimeo, an online education application (web based) provides the feature to post comments and reactions during video streaming and playing on its video lectures for registered members which could be students or faculty members. In this application, client asked vteam #430 for the addition of a classroom feature. This feature would provide all the active/online users Like, Dislike or Post Comment functionality while video streaming. This could be possible only by using Pusher API in both Client & Server side implementations.

Implementation:

vteam #430 firstly built Pusher API client side object and established connection channels for members’ reactions i.e. Like/Dislike and Comments both separately. Then it would load a video in iframe and would enable its controls using JavaScript for members to play, pause, stop the video, or users could seek the progress bar until a particular duration.

During video streaming, system calls the Pusher API on back-end every second to load the saved activity performed during or till that time. All the ongoing activities would be fetched and then would be made available to display these activities to all other active users who would be attending the same lecture at that time. All other active users could see and share their own comments which could be seen by others as well.

Code Snippet:

Following is the Server Side Pusher API Code:

pusher.php

// Initialize the API with your App ID and App Key
$this->app_id = 'API_ID'; // API Id
$this->app_key = 'APP_KEY'; // API Key
$apiURL = 'https://developer.reactionstream.com/api/' . $function;
// building API Request parameters<br>$params = array();
$params['app_id'] = $this->app_id;
$enc_request = base64_encode(mcrypt_encrypt(MCRYPT_RIJNDAEL_256, $this->app_key, json_encode($api_params), MCRYPT_MODE_ECB)); // encode request parameters
$params['enc_request'] = $enc_request;
// initializing curl request
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $apiURL);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POST, count($params));
curl_setopt($ch, CURLOPT_POSTFIELDS, $params);
$result = curl_exec($ch); // curl execution
$result = @json_decode($result);
if($result == false) {
throw new Exception('There was an error with your request.');
}
return $result;

example.php

// Create an array with the necessary parameters for the desired function
$params = array(
'presentationID' => $_REQUEST['presentationID'],
'location' => $_REQUEST['location'],
'name' => $_REQUEST['name'],
'value' => $_REQUEST['value'],
'userID' => $_REQUEST['userID'],
'avatar' => $_REQUEST['avatar']
);
// Call the desired API function
$result = $this->ReactionStreamAPI('create_reaction',$params);
// If using real-time messaging, create an instance of the Pusher API Wrapper using your Pusher API keys
$pusher_api_id = 'YOUR_PUSHER_ID'; // YOUR_PUSHER_ID
$pusher_api_secret = 'YOUR_PUSHER_SECRET'; //YOUR_PUSHER_SECRET
$pusher_api_key = 'YOUR_PUSHER_KEY'; //YOUR_PUSHER_KEY
//$pusher = new Pusher($pusher_api_key, $pusher_api_secret, $pusher_api_id);
// Fire a Pusher event to notify all clients that a comment has been created
//$pusher->trigger('reactions', 'reaction', array('location' => $params['location'],'name' => $params['name'],'value' => $params['value'], 'avatar' => $params['avatar']) );
// parsing error returns<br>if(isset($result->errorMessage)){
$this->view->error = $result->errorMessage; // sending error message to current view
}

Following is the Client Side Pusher API Code:

example.php

<!-- Include the Pusher client API -->
<script src="https://js.pusher.com/2.2/pusher.min.js"></script>
<script type="text/javascript">
// Since we are using real-time messaging, we create an instance of the Pusher API
var pusher = new Pusher('YOUR_APP_KEY');
// Subscribe this page to the reactions channel so that this page is notified whenever a user enters a new reaction.
var reactionsChannel = pusher.subscribe('reactions');
// Subscribe this page to the comments channel so that this page is notified whenever a user enters a new comment.
var commentsChannel = pusher.subscribe('comments');
// This calls a PHP script that adds a new reaction to the system.
reactionTime = Math.floor(player.getCurrentTime());
// In this demo, we do not authenticate users so all comments and reactions are anonymous.
// If your system authenticates users, pass their ID and avatar using these parameters.
reactionUserID = "Anonymous";
reactionAvatar = "https://developer.reactionstream.com/images/empty_avatar.png";
$.post('https://developer.reactionstream.com/tools/addReaction',
{
presentationID: <?php echo $this->presentationID; ?>,
name: reactionName,
value: reactionValue,
location: reactionTime,
userID: reactionUserID,
avatar: reactionAvatar
}, function(response) {
// Do something here if you want
});