Body append

[VincentGillot]

I was wondering why is the video re-appended to the body? I'm using this inside a React app and it's being put outside of the screen. It would be nice for it to just simply use the current video tag or choose a parent element to be used for appending. And i can't style it because all the styles are being overwritten by the instance construction.

[danimoh]

Hello, the video is not being re-appended to the body, it is only being appended to the body, if it is not appended to the DOM yet at the time the QrScanner instance is created.
This is to avoid issues with iOS which disallows playing a video that's not in the DOM or hidden, see

qr-scanner/src/qr-scanner.ts

Lines 177 to 187 in 8bb46c3

	// Avoid Safari stopping the video stream on a hidden video.
	// See https://github.com/cozmo/jsQR/issues/185
	let shouldHideVideo = false;
	if (video.hidden) {
	video.hidden = false;
	shouldHideVideo = true;
	}
	if (!document.body.contains(video)) {
	document.body.appendChild(video);
	shouldHideVideo = true;
	}

qr-scanner/src/qr-scanner.ts

Lines 229 to 258 in 8bb46c3

	requestAnimationFrame(() => {
	// Checking in requestAnimationFrame which should avoid a potential additional re-flow for getComputedStyle.
	const videoStyle = window.getComputedStyle(video);
	if (videoStyle.display === 'none') {
	video.style.setProperty('display', 'block', 'important');
	shouldHideVideo = true;
	}
	if (videoStyle.visibility !== 'visible') {
	video.style.setProperty('visibility', 'visible', 'important');
	shouldHideVideo = true;
	}
	if (shouldHideVideo) {
	// Hide the video in a way that doesn't cause Safari to stop the playback.
	console.warn('QrScanner has overwritten the video hiding style to avoid Safari stopping the playback.');
	video.style.opacity = '0';
	video.style.width = '0';
	video.style.height = '0';
	if (this.$overlay && this.$overlay.parentElement) {
	this.$overlay.parentElement.removeChild(this.$overlay);
	}
	// @ts-ignore
	delete this.$overlay!;
	// @ts-ignore
	delete this.$codeOutlineHighlight!;
	}
	if (this.$overlay) {
	this._updateOverlay();
	}
	});

You can avoid this by creating the QrScanner instance only as soon as the video element has been added to the DOM.
If you're using a UI framework, note that most frameworks offer something like a mounted hook, that tells you that a component's DOM elements have actually been added to the DOM.

Instead of doing the checks linked above in the constructor, I could also do them on each play().
Do you think that would help?

[brettwillis]

@danimoh this line prevents us from showing the video inside the shadow DOM. Can't use it in UI frameworks that utilise shadow DOM (web components) e.g. LitElement.

qr-scanner/src/qr-scanner.ts

Line 185 in 34bccc6

if (!document.body.contains(video)) {

Edit: this particular problem is already raised by #168.

[webermax]

For our project, that's a show stopper, too.

[exetico]

What's the progress on this? It's a show-stopper here, too (Lit are in use, indeed).

Have you done any work behind the scenes, @nimiq ? Thank you for a great solution for qr-scanner.

[exetico]

@webermax Now we just need @nimiq to approve #241. You're welcome to use my fork, while we wait.

https://github.com/exetico/qr-scanner/tree/master

I'll remove my work, once the merge has (hopefully) been approved.