Keywords

1 Introduction

Nowadays, with the Information and Communications Technologies (ICT), the open and distance training are becoming more extents in all sectors of education activities in general and education in particular. However, distance education poses specific problems. Among these problems, there is the feeling of isolation experienced by learners, the accompanying deficit and lack of relationship with other actors; which leads to a high dropout rate [1,2,3]. This as geographical distance and physical learning communities and those educators begin to be offset by devices that introduce spaces of communication and collaborative learning process in the form of FAQ, forums or messaging. Moreover, the technologies can reduce communication time and physical distancing. The solutions of “virtual classes” are numerous and easily integrated with the LMS (Learning Management System) [4,5,6]. A virtual classroom allows bringing together a group of learners and a teacher/facilitator. This system closer to the Webinar Workshop or used in connection with video conferencing, remote meetings and company training, can reproduce the conditions of a classroom [7].

To reduce the effects of the geographical separation between actors of digital universities, researchers proposed IP SMSC center solutions incorporating value added services. [8] However, the authors do not provide solutions to Open Training and Distance to extend the functionality of their e-learning platform.

In addition, distance learning platforms exist and incorporate self assessment tools and online assessment. [9] This is the case of Moodle, which is used by many universities. [10] Moreover, it also realizes that Google and openfire use WebRTC API to provide solutions for online presentation tools. A presentation utility must allow at least the participants to the following three operations: (1) audio conference (2) video conference (3) loading and synchronous PowerPoint document reading. Now the WebRTC technology provides a solution to the problems of audio and video. The question is how to make the presenter can load a document Power Point and make its real time presentation with several participants? However, this functionality requires a lot of interactivity between participants. For example; every time the presenter makes a presentation page of change, action must be notified in real time to all participants. And this requires knowing the structure of a power point paper to know at every moment what page it is. Another problem on the e-Learning platforms is the ability of the presenter to annotate or write mathematical formulas that are visible in real time by participants.

The rest of the paper is organized as follows: in Sect. 2, we first present the state of the art on WebRTC and basic tools used in our approach. Then we present in Sects. 3 and 4 architecture integration tools and provide timing diagrams representing operating scenarios. Finally, in Sect. 5, we implement our solution to be presented in the form of snap in Moodle.

2 Related Work

We present in this part of the WebRTC technology and basic tools (ImageMagick, and Ghostscript) used in our approach.

2.1 WebRTC (Web Browsers with Real Time Communications)

WebRTC is an open source project introduced by Google in 2011 [11] which ensures communications in real time via a JavaScript API. [12] The project aims to develop a technology allowing web browsers to support point to point interactive communications and provide data exchange synchronous mode [13, 14]. The WebRTC is intended to give browsers the ability to offer audio, video or written, file transfer, screen sharing and remote control of computers.

The main components of the WebRTC API defined by the W3C working groups (World Wide Web Consortium) and IETF (Internet Engineering Task Force) are [15, 16].

  • MediaStream: Allows a browser to access the camera and microphone;

  • RTCPeerConnection: Enable audio and video calls;

  • RTCDataChannel: Allows the browser to send data in a peer-to-peer connection.

Figure 1 shows, first WebRTC API C++ implemented in some browsers and also the web WebRTC API allowing web developers to integrate services offered by the WebRTC into their applications.

Fig. 1.
figure 1

WebRTC architecture

Full size image

In our solution, the WebRTC plays a very important role. In addition to allowing us to have audio and video communication between participants; it is also used to manage the interaction between them. For that sum we pressed the option of WebRTC’s chat to send commands to the various participants. These commands can be:

  • Control Change page number: the presenter sent to the participant to update their page numbers.

  • Annotation control: it is also sent by the presenter.

  • Microphone off control or speaker: it may happen that at some point the presenter does not want to hear what participants are spirited to say or want to disable is set Mute.

  • Mathematical given shipment control.

2.2 GhostScript

Ghostscript software consists of a panel with the task of analyzing, translating into various other formats, but also to run programs written in PostScript and PDF, view them and print them. PostScript and PDF files can even be mutually translated from one language to the other. [17] Ghostscript incorporates features that improve the graphics usually kept to a minimum on the files to PostScript and PDF [18] format.

In our solution, it is used to convert a presentation (postscript …) PDF document before being converted into image. A presentation can be in PDF or PostScript format even. While access to the structure of the document type can be complex if you try to handle this dimension browser. That is why we first standardized presentation by converting PDF to facilitate its translation into images.

2.3 ImageMagick

ImageMagick is a software suite to create, edit, compose, or convert bitmap images. It can read and write images in a variety of formats (over 200) including PNG, JPEG, JPEG-2000, GIF, TIFF, DPX, EXR, WebP, Postscript, PDF, and SVG. Use ImageMagick to resize, flip, mirror, rotate, distort, shear and transform images, adjust image colors, apply various special effects, or draw text, lines, polygons, eclipses and Bézier curves [19, 20].

ImageMagick is free software delivered as a ready to run binary distribution or as source code that you may use, copy, modify, and distribute in both open and proprietary applications. It is distributed under the Apache 2.0 license. The ImageMagick development process ensures a stable API and ABI. Before each ImageMagick release, we perform a comprehensive security assessment that includes memory error and thread data race detection to prevent security vulnerabilities [19].

Almost all programming languages have extensions or libraries to interact with the ImageMagick API, although you could also use it via command line.

In our solution, ImageMagick and used for converting a PDF document into images to facilitate the handling of the presentation at the client side.

Most welcome.

3 Architecture and Operation of the Solution

In this part we will present the architecture and functionality of our solution.

3.1 Architecture

This architecture consists of several components. Each of these components plays a specific role (Fig. 2).

  • User + Browser: Is the client. The browser can be any browser supporting WebRTC. This allows our solution to be compatible with tablets.

  • Apache: The container of our application.

  • Ghostscript: It is responsible for translating a PostScript document in PDF format

  • ImageMagick: Its role is to cut a PDF document Images

  • WebRTC server: It is he who plays the signaling server for technology WebRTC

Fig. 2.
figure 2

Solution architecture

Full size image
Fig. 3.
figure 3

Scenario of creating a presentation

Full size image

3.2 Some Operations Scenarios

To better explain this architecture we use scenarios workings of representatives in the form of defined sequence diagrams.

3.2.1 Creating a Presentation

In this section we show the different interactions when creating a presentation.

  1. (1)

    Presenter: Application Form

  2. (2)

    Apache: Sending the form

  3. (3)

    Presenter: Sending data from the presentation with an attachment presentation in PDF or Postscript format

  4. (4)

    Apache: Use Ghostscript for translating the PDF document if it is not already in PDF

  5. (5)

    Apache: Use ImageMagick to translate the document in PDF Images

  6. (6)

    Apache: Persistence of data in the database

  7. (7)

    Apache server: Notification presenter.

3.2.2 Scenario of Creating a Presentation

In this section we show the different interactions when a first user connects to the presentation (Fig. 4).

Fig. 4.
figure 4

Connection scenario of user in presentation

Full size image
  1. (1)

    User: Application presentation interface to the Apache server by including the identifier of the presentation

  2. (2)

    Apache: Plays presentation as an image, the more connection settings to the server WebRTC

  3. (3)

    User: Request Connection server WebRTC

  4. (4)

    WebRTC server: User identifier Creation

  5. (5)

    WebRTC server: Accept the connection and sends the identifier to the customer

  6. (6)

    User: Request list of connected users

  7. (7)

    WebRTC server: Sending list of connected users (the list and empty at this time as this is the first connection

  8. (8)

    User: Creating connection to the other participants

  9. (9)

    WebRTC server: Connection Acceptance with other participants.

3.2.3 Update Presentation Slide Page Number

In this section we show the various interactions during the update in real time of the presentation page number (Fig. 5).

Fig. 5.
figure 5

Page number change scenario

Full size image
  1. (1)

    Moderator: Change slide in local

  2. (2)

    Moderator: Sending slide change message to WebRTC server as text by putting the current page number there

  3. (3)

    WebRTC server: Transmission message to the participant connected to the presentation

  4. (4)

    Participants: Update the current page on the slide

  5. (5)

    Moderator: Persistence of the page number on the database

  6. (6)

    Apache: Persistence ok

3.2.4 Update Annotation

In this section we show the various interactions during the update in real time annotations (Fig. 6).

Fig. 6.
figure 6

Annotation update scenario

Full size image
  1. (1)

    Moderator: Drawing Annotation

  2. (2)

    Moderator: Building text message containing the coordinates and the color of the annotation

  3. (3)

    Moderator: Send SMS containing the annotation data annotation

  4. (4)

    WebRTC server: Transmission message to the participant connected to the presentation

  5. (5)

    Participants: Reproduction of the annotation on their interfaces

  6. (6)

    Moderator: Persistence of the annotation data on the database

  7. (7)

    Serveur Apache: Persistance ok

4 Realization

4.1 Online Slide Presentation

The Fig. 7 below shows the interface of a slide presentation. On the latter, we see a teacher with an online course followed by several students. From this interface the teacher can do the following:

  • give voice to a student,

  • disable students microphones,

  • change the page of the slide,

  • add annotations,

  • change the current panel to display the whiteboard or the mathematics table real time on all screens of participants,

  • discuss to real time with participants in chat.

Fig. 7.
figure 7

Presentation slide

Full size image

4.2 Slides Presentation with Annotations

In Fig. 8, we see a teacher presenter making annotations during a presentation of slides online. These annotations are visible in real time on all participants’ screens.

Fig. 8.
figure 8

Presentation slide with annotations

Full size image

4.3 Mathematical Board

Figure 3 shows the display of mathematics board, capturing visible mathematical formulas in real time by all participants. These can also communicate with other connected video players. This allows everyone to participate, assist or guide the reasoning of the designated player to solve the problem.

With this table only the moderator can give out to a participant so that it can write mathematical formulas (Fig. 9).

Fig. 9.
figure 9

Mathematical board

Full size image

5 Conclusion

In this paper we proposed a virtual classroom solution easily integrated into training platforms. This is a very useful tool for students open distance training by giving them the ability to communicate in real time with audio, video, chat among themselves and with their teachers while remaining within the Moodle environment. The solution also allows players to open distance training, exchange large files by the flexibility of the WebRTC technology.

This platform also allows students to mathematics not to have limits for mathematics in their TP for entering mathematical formulas. Some sessions using our plugin enabled these students to be comfortable in the formulation of their online math answers. The audio recording feature of our solution enables language teachers ODL to test the level of understanding and oral restitution students.

Future work should be oriented towards the integration of TP functionality for programming languages.