Skip to content

Commit

Permalink
Merge pull request #185 from mantzaris/wayland-compatibility
Browse files Browse the repository at this point in the history 
Wayland compatibility
  • Loading branch information
@mantzaris
mantzaris authored Jun 1, 2024
2 parents 2cf45d2 + 1993f04 commit 18525ad
Show file tree
Hide file tree
Showing 6 changed files with 371 additions and 4,481 deletions.
101 changes: 71 additions & 30 deletions AppCode/taga-JS/stream-search/stream-search.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@ const selection_mode = {
memes: false,
};

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

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

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

//runs on page/window load
ipcRenderer.invoke('getCaptureID').then((sources) => {
selection_sources = document.getElementById('source-type');
const src = document.createElement('option');
src.setAttribute('default', 'webcam');
src.innerHTML = 'Webcam';
src.value = 'webcam';
selection_sources.appendChild(src);

for (const source of sources) {
const src = document.createElement('option');
src.innerHTML = source.name;
src.value = source.id;
selection_sources.appendChild(src);
}
(async () => {
try {
let sources = []; //declare sources globally in this fn

// 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';

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

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 = `webcam_${device.deviceId}`; //value contains 'webcam' to pick up in GetMediaStream function
selection_sources.appendChild(src);
});
}

// For Wayland, add a 'Screen or Window' option
if (is_wayland) {
const src = document.createElement('option');
src.innerHTML = 'Screen or Window';
src.value = 'screen_or_window';
selection_sources.appendChild(src);
} else {
// For non-Wayland, get screen/window sources immediately
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);
}
}
}

start_btn.classList.remove('disabled');
});
if (videoDevices?.length > 0 || is_wayland || (sources && sources.length > 0)) {
document.getElementById('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 @@ -213,8 +257,6 @@ start_btn.onclick = async () => {
if (!streaming) {
SetUpVideo();
streaming = true;

//await PullTaggingClusters();
await MainLoop();
}
},
Expand All @@ -226,10 +268,10 @@ start_btn.onclick = async () => {
};

async function GetMediaStream(source) {
const video_setup =
'webcam' == source
? true
: {
const video_setup = source.startsWith('webcam')
? { video: { deviceId: { exact: source.replace('webcam_', '') } } } //remove prefix for deviceId
: {
video: {
mandatory: {
width: { ideal: 1280 },
height: { ideal: 720 },
Expand All @@ -241,12 +283,11 @@ async function GetMediaStream(source) {
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() {
Expand Down
51 changes: 38 additions & 13 deletions AppCode/taga-JS/super-search/super-search.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ document.getElementById('return-to-main-button-id').onclick = function () {
};

//using the WEBCAM
document.getElementById('use-webcam-button-id').onclick = function () {
document.getElementById('use-webcam-button-id').onclick = async function () {
let modal_meme_click_top_id_element = document.getElementById('modal-meme-clicked-top-id');
modal_meme_click_top_id_element.style.display = 'block';
document.getElementById('webcam-video-id').style.display = 'block';
Expand Down Expand Up @@ -167,24 +167,47 @@ document.getElementById('use-webcam-button-id').onclick = function () {

let width;
let height;

let data;
let stream;

let streaming = false;
let captured = false;

// navigator.mediaDevices
// .getUserMedia({ video: true, audio: false })
// .then(function (s) {
// stream = s;
// video.srcObject = stream;
// video.play();
// })
// .catch(function (err) {
// console.log('An error occurred: ' + err);
// alert('Could not access the webcam. Please check if it is connected and try again.');
// Close_Modal();
// });

navigator.mediaDevices
.getUserMedia({ video: true, audio: false })
.then(function (s) {
stream = s;
video.srcObject = stream;
video.play();
})
.catch(function (err) {
console.log('An error occurred: ' + err);
});
.enumerateDevices()
.then(devices => {
const videoDevices = devices.filter(device => device.kind === 'videoinput');
if (videoDevices.length === 0) {
throw new Error('No webcams found.');
}

let streaming;
const firstWebcamId = videoDevices[0].deviceId;
return navigator.mediaDevices.getUserMedia({ video: { deviceId: { exact: firstWebcamId } }, audio: false });
})
.then(function (s) {
stream = s;
video.srcObject = stream;
video.play();
})
.catch(function (err) {
console.log('An error occurred: ' + err);
alert('Could not access the webcam. Please check if it is connected and try again.');
Close_Modal();
});


video.addEventListener(
'canplay',
function (ev) {
Expand Down Expand Up @@ -221,6 +244,7 @@ document.getElementById('use-webcam-button-id').onclick = function () {
data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
}

function Take_Picture(ev) {
ev.preventDefault();
const context = canvas.getContext('2d');
Expand Down Expand Up @@ -256,6 +280,7 @@ document.getElementById('use-webcam-button-id').onclick = function () {
track.stop();
});
}

streaming = false;
captured = false;
select_capture_button.style.display = 'none';
Expand Down
65 changes: 55 additions & 10 deletions AppCode/taga-JS/tagging/tagging-controller-main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -873,13 +873,24 @@ document.getElementById('load-webcam-input-button-id').onclick = async function
let height;
let data;
let recording = false;
let stream = await capture_media_devices();
let stream; //stream = await capture_media_devices();
let recorder = null;
let canceled = false;
let streaming;

video.srcObject = stream;
video.play();
try {
stream = await capture_media_devices();
video.srcObject = stream;
video.play();
} catch (error) {
console.warn('Handled error accessing webcam:', error.message);
alert('Could not access the webcam. Please check if it is connected and try again.');
outer_modal.style.display = 'none';
return; // Exit if webcam fails
}

//video.srcObject = stream;
//video.play();
canvas.style.display = 'none';
record_video_btn.onclick = record_video;
stop_video_btn.onclick = stop_recording_video;
Expand Down Expand Up @@ -937,16 +948,50 @@ document.getElementById('load-webcam-input-button-id').onclick = async function
canceled = true;
recording = false;
recorder.stream.getTracks().forEach((track) => track.stop());
stream = await capture_media_devices();
video.srcObject = stream;
video.play();

//stream = await capture_media_devices();
//video.srcObject = stream;
//video.play();
try {
stream = await capture_media_devices();
video.srcObject = stream;
video.play();
} catch (error) {
console.error('Error accessing webcam:', error);
alert('Could not access the webcam. Please check if it is connected and try again.');
outer_modal.style.display = 'none';
}
};

async function capture_media_devices() {
return await navigator.mediaDevices.getUserMedia({
video: true,
audio: true,
});
// return await navigator.mediaDevices.getUserMedia({
// video: true,
// audio: true,
// });
// try {
// return await navigator.mediaDevices.getUserMedia({
// video: true,
// audio: true,
// });
// } catch (error) {
// throw new Error('Could not access media devices.');
// }
try {
const devices = await navigator.mediaDevices.enumerateDevices();
const videoDevices = devices.filter((device) => device.kind === 'videoinput');

if (videoDevices.length === 0) {
throw new Error('No webcams found.');
}

const firstWebcamId = videoDevices[0].deviceId;
return await navigator.mediaDevices.getUserMedia({
video: { deviceId: { exact: firstWebcamId } },
audio: true,
});
} catch (error) {
throw new Error('Could not access media devices: ' + error.message);
}
}

function clearphoto() {
Expand Down
Loading

0 comments on commit 18525ad

Please sign in to comment.