zfbox/web/main/static/resources/scripts/aiortc-client-new.js

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}`);
                    start(channel.element_id,channel.ID,0)
                }
            });
        } catch (error) {
            console.error('Failed to fetch data:', error);
        }
      });

function negotiate(pc,channel_id,itype,element_id) {
    pc.addTransceiver('video', { direction: 'recvonly' });
    return pc.createOffer().then((offer) => {
        return pc.setLocalDescription(offer);
    }).then(() => {
        // wait for ICE gathering to complete
        return new Promise((resolve) => {
            if (pc.iceGatheringState === 'complete') {
                resolve();
            } else {
                const checkState = () => {
                    if (pc.iceGatheringState === 'complete') {
                        pc.removeEventListener('icegatheringstatechange', checkState);
                        resolve();
                    }
                };
                pc.addEventListener('icegatheringstatechange', checkState);
            }
        });
    }).then(() => {
        var offer = pc.localDescription;
        return fetch('/api/offer', {
            body: JSON.stringify({
                sdp: offer.sdp,
                type: offer.type,
                cid: channel_id,
                mytype: itype,
                element_id:element_id
            }),
            headers: {
                'Content-Type': 'application/json'
            },
            method: 'POST'
        });
    }).then((response) => {
        return response.json();
    }).then((answer) => {
        return pc.setRemoteDescription(answer);
    }).catch((e) => {
        alert(e);
    });
}

function start(element_id,channel_id,itype) {// iytpe =0,不用修改数据库，1，需要添加数据库记录
    console.log(`Element ID: ${element_id}`);
    console.log(`Channel ID: ${channel_id}`);
    pc = new RTCPeerConnection();
    pc_list[channel_id] = pc;   //保留pc
    pc.addEventListener('track', (evt) => {
        if (evt.track.kind == 'video') {
            //document.getElementById('video').srcObject = evt.streams[0];
            document.getElementById(element_id).srcObject = evt.streams[0];
        }
    });
    negotiate(pc,channel_id,itype,element_id);
}

function showView(){
    channel_list.forEach(channel => {
        if(channel.element_id){   //""空为false，非空为true
            console.log('status:',document.getElementById(channel.element_id).paused)
            if (document.getElementById(channel.element_id).paused) {
                document.getElementById(channel.element_id).play().catch(error => {
                    console.error('Error playing video:', error);
                });
            }
        }
    });
}

async function closestream(channel_id){
    let response = await fetch('/close_stream', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ channel_id: channel_id })
    });
    let data = await response.json();
            console.log(data);
    if(pc_list[channel_id]){
        pc_list[channel_id].close();
        delete pc_list[channel_id];
    }
}