[Feature Request] Set 'autoplay' property when creating the video element

[Techn1c4l]

I faced the issue when using the Html5Qrcode class - the camera stream won't play automatically on an Android Cordova app. Only the ugly grey placeholder would appear.

At first, I wrote the code to set the setMediaPlaybackRequiresUserGesture to false for the system WebView component which is used by Cordova:

WebView webView = (WebView) appView.getEngine().getView();
WebSettings webSettings = webView.getSettings();
webSettings.setMediaPlaybackRequiresUserGesture(false);

The problem still persisted. I had to modify the _createVideoElement method in the html5-qrcode.js file by adding the code which sets the autoplay property of the videoElement to true:

_createVideoElement(width) {
        const videoElement = document.createElement('video');
        videoElement.style.width = `${width}px`;
        videoElement.muted = true;
        videoElement.playsInline = true;
	videoElement.autoplay = true;
        return videoElement;
    }

This solution worked fine. Please consider implementing this feature.

[mebjas]

Thanks for reporting the issue and suggesting a fix, will try it out and send a PR thanks!

[mebjas]

@Techn1c4l Can you confirm if this is still needed to run the video stream successfully on Cordova app?

[mebjas]

Closing for now, please reopen if issue still exists!

[tectiv3]

This issue is still exists on samsung phones.

NotAllowedError: play() failed because the user didn't interact with the document first.

[tectiv3]

Still happening.

[mebjas]

Which browser / on?

…

On Thu, 24 Nov 2022, 12:52 tectiv3, ***@***.***> wrote: Still happening. [image: Screen Shot 2022-11-24 at 13 51 22] <https://user-images.githubusercontent.com/1974189/203697003-7ec44800-bcec-40a4-a785-20203ce7e275.png> — Reply to this email directly, view it on GitHub <#174 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAW6HBMXE7Z3LCFO2CB4Z63WJ3X7JANCNFSM42WX4OEA> . You are receiving this because you modified the open/close state.Message ID: ***@***.***>

[tectiv3]

Everything is on the screenshot from sentry:)

[rgagne]

Had the same problem and the fix suggested by @Techn1c4l above takes care of it.

I have not exhaustively tested on all platforms but resolves Android and works fine on MacOS Chrome with the change. Could be related to https://stackoverflow.com/questions/67038895/htmlvideoelement-wont-autoplay-on-a-cordova-android-app.

Adding autoplay to createVideoElement in core-impl.ts

private createVideoElement(width: number): HTMLVideoElement {
        const videoElement = document.createElement("video");
        videoElement.style.width = `${width}px`;
        videoElement.style.display = "block";
        videoElement.muted = true;
        videoElement.setAttribute("muted", "true");
        (<any>videoElement).playsInline = true;
        (<any>videoElement).autoplay = true;
        videoElement.setAttribute("autoplay", "true");
        return videoElement;
    }

Other related ticket #198