Unable to run lightning on QT5 browser

[MikePask]

I have been trying to compile a version of lightning that will run on QT5. The issue I currently have is ImageData() is not a constructor. ImageData constructor is not available on this browser, QT5 is similar to safari 7. ImageData constructor appears to be available from Safari 8.

[erikhaandrikman]

Are you using the canvas2d renderer? And is this line causing the error?

Lightning/src/renderer/c2d/C2dRenderer.mjs

Line 98 in 2e4c829

const imageData = new ImageData(new Uint8ClampedArray(options.source.buffer), options.w, options.h);

[MikePask]

Yes I am and that is the line.

[erikhaandrikman]

https://developer.mozilla.org/en-US/docs/Web/API/ImageData/ImageData is available since Safari 8 but we can try to fallback to createImageData() method, that is available since Safari 4: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createImageData

I've added a quick implementation for you to test: https://github.com/rdkcentral/Lightning/compare/feat/c2d-imagedata-fallback if this works we can do a proper implementation

[MikeKav]

Hi @erikhaandrikman

Whilst we didn't get the implementation you suggested working at the time, I've since revisited this with some AI prompting. We have got a simple lightning page up and running now on this older device by adding this code in the polyfills that are imported at the start of the app before importing the lightning libraries, the code is similar to the intent of the example implementation you provided at https://github.com/rdkcentral/Lightning/compare/feat/c2d-imagedata-fallback:

If you are able to spend the time implementing the fallback to canvasContext.createImageData() this would provide a good solution to enabling lightning running on the QT5 on the device we are using

`
import 'core-js/es/array/find.js';
import 'core-js/es/math/sign.js';
import 'core-js/es/number/is-finite.js';
import 'core-js/es/number/is-nan.js';
import 'core-js/es/map/index.js';
import 'core-js/es/object/assign.js';
import 'core-js/es/object/set-prototype-of.js';
import 'core-js/es/promise/index.js';
import 'core-js/es/set/index.js';
import 'core-js/es/symbol/index.js';
import 'whatwg-fetch';
import 'core-js/es/array/from.js';
import 'core-js/es/array/includes.js';

function supportsImageDataConstructor() {
if (typeof window.ImageData !== 'function') return false;
try {
new window.ImageData(new Uint8ClampedArray(4), 1, 1);
return true;
} catch (error) {
return false;
}
}

if (!supportsImageDataConstructor()) {
const NativeImageData = window.ImageData;
const context = document.createElement('canvas').getContext('2d');
const LegacyImageData = function (data, width, height) {
const imageData = context.createImageData(width, height);
if (imageData.data.set) {
imageData.data.set(data);
} else {
for (let index = 0; index < data.length; index += 1) {
imageData.data[index] = data[index];
}
}
return imageData;
};
if (NativeImageData && NativeImageData.prototype) {
LegacyImageData.prototype = NativeImageData.prototype;
}
window.ImageData = LegacyImageData;
}
`