こんにちは！

弊社では毎月、部署の定例会をオンラインで行なってます。
一箇所に集まらなくても開催できるので非常にいいのですが、オンラインにおけるコミュニケーションは、今後も課題があると感じてます。

今回は、オンラインの定例会における要望の一つ、コメントを流せるオンライン会議システムを作ってみます。

なぜコメント機能が必要なのか

色々と試した結果、コメントが流れる方が盛り上がるからです。
身内での会議限定となりますが、匿名で様々なコメントが流れると、場が和み、より発言しやすくなります。
Google MeetやZoomでもリアクション機能やチャット機能はありますが、チャットだと気付きにくいこともあり、画面上で流れた方が分かりやすいです。

また、一時期cometsというサービスを利用していたのですが、Googleのセキュリティ強化により利用しづらくなった、という背景もあります。

やりたいこと

オンライン会議
コメントを送ったら画面上で流れる

環境構築

Pythonの仮想環境を作ります。

python -m venv online-meeting
cd online-meeting

ディレクトリに移動した直後の状態

$ ls
bin/		include/	lib/		pyvenv.cfg

仮想環境の有効化

source bin/activate

次に、必要なライブラリのインストールをします。

pip install flask
pip install qrcode[pil]
pip install flask-socketio

Flask-SocketIOとは

クライアントとサーバー間の双方向通信を実現し、低レイテンシでのアクセスが可能になるライブラリです。

ディレクトリ構成

最終的なディレクトリ構成です。

online-meeting/
├─ app.py
├─ pyvenv.cfg
├─ bin/
├─ include/
├─ lib/
├─ share/
└─ templates/
   ├─ index.html
   └─ meeting.html

コード

今回実装した３ファイルを以下に示します。
QRコードは未完成のため、一旦コメントアウトしてます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>オンライン会議システム</title>
</head>
<body>
    <h1>オンライン会議システムへようこそ</h1>

    <button id="create-meeting">新しい会議を作成</button>

    <h2>会議に参加する</h2>
    <form action="/join_meeting" method="post">
        <label for="meeting-id">会議ID：</label>
        <input type="text" id="meeting-id" name="meeting_id" required>
        <button type="submit">参加</button>
    </form>

    <script>
        document.getElementById('create-meeting').addEventListener('click', function() {
            fetch('/create_meeting', { method: 'POST' })
                .then(response => response.json())
                .then(data => {
                    if (data.meeting_id) {
                        window.location.href = '/meeting/' + data.meeting_id;
                    }
                })
                .catch(error => console.error('Error:', error));
        });
    </script>
</body>
</html>

meeting.html

<!-- meeting.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>オンライン会議</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.0/socket.io.js"></script>
    <style>
        #video-container {
            position: relative;
            width: 640px;
            height: 360px;
            overflow: hidden;
        }

        #video-container video {
            width: 100%;
            height: auto;
        }
    
        #comments-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            color: white;
            background: rgba(0, 0, 0, 0.5);
        }
    
        .scroll-comment {
            position: relative;
            white-space: nowrap;
            animation: scroll 10s linear infinite;
        }
    
        @keyframes scroll {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }
    </style>
</head>
<body>
    <h1>オンライン会議</h1>
    <p>会議ID: {{ meeting_id }}</p>
    <div id="video-container" style="position: relative;">
        <div id="comments-overlay"></div>
        <video id="localVideo" autoplay muted></video>
        <video id="remoteVideo" autoplay></video>
    </div>
    
    <!-- <h2>QRコード</h2>
    <img src="data:image/png;base64,{{ qr_img_data }}" alt="QR Code"> -->

    <h2>コメント</h2>
    <form id="comment-form">
        <input type="text" id="comment" name="comment" placeholder="コメントを入力" required>
        <button type="submit">送信</button>
    </form>

    <script>
        // ビデオ要素を取得
        var localVideo = document.getElementById('localVideo');
        var remoteVideo = document.getElementById('remoteVideo');

        var localStream;
        var peerConnection;
        var config = {
            'iceServers': [{'urls': 'stun:stun.l.google.com:19302'}]
        };

        // ユーザーのメディアを取得して、ビデオ要素に設定
        navigator.mediaDevices.getUserMedia({video: true, audio: true})
            .then(function(stream) {
                localVideo.srcObject = stream;
                localStream = stream;
                initializePeerConnection();
            }).catch(function(error) {
                console.log('メディアの取得に失敗しました:', error);
            });

        // WebRTCの接続を初期化
        function initializePeerConnection() {
            peerConnection = new RTCPeerConnection(config);
            localStream.getTracks().forEach(track => {
                peerConnection.addTrack(track, localStream);
            });
            peerConnection.ontrack = function(event) {
                remoteVideo.srcObject = event.streams[0];
            };
        }

        // WebSocketを使ったシグナリング
        var socket = io();

        socket.on('new_comment', function(data) {
            if (data.meeting_id === "{{ meeting_id }}") {
                loadComments([data.comment]);
            }
        });

        // 通信を開始するための処理（offer/answer/candidate）
        socket.on('offer', function(offer) {
            peerConnection.setRemoteDescription(new RTCSessionDescription(offer));
        });
        socket.on('answer', function(answer) {
            peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
        });
        socket.on('candidate', function(candidate) {
            peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
        });

        // 通信のオファーを作成
        function createOffer() {
            peerConnection.createOffer()
                .then(function(offer) {
                    return peerConnection.setLocalDescription(offer);
                })
                .then(function() {
                    // オファーをサーバーに送信
                    socket.emit('offer', peerConnection.localDescription);
                });
        }

        var localVideo = document.getElementById('localVideo');

        navigator.mediaDevices.getUserMedia({ video: true, audio: true })
            .then(function(stream) {
                localVideo.srcObject = stream;
            })
            .catch(function(error) {
                console.log('メディアの取得に失敗しました: ', error);
            });

        // コメントの送信フォームのイベントリスナー
        document.getElementById('comment-form').addEventListener('submit', function(event) {
            event.preventDefault();
            var comment = document.getElementById('comment').value;

            fetch('/comment', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'meeting_id={{ meeting_id }}&comment=' + encodeURIComponent(comment)
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    document.getElementById('comment').value = '';
                }
            })
            .catch(error => console.error('Error:', error));
        });

        function loadComments(newComments) {
            var commentsOverlay = document.getElementById('comments-overlay');

            // 新しいコメントを追加
            newComments.forEach(function(comment, index) {
                var p = document.createElement('p');
                p.textContent = comment;
                p.classList.add('scroll-comment');
                p.style.top = ((commentsOverlay.children.length + index) * 20) % 200 + 'px';
                setTimeout(function() {
                    p.remove();
                }, 5000);
                commentsOverlay.appendChild(p);
            });
        }

        // 初回のコメント読み込み
        fetch('/get_comments/{{ meeting_id }}')
            .then(response => response.json())
            .then(comments => {
                loadComments(comments);
            })
            .catch(error => console.error('Error:', error));

            loadComments();
        </script>
    </body>
</html>

app.py

# app.py
from flask import Flask, render_template, request, jsonify
from flask_socketio import SocketIO, send
import uuid
import qrcode
import io
import base64

app = Flask(__name__)
socketio = SocketIO(app, cors_allowed_origins="*")

# 会議データを保持する簡易データベース
meetings = {}

# トップページ
@app.route('/')
def index():
    return render_template('index.html')

# 新しい会議の作成
@app.route('/create_meeting', methods=['POST'])
def create_meeting():
    meeting_id = str(uuid.uuid4())
    meeting_url = request.host_url + 'meeting/' + meeting_id
    meetings[meeting_id] = {'url': meeting_url, 'comments': []}
    return jsonify({'meeting_id': meeting_id, 'meeting_url': meeting_url})

# 会議への参加
@app.route('/meeting/<meeting_id>')
def meeting(meeting_id):
    if meeting_id not in meetings:
        return "Meeting not found", 404

    # 会議URLのQRコード生成
    qr = qrcode.QRCode(
        version=1,
        error_correction=qrcode.constants.ERROR_CORRECT_L,
        box_size=10,
        border=4,
    )
    qr.add_data(meetings[meeting_id]['url'])
    qr.make(fit=True)

    img = qr.make_image(fill_color="black", back_color="white")
    byte_io = io.BytesIO()
    img.save(byte_io, 'PNG')
    byte_io.seek(0)
    qr_img_data = base64.b64encode(byte_io.read()).decode('utf-8')  # Base64エンコード

    return render_template('meeting.html', meeting_id=meeting_id, qr_img_data=qr_img_data)

# コメントの送信
@app.route('/comment', methods=['POST'])
def post_comment():
    meeting_id = request.form['meeting_id']
    comment = request.form['comment']
    if meeting_id in meetings:
        meetings[meeting_id]['comments'].append(comment)
        socketio.emit('new_comment', {'meeting_id': meeting_id, 'comment': comment})
        return jsonify({'status': 'success'})
    return jsonify({'status': 'failed'})

# コメントの取得
@app.route('/get_comments/<meeting_id>')
def get_comments(meeting_id):
    if meeting_id in meetings:
        return jsonify(meetings[meeting_id]['comments'])
    return jsonify([])

# WebSocketイベントハンドラー
@socketio.on('message')
def handle_message(message):
    send(message, broadcast=True)

if __name__ == '__main__':
    app.run(host = '0.0.0.0',debug=True)

実行結果

それでは、実行してみましょう。

$ python app.py 
 * Serving Flask app 'app'
 * Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on all addresses (0.0.0.0)
 * Running on http://127.0.0.1:5000
 * Running on http://192.168.1.6:5000

127.0.0.1:5000 にアクセスしてみます。

トップページが表示されました。
次に、新しい会議を作成してみましょう。

カメラが起動して、画面に自分が映りました。
コメントを流してみましょう。

ちゃんと流れてますね！
さらに他のブラウザでもアクセスして、双方向からコメントを流してみましょう。

ChromeとEdgeからコメントを流してみたところ、ちゃんと確認できました！
基本的な部分はクリアできたようです。

今後の改修方針

まだまだ未完成なので、以下を可能なものから少しずつ対応していく予定です。（思いつき含む）
・参加メンバーの枠を表示する
・スマホでも動作するように改修
・リアクション機能
・画面共有機能
・Google認証（組織内だけ通す）
・セキュリティ強化（脆弱性対応など）
・AIの組み込み（文字起こし、翻訳、要約、タスク管理、その他）
・タイムキーパー機能
・ルーレット機能（強制的に意見を求める）
・多数決機能
・表彰機能（派手なやつ）
・逆投げ銭機能（臨時ボーナス的なやつ）
・NFT機能（参加、発表などの記録）
・バーチャル会議室機能（VR/AR）

まとめ

今回はFlaskでオンライン会議システムを作ってみました。
やりたいことを挙げたらきりがないですが、オンラインの課題を解決できるような、楽しいシステムになるといいな、と思います。

一瞬、Qiitaでもコメントが流れたら、コメントする人が増えて面白いかな、と思いましたが、良し悪しもあると思うので、もう少し考えてみます。

モノづくりって楽しいですね