Virtual Classroom's Recording API enables you to record live classes that can be downloaded or played online.

To get recorded video, use the getrecording API call. Check the Get Recorded Class Videos section in REST API documentation for additional information.

What gets recorded?

Our server-side recording (SSR) feature records all whiteboard actions such as drawing and writing, shared documents & presentations, chat text, audio and video streams and screen sharing and compiles all in to a high-definition 720p WEBM video file that can be downloaded instantly right after you press the 'stop' recording button or when browser is closed.

Please note that this feature emulates what the instructor sees such as when the instructor changes whiteboard, enters 'enlarged' video conference mode, upload a PDF file or annotate on top of a document.

How do I play the videos from my website?

Our recording API returns the URL of the video file from the cloud. Your videos are protected using signed URLs which are time based tokens that are only valid for a limited period of time. Once that time window has expired, the access token contained in the link will no longer work. Furthermore, your videos are streamed securely using 256-bit SSL encrypted connection. This security feature ensures unwanted hot-linking or distribution of your video file.

It is the customers responsibility to build a permissions logic and appropriate database queries to restrict videos only to the class attendees. For example, your students may click on View class recording link from your class page that opens a page with an embedded HTML5 video player. This will automatically request the video file using REST API call and play it to the student.

There is no need to download and store the file in your server to play it. You can play the file directly from BrainCert cloud.

To play video on your website, build a page on your website that has one of the free HTML5 video players such as JWplayer or Video.js.

JWplayer

Step 1

Create an account and navigate to your JWplayer dashboard.



Step 2

Click on Create New Player button.



We recommend keeping the dimension as "Responsive"



Using JWplayer's Player Builder, you can select a visual interface (skin) for the player that best matches your brand’s style guide. You can also customize the player further by adding a custom logo or specifying specific colors for your player skin.

=

Once done, click on the Save changes button.



Now, copy the generated video player URL.



Use the following example code in your web page to play the class recording. Change the player library URL below to the one generated in the above step.

<script type="application/javascript"
src="https://content.jwplatform.com/libraries/XXXXX.js"></script>

Add the following example player code below the player library URL shown above.

<div id="MyVideoPlayer">
<script type="text/javascript">
var playerInstance = jwplayer("MyVideoPlayer");
playerInstance.setup({
playlist: [{
sources: [{
file: "[Video URL from API]"
}]
}],
primary: "html5",
width: "100%",
aspectratio: "16:9"
});
</script>

Use API call to get the video URL and replace it with [Video URL from API] in the above example.

The JW Player for HTML5 leverages new technology within modern web browsers to playback video without the need for plugins or addons. This has the potential to improve both user experience and performance, especially as browsers begin to take advantage of the hardware-based video decoding available on most devices.

You’ll still find a fully functional JWplayer jam-packed with features, including:

Full support for all browsers, including Internet Explorer, Firefox, Chrome, Safari, Opera, iPad, and iPhone
Playback capabilities for H.264, Theora, and FLV
Support for all JW Player PNG Skins and
An extensive API for those who want to add in additional functionality

Configuring Videojs

Video.js is an open source library for working with video on the web, also known as an HTML video player.

Follow Getting Started instructions from Videojs website to setup the free open-source HTML5 player in your website.

An example code is given below:

<head>
<link href="http://vjs.zencdn.net/6.2.0/video-js.css" rel="stylesheet">
<!-- If you'd like to support IE8 -->
<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>

<body>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
<source src="[Video URL from API]" type='video/webm'>
</video>
<script src="http://vjs.zencdn.net/6.2.0/video.js"></script>
</body>

Use API call to get the video URL and replace it with [Video URL from API] in the above example.

Replace MY_VIDEO_POSTER.jpg with any poster image of your choice. The poster attribute sets the image that displays before the video begins playing. This is often a frame of the video or a custom title screen. As soon as the user clicks play the image will go away.

Check all available settings here.

We hope you found this article helpful.
Was this article helpful?
Cancel
Thank you!