Bootstrap projects using webpack don't show video on mobile using the dev-server

Universal AR
#1

As stated above, the bootstrap projects using webpack do not work on external mobile devices.
The standalone version of aframe does work.
The build version of a webpack project also works.
The dev-server works on desktop using https://localhost:8080.

No errors shown, no video, can’t even print a console log from the index.ts file.

Any idea what could fix this issue?

#2

Hi @sem,

You can change the server host destination by going into the webpack.config.js file.

devServer: {
	contentBase: './dist',
	https: true,
	host: '0.0.0.0'
}

Are you using the ZapWorks CLI? If so, you can run zapworks serve --lan which will automatically start a testing server. Here you can go to your mobile device web browser and type your IP address followed by the given port. For example: 192.000.0.0:8080. You will then have to click advanced and continue.

For ease of use, it should also give you a QR code to scan if your version of the CLI is up to date.

More information can be found here: https://docs.zap.works/universal-ar/zapworks-cli/

George

#3

Hi @George,

Thanks for your response.

Zapworks CLI is sadly not an option since it can’t convert TypeScript to Javascript before serving. The webpack.config.js is actually the same as in your bootstrap examples. So I don’t understand what you mean by that.

Please try one of the bootstrap projects and see if you can connect a mobile device. If you can, it has to be a problem on my end. But I doubt it since other webpack projects do work.

I also found a new bug that I was able to solve myself. On iPad the video freezes completely (build version), if you place the camera.start() behind a button click this issue is fixed.

#4

Hi @sem,

Please try changing webpack.config.js : host: '0.0.0.0' to your own machine’s ip address.

You can find it on Windows by running ipconfig within CMD (It should appear under IPv4 Address) or ifconfig on Mac/Linux. The IP format is usually 192.168.0.X

Regarding the camera start issue, I would suggest you put the camera start logic inside permissionRequestUI provided by Zappar ThreeJS library.

ZapparThree.permissionRequestUI().then(granted => {
    if (granted) camera.start();
    else ZapparThree.permissionDeniedUI();
});

Hope this helps,
Deim.

1 Like
#5

Hi @Deim,

The documentation of Webpack tells me that the host property is used for masking allowed users. Where ‘0.0.0.0’ means that all devices are allowed to see the web page. So this couldn’t be the issue.

Sorry for not specifying my error before…
Accessing this page isn’t the problem since I’m not getting a 404 page. It’s the page not loading correctly that is the problem sadly. It connects but remains blank as the page gets stuck trying to load.

The iPad issue is something that also occurs on my device using just the bootstrap template, please try one of the bootstrap projects with an iPad. I had it resolved by placing a button after the ZapparThree.permissionRequestUI() promise. But sadly, it still is broken for me now.