holtwick / peer2school

👩🏻‍🏫 Simple P2P teaching platform starting from the 1st class

peer.school

Simple P2P teaching platform starting from the 1st class

• Website and online demo
• #WirVsWirusHack

Follow @apperdeck and @holtwick for updates.

The video conferencing part evolved further into Brie.fi/ng.

You should also consider BigBlueButton as an alternative. It has not end-to-end encryption but is probably better suited for larger groups.

---

The following is in German language due to the related German language hackathon

• Projektbeschreibung / -anmeldung
• Erste Konzeption
• Setup um mit der Entwicklung loszulegen

Anmerkung: Wenn der einfache Betrieb, die Anonymität und die Ende-zu-Ende-Verschlüsselung der Lösung nicht im Vordergrund steht, sollte auch BigBlueButton in Betracht gezogen werden. Das Projekt ist ebenfalls frei und verfolgt ansonsten ein sehr ähnliches Konzept.

peer2school's Issues

Alle Teilnehmerinnen und Teilnehmer sehen eine Liste der Schüler im Klassenzimmer

Abhängig von #29 (Namensvergabe).

Als Teilnehmerinnen und Teilnehmer (Lehrer/innen und Schüler/innen) können eine Liste mit den Namen aller anderen Teilnehmerinnen und Teilnehmer, die sich im Klassenzimmer befinden, sehen.
Bitte kommuniziert mit den Zuständigen für #19 und #18 (Melden und aufrufen).

Melden - Lehrerseite

• hervorheben von Schülern, die sich melden -> farblich hervorheben, listen umsortieren

Pupils are able to upload a picture of their work to the teacher

[ ] Pupils can take a picture of their work and send it to the teacher.
[ ] The teacher can download the file.

Dependant on issue #13

(Only) the teacher's life video is visible for everyone.

• the teachers video is visible for all pupils
• the pupils' videos are (regularly) not visible to the other pupils

Pupils can raise their hand

• pupils can "raise their hand" via a button
• pupils can cancel their raised hand
• the teacher can see all raised hands

Ein privater Videochat zwischen Schüler/in und Lehrer/in ist möglich

Lehrer/in und der oder die Schüler/in können sich sehen und hören, ohne das andere Schüler an der Kommunikation beteiligt sind oder mithören.
Dieser issue schließt weder Chat (siehe #37) noch Dokumentenaustausch (siehe #39 ) ein.

Integrate basic Whiteboard based on vue.js

• basierend auf vue.js
• gerne mit OpenSource

Design

• Existiert ein Framework?
• https://buefy.org/
• vue.js basiert
• Kinderfreundlich und simpel

Teachers can upload files to pupils in the classroom

Dependant on issue #13 !
Participants of the role "teacher" are able to broadcast files (exercises) to all participants of the role "pupil".

Growing whiteboard

The latest idea is to keep the width of the whiteboard 100% on all devices but let it grow vertically. It should scroll new content into view automatically or otherwise signal that there is new content in the hidden area. See Apple Notes pencil support as an example.

Originally posted by @holtwick in #57 (comment)

Schüler kann mit dem Smartphone teilnehmen

Als Schüler kann an mit einem halbwegs aktuellem Android- und iOS-Smartphone an dem virtuellen Unterricht teilnehmen.

Akzeptanzkriterien

• Schüler kann das Bild des Lehrer sehen
• Schüler kann das Whiteboard sehen und darauf navigieren
• Schüler kann zwischen beiden Ansichten switchen (Toogle)

SSL-Weiterleitung (https)

Es sollte im Produktivsystem (peer.school) eine Weiterleitung von http:// auf https:// eingerichtet werden.

Multilanguage

Provide the project and website in multiple languages:

• English
• German

Aufzeigen in der GUI darstellen

Aktuell gibt es nur den schlecht platzierten Aufzeigeknopf im Chat und eine interne Liste pointOuts die speichert wer aktuell alles aufzeigt. Es müsste für die GUI noch gemacht werden:

1. Den Knopf an eine schönere Stelle verschieben. Soll der Knopf nur für Schüler da sein oder auch für den Lehrer?
2. Die Liste schön grafisch darstellen. In der Liste werden die Ids gespeichert. Ein Mapping von Id zu Name existiert aber schon im Projekt. Auch hier müsste überlegt werden ob nur der Lehrer oder alle die Liste sehen können
   (3.) Wohl eher nachrangig, aber wenn der Lehrer jemanden dran nehmen soll müssten die Namen in der Liste anklickbar sein. Dafür müsste aber intern dann auch eine drannehmen-Funktion hinzugefügt werden (evtl durch @fehnkera und @T1bolus )

Bei Rückfragen zur interner Implementierung gerne an @fehnkera und @T1bolus .

Kollaboration

Hi,
ich komme aus einer Gruppe in der Herausforderung 019 bei wirvsvirus.
Wir haben euch gefunden und gemerkt, dass unsere Zielvorstellungen sich sehr ähneln, deswegen die Frage wo ihr gerade eure interne Kommunikation durchführt und wie wir am besten mit euch in Kontakt treten können.

Grüße
Sebastian

Abgleich der Teilnehmerliste für neue Teilnehmer

Derzeit wird die Liste mit den aktuellen Teilnehmernamen nicht mit neuen Teilnehmern synchronisiert. Dazu müsste wahrscheinlich nur in den "connect" ein hook geschrieben werden, der die state.peer einmal herumschickt.

Teacher can open a document on a whiteboard and share it with the class

• teaser can upload a document from the hard drive (low-hanging file formats at first; e.g. PNG, JPG, PDF)
• pupils can see the the document on the whiteboard
• it is up to dev team to choose whether documents can be added to any whiteboard or whether we should introduce different types of sharable boards (whiteboard, document board, ...)
• optional: teacher can annotate with given whiteboard tools

Lehrer kann zwischen zwei Unterrichtsmodi switchen

Als Lehrer möchte ich zwischen zwei Unterrichtsmodi (Frontalunterricht, Gruppenarbeit) switchen können.

Die Implementierung des Gruppenarbeitsmodi findet in einem separaten Issue statt. (#34)

WebRTC: Create and visit different classrooms

Currently the WebRTC/Signaling-room is hard coded: https://github.com/holtwick/peer2school/blob/master/src/lib/webrtc.js#L21

We need a way to choose multiple rooms, one per class.

URL should also reflect on a low level if the view is for teachers or pupils

Teilnehmer haben die Möglichkeit, eigene Namen zu vergeben

Bisher werden Identifier angezeigt, diese werden durch Namen ersetzt. Beim Beitreten werden Schüler nach einem Namen gefragt. Ein automatisch abgespieltes Audio "Wie heißt du?" hilft Nichtlesern. Dieser Name wird dann im Chat und beim Aufzeigen verwendet.

Whiteboard undo/redo

Aufrufen/Wortmeldung - Lehrerseite

• schüler kann aufgerufen werden (Aktivierung)
• Bild von sprechendem Schüler wird angezeigt
• Schüler kann wieder stummgeschalten werden (Deaktivierung)

Der/die Lehrer/in kann das Whiteboard für einzelne Schüler/innen freischalten

Als Lehrerin oder Lehrer möchte ich einem Schüler oder einer Schülerin die Erlaubnis geben könne, für alle sichtbar das Whiteboard zu editieren. Als Schülerin oder Schüler möchte ich, dass die Toolleiste zum editieren des Whiteboardes dann für mich sichtbar wird und ich damit darauf schreiben kann.

Allow different backgrounds for whiteboard

• Dots
• Lines
• Boxes

Probably also allow to snap to grid.

Allow switching between multiple whiteboards

introducing an additional class mode: group work

Die Schüler werden zufällig in Zweiergruppen aufgeteilt. Jede Zweiergruppe hört und sieht den jeweiligen Partner und nur den jeweiligen Partner.

Der Wechsel zwischen den Modi wird in #33 implementiert.

Activate student

If a student sends a signal to participate, the teacher should be able to activate him in order to have him communicating to all other students and the teacher.

• Activate / deactivate video and audio
• Activate / deactivate whiteboard usage

Probably some limitation makes sense like:

• Choose drawing tool
• Disable trash bin
• Allow undo
• Choose color

Der/die Lehrer/in kann private Chats oder Videochats aktivieren und deaktivieren

Private Chats (siehe #37 ) können von der Lehrerin / vom Lehrer auf einmal für alle Schüler/innen oder pro einzelnem Schüler/in aktiviert und deaktiviert werden. Private Videochats (siehe #36 ) können von der Lehrerin /vom Lehrer einzeln aktiviert werden.

Die jeweiligen Chats werden nicht unter diesem Issue, sondern unter #36 und #37 implementiert.

Setup TURN server

For those that do not get through firewalls we'll need a TURN server

Jitsi/WebRTC on Safari

jitsi/jitsi-meet#2000 (comment)

Several classes can use the application at the same time

• a teacher can create a classroom for her or his class
• pupils can enter their specific classroom (eventually per URL)
• several teachers can create and use a classroom at the same time

Face Recognition

Check if student is sits in front of the computer ;)

Fix video on iOS

This is due to a limitation in Jitsi

Video SFU / Conferencing

While developing the video chat solution in peer.school it turned out that multi-peer streaming is not practicable for a large number of participants due to bandwidth and performance (see #63). An SFU (Selective Forwarding Unit) was required that would receive participants video and audio streams and forward those the the participants, reducing the numbers of connections a client has to handle.

The current implementation uses Jitsi for this purpose: https://github.com/jitsi/lib-jitsi-meet

Other solutions might also be worth considering, like mediasoup:

• https://mediasoup.org
• https://github.com/versatica/mediasoup
• https://github.com/mkhahani/mediasoup-sample-app

This should also fix related issues like #65 #34

Show list of online students

• Show name
• Show signaling #21
• Select student for video and audio participation
• Select student for whiteboard participation

First Launch Experience - FLE

Make sure the users understand the UI. Either display an annotated screenshot or have a guided tour via popovers. Example illustrations:

Gestaltung der GUI für die frontalunterricht-basics.

Als Schüler möchte ich alle für mich wichtigen Elemente übersichtlich dargestellt bekommen:

• das Whiteboard (#7 )
• das Video des Lehrers (#28 und #20 )
• mein eigenes Bild
• eventuell das Bild eines aufgerufenen Schülers (Kommunikation mit den Assignees von #19 )
• eine Namensliste aller Teilnehmer (#30 )
• den Chat.
  Als Lehrer möchte ich alle für mich wichtigen Elemente übersichtlich dargestellt bekommen:

Probleme momentan sind:

• Bei vielen Teilnehmern wird der Chat "aus dem Bild gedrängt".
• Der Pull-Request zur Anzeige der Videos #35 ist wegen Merge-Konflikten nicht abgeschlossen.

The teacher can communicate privately with a single pupil.

• the teacher can address a single student
• video chat (synchronous communication)
• the student can sent private messages to the teacher (only asynchronous communication)
• documents, maybe audio messages, text messages (asynchronous communication)

Ein privater Chat zwischen Schüler/in und Lehrer/in ist möglich

Lehrer/in und der oder die Schüler/in können sich Nachrichten senden, ohne das andere Schüler an der Kommunikation beteiligt sind oder mitlesen.
Dieser Issue schließt weder Videochat (siehe #36) noch Dokumentenaustausch (siehe #39 ) ein.

Whiteboard aspect ratio

Make sure the whiteboard fully displays on all devices. The idea is to decide to have a certain aspect ratio like 4:3 or 16:9 and than scale up or down to show most of the content on all devices.

• Decision for aspect ratio
• Different layouts on portrait and landscape
• Other layout optimizations for different devices and environments

Introduce teacher GUI

So far there is only one way to connect to a classroom. We need two different roles, teacher and pupil. This issue does not contain implementing teacher functionality, but providing the infrastructure for two different GUIs with different functions available and different views of the classroom.

A teacher can ask a student to edit the whiteboard

Dependant on #7 (Whiteboard).
Should communicate with #19 (Calling pupils).

The teacher can give one or more pupils the permission to edit the blackboard. He or she can also take the permission back.

Video Streams, Anzeige Schüler & Lehrer

• Die Schüler sollen nur den Lehrer sehen
• Der Lehrer soll eine Liste mit allen Schülern sehen
• Der aktuelle Platz des Chats soll dafür verwendet werden

Rückkopplung beseitigen: Teilnehmer bekommen nicht ihr eigenes Audio abgespielt.

Als Teilnehmer möchte ich mein eigenes Video sehen, allerdings nicht mein eigenes Audio hören.

Teachers can call a student

• the teacher can call a student (independent of raised hands)
• the called student is visible and audible for all other students
• the teacher can finish the calling situation

Scalability & Performance

Currently peer.school is implemented as a "full mesh network" i.e. each client is connected with each other. So even if only the teacher is streaming she has to send the same stream to as many peers as there are students online. The same for the student, if he is active.

There are multiple solutions to the issue:

1. Keep it that way and assume the teacher has enough bandwidth (unlikely)
2. Use a central server that distributes the video signal to the clients like https://jitsi.org/ (not end-to-end encrypted!)
3. Have each peer to proxy to a certain number of other peers (consumes bandwidth on student's side)

So all solutions have trade-offs. Here some links about the topic:

• Stackoverflow
• Jitsi not e2e
• Peers proxy demo implementation
• https://bloggeek.me/webrtc-rtcpeerconnection-one-per-stream/

Melden - Schülerseite

• button -> verändert sich wenn man sich meldet

Avoid phantom text selection on iPad

Sometimes shows up when drawing with the Apple Pencil

Das Whiteboard kann nur durch die Lehrkraft bearbeitet werden.

Als Lehrkraft möchte ich, dass normalerweise nur ich auf dem Whiteboard schreiben kann.
Zusammenhang mit Issue #26

Aufrufen/Wortmeldung - Schülerseite

• Bild von aufgerufenen Schüler wird angezeigt (unter/neben Lehrer)
• Schüler der aufgerufen wurde bekommt einen Hinweis, dass er sprechen darf