You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
2.8 KiB
64 lines
2.8 KiB
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 videoContainer = document.getElementById('video-container');
|
|
// const imgElement = document.createElement('img');
|
|
// imgElement.id = `${element_id}`;
|
|
// videoContainer.appendChild(imgElement);
|
|
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();
|
|
}
|