Back

Downloading and playing recorded videos using API

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

To get recorded video, use the getrecording API call. Check the "13. Get Recorded Class Videos" section in REST API documentation (under 'Documentation' left tab) 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 instructor changes whiteboard, enter '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 in your website, build a page on your website that has one of the free HTML5 video players such as JWplayer and Video.js.

JWplayer

Create and an account and go to your dashboard. Click on "Manage" link from the left navigation.

Click on "Create New Player" button

We recommend keeping the dimension as "Responsive" and turn off option "Always use Flash when available".

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 "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


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.



Author
BrainCert
Date Created
2017-06-28 09:00:23
Date Updated
2017-06-28 11:27:20
Views
2269