client_videostreaming.js

document.addEventListener('DOMContentLoaded', function() {
    const img = document.getElementById('streamVideo');
    const statusElem = document.getElementById('status');

    // サーバーのWebSocketエンドポイントに接続
    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
    const wsUrl = `${protocol}//${window.location.host}/video`;

    const ws = new WebSocket(wsUrl);

    ws.onopen = function() {
        statusElem.textContent = '接続完了 - 映像受信中';
    };

    ws.onmessage = function(message) {
        // バイナリデータをBlobに変換
        const blob = new Blob([message.data], { type: 'image/jpeg' });

        // BlobからURLを作成し、img要素にセット
        const url = URL.createObjectURL(blob);
        img.src = url;

        // メモリリークを防ぐために、古いURLを解放
        img.onload = function() {
            URL.revokeObjectURL(url);
        };
    };

    ws.onclose = function() {
        statusElem.textContent = '接続が閉じられました';
    };

    ws.onerror = function(error) {
        statusElem.textContent = 'エラーが発生しました: ' + error.message;
        console.error('WebSocket error:', error);
    };
});