var pc_list = {};
var channel_list = null;

document.addEventListener('DOMContentLoaded', async function() {
    console.log('DOM fully loaded and parsed');
    // 发送请求获取额外数据
    try {
            let response = await fetch('/api/channel/list');
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            channel_list = await response.json();
            // 遍历输出每个元素的信息
            channel_list.forEach(channel => {
                if(channel.element_id){   //""空为false，非空为true
                   console.log(`Area Name: ${channel.area_name}`);
                   console.log(`ID: ${channel.ID}`);
                   console.log(`Channel Name: ${channel.channel_name}`);
                   console.log(`URL: ${channel.url}`);
                   console.log(`Type: ${channel.type}`);
                   console.log(`Status: ${channel.status}`);
                   console.log(`Element ID: ${channel.element_id}`);
                   connectToStream(channel.element_id,channel.ID,channel.area_name,channel.channel_name)
                }
            });
        } catch (error) {
            console.error('Failed to fetch data:', error);
        }
      });

function connectToStream(element_id,channel_id,area_name,channel_name) {
            const imgElement = document.getElementById(element_id);
            imgElement.alt = `Stream ${area_name}--${channel_name}`;
            const streamUrl = `ws://${window.location.host}/api/ws/video_feed/${channel_id}`;
            console.log(streamUrl);
            function connect() {
                const socket = new WebSocket(streamUrl);

                socket.onmessage = function(event) {
                    //const blob = new Blob([event.data], { type: 'image/jpeg' });
                    //imgElement.src = URL.createObjectURL(blob);
                    // 释放旧的对象URL
                    if (imgElement.src) {
                        URL.revokeObjectURL(imgElement.src);
                    }
                    imgElement.src = URL.createObjectURL(event.data);
                };

                socket.onclose = function() {
                    setTimeout(connect, 1000);  // 尝试在1秒后重新连接
                };

                socket.onerror = function() {
                    console.log(`WebSocket错误，尝试重新连接... Channel ID: ${channel_id}`);
                    socket.close();
                };
            }

            connect();
        }