家庭教師がオンライン授業のためのホワイトボード共有サイトを作ってみた

前提

コロナ禍の状況で、zoomを使ってオンライン授業をしていたが、使いにくかったので、自分で作ることにしました。
ボードミート

技術

バックエンド
-- 言語

• Python3

-- フレームワーク

• Django 3.0.6

フロントエンド
-- 言語

• CSS
• Javascript
• HTML

-- フレームワーク

• jquery
• materiallize.css

インフラ

• AWS EC2
• AWS S3 storage
• AWS Route53

アーキテクチャー

工夫した点

• webRTCを使ってシグナリングをする際に、複数人でシグナリングをすると、どの人にシグナルを送信しているかわからなくなるので、シグナリングデータにfrom, toを用いて、誰が誰にシグナルを送っているかを明確にした。

myboard.html

window.onbeforeunload = function (event) {
                videoRoomSocket.send(JSON.stringify({
                    "type": "bye",
                    "from": user_name,
                    "to": "all"
                }));
            }

if (data.message == "join") {
                 console.log("join?");
                 if (data.user_name !== user_name) {
                    console.log("join!");
                     videoRoomSocket.send(JSON.stringify({
                         "type": "hello",
                         "to": data.user_name,
                         "from": user_name
                     }));
                     return;
                 }
                 return
             }

• whiteボードのデータを相手にリアルタイムで送信する際に、websocketかwebRTCのデータチャネルで送信するかを決める際に、webRTCのデータチャネルの送信スピードが、websocketよりも5倍ほど速かったので、webRTCのデータチャネルを採用した。

使い方

• 左上のボタンはボードに記述するためのボタン、左下はリロード、退出、ヘルプ（未実装）ボタン、右下は画像貼り付けや全削除、記述したコンテンツを1つ前に戻すボタン、右上はボードをzoomしたり、動かしたりするボタンです。

• ユーザー登録をすると、自分のホワイトボードを使うことができ、他のユーザーと相互フォロー状態になると、他のユーザーのボードも編集できるようになります。

• 全て無料で使うことができますので、ぜひ一度使ってみてほしいです。できれば、アイデアや、感想などがあればコメントや、[e-mail]のメールアドレスに送信していただくと非常にうれしいです！

これから実装するもの

• 使い方説明
• 文字のサイズ、色などを変更する機能
• ボードの画像情報をダウンロードすること
• electronでデスクトップアプリケーション化すること
• お問い合わせページの実装
• test codeの記述

コード

GitHub: esakiryota/my-second-blog