Skip to content

Commit

Permalink
now the wayland or x11 logic for stream search is integrated. it take…
Browse files Browse the repository at this point in the history 
…s into account that wayland will prompt the user with a window for which screen or window is desired and than take that as the stream source rather than populate it all at the start as was done in x11 or windows. it also now handles multiple webcams allowing the user to choose between the different webcams. not tested on x11 yet. on wayland the screen or window selection option is provided for the user.
  • Loading branch information
@mantzaris
mantzaris committed May 30, 2024
1 parent 2af9358 commit f915a2e
Showing 1 changed file with 65 additions and 46 deletions.
111 changes: 65 additions & 46 deletions AppCode/taga-JS/stream-search/stream-search.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 14,7 @@ const selection_mode = {

let is_wayland = undefined;

let kind = 'webcam'; //default video source
//let kind = 'webcam'; //default video source

let video_el = document.getElementById('inputVideo');
let canvas_el = document.getElementById('canvas-stream');
Expand Down Expand Up @@ -178,50 178,69 @@ canvas_el.onclick = async (event) => {
};

//runs on page/window load
ipcRenderer.invoke('getCaptureID').then(async (sources) => {
//get the wayland state
(async () => {
try {
// Get the Wayland state
const isWindows = await ipcRenderer.invoke('is-windows');
const linuxDisplayType = await ipcRenderer.invoke('get-linux-display-type');
is_wayland = (!isWindows && linuxDisplayType === 'wayland');
} catch (e) {
console.log(`cannot get wayland state of OS, ${e}`);
}

// Check for webcam availability
const devices = await navigator.mediaDevices.enumerateDevices();
const videoDevices = devices.filter(device => device.kind === 'videoinput');
// Check for webcam availability
const devices = await navigator.mediaDevices.enumerateDevices();
const videoDevices = devices.filter(device => device.kind === 'videoinput');

selection_sources = document.getElementById('source-type');
selection_sources = document.getElementById('source-type');

if (videoDevices?.length > 0) {
videoDevices.forEach((device, index) => {
const src = document.createElement('option');
src.innerHTML = device.label || `Webcam ${index 1}`;
src.value = device.deviceId || `webcam_${index}`;
selection_sources.appendChild(src);
});
}
if (videoDevices?.length > 0) {
videoDevices.forEach((device, index) => {
const src = document.createElement('option');
src.innerHTML = device.label || `Webcam ${index 1}`;
src.value = `webcam_${device.deviceId}`; //value contains 'webcam' to pick up in GetMediaStream function
selection_sources.appendChild(src);
});
}

if (sources && sources.length > 0) {
for (const source of sources) {
// For Wayland, add a 'Screen or Window' option
if (is_wayland) {
const src = document.createElement('option');
src.innerHTML = source.name;
src.value = source.id;
src.innerHTML = 'Screen or Window';
src.value = 'screen_or_window';
selection_sources.appendChild(src);
} else {
// For non-Wayland, get screen/window sources immediately
const sources = await ipcRenderer.invoke('getCaptureID');
if (sources && sources.length > 0) {
for (const source of sources) {
const src = document.createElement('option');
src.innerHTML = source.name;
src.value = source.id;
selection_sources.appendChild(src);
}
}
}

if (videoDevices?.length > 0 || is_wayland || sources?.length > 0) {
start_btn.classList.remove('disabled');
}
}

if (sources?.length > 0 || videoDevices?.length > 0) {
start_btn.classList.remove('disabled');
} catch (e) {
console.log(`Error during initialization: ${e}`);
}
});
})();

start_btn.onclick = async () => {
try {
kind = selection_sources.value;
const kind = selection_sources.value;

if (is_wayland && kind === 'screen_or_window') {
// For Wayland, prompt the user for screen/window selection
const sources = await ipcRenderer.invoke('getCaptureID');
const userSelectedSource = sources[0]; // Handle user selection here
media_source = await GetMediaStream(userSelectedSource.id);
} else {
media_source = await GetMediaStream(kind);
}

media_source = await GetMediaStream(kind);
video_el.srcObject = media_source;
video_el.play();
video_el.style.display = 'none';
Expand All @@ -236,8 255,6 @@ start_btn.onclick = async () => {
if (!streaming) {
SetUpVideo();
streaming = true;

//await PullTaggingClusters();
await MainLoop();
}
},
Expand All @@ -248,30 265,32 @@ start_btn.onclick = async () => {
}
};


async function GetMediaStream(source) {
const video_setup =
'webcam' == source
? true
source.startsWith('webcam')
? { video: { deviceId: { exact: source.replace('webcam_', '') } } } //remove prefix for deviceId
: {
mandatory: {
width: { ideal: 1280 },
height: { ideal: 720 },
frameRate: { ideal: 16, max: 24 },
chromeMediaSource: 'desktop',
chromeMediaSourceId: source,
minWidth: 1280,
maxWidth: 1280,
minHeight: 720,
maxHeight: 720,
video: {
mandatory: {
width: { ideal: 1280 },
height: { ideal: 720 },
frameRate: { ideal: 16, max: 24 },
chromeMediaSource: 'desktop',
chromeMediaSourceId: source,
minWidth: 1280,
maxWidth: 1280,
minHeight: 720,
maxHeight: 720,
},
},
audio: false,
};

return await navigator.mediaDevices.getUserMedia({
video: video_setup,
audio: false,
});
return await navigator.mediaDevices.getUserMedia(video_setup);
}


function SetUpVideo() {
height = video_el.videoHeight;
width = video_el.videoWidth;
Expand Down

0 comments on commit f915a2e

Please sign in to comment.