How to test &lt;model-viewer&gt; on mobile and WSL2
Tags: javascript, webxr, ar
Published: 2021-06-14 03:41:19

This post is a note for running Google's [&lt;model-viewer&gt;](https://modelviewer.dev/) server in guest WSL2 on host Windows 10 and testing it from mobile devices.

[&lt;model-viewer&gt;](https://modelviewer.dev/) recommends to use WSL2 on Windows platform due to the dependency issues. But external mobile devices can't directly access the server running in WSL2. You need to set up port forwarding and open the port for the test.

## What is &lt;model-viewer&gt;?

[&lt;model-viewer&gt;](https://modelviewer.dev/) is a Google's project that you can easily display interactive 3D models on the web & in AR with custom elements (HTML tags).

![&lt;model-viewer&gt;](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eemec6xs7eg2xdcqn1zl.png)


## Clone and build &lt;model-viewer&gt;

First, clone [the &lt;model-viewer&gt; GitHub repository](https://github.com/google/model-viewer) and build it in your WSL2 as the instructions in the repository readme.

```
$ git clone --depth=1 https://github.com/google/model-viewer.git
$ cd model-viewer
$ npm install
$ npm run bootstrap
$ npm run build
```


## Run the web server

Next, run the web server in WSL2. If you want to test with WebXR, you need to access the server with https protocol. Otherwise browsers disable WebXR API.

Then you should first set up SSL certification and then run the server with SSL enabled.

```
$ openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem
$ node ./node_modules/.bin/http-server -p 8080 -c-1 -o /packages/modelviewer.dev -S -C cert.pem
```

The above `http-server` command shows message like 

```
Starting up http-server, serving ./ through https
Available on:
  https://127.0.0.1:8080
  https://xxx.xxx.xxx.xxx:8080 # Editor's note: WSL2 IP address
Hit CTRL-C to stop the server
open: https://127.0.0.1:8080/packages/modelviewer.dev
```

Here, I let the guest WSL2 IP address be `xxx.xxx.xxx.xxx`.

Open a web server on your host Windows 10 and access `https://xxx.xxx.xxx.xxx:8080` to check if &lt;model-viewer&gt; works.

Remember the WSL2 IP address for the next step.


## Set up port forwarding

After you confirm &lt;model-viewer&gt; boots up in WSL2, you need to set up port forwarding from host Windows 10 to guest WSL2.

Run Command prompt or Power shell as administrator in your host Windows 10, and then run the following command to set up the port forwarding.

```
> netsh.exe interface portproxy add v4tov4 listenport=8080 listenaddress=* connectaddress=xxx.xxx.xxx.xxx
```

If you want to check if it succeeds, you can use `show` command of `netsh`.

```
> netsh.exe interface portproxy show all

Listen on ipv4:             Connect to ipv4:

Address         Port        Address         Port
--------------- ----------  --------------- ----------
*               8080        xxx.xxx.xxx.xxx  8080
```

If you want to delete the set up, you can use `delete` command of `netsh`.

```
> netsh.exe interface portproxy delete v4tov4 listenport=8080 listenaddress=* 
```

After you finish the port forwarding set up, you need to start IP helper service with the following command.

```
> sc.exe start iphlpsvc
```

If you want to stop the service, you can use `stop` command of `sc`.

```
> sc.exe stop iphlpsvc
```

## Open the port

Setting up the port forwarding is not good enough. You also need to open the port for the test.

Open `Windows Defender Firewall with Advanced Security` in your host Windows 10. You can find it in the search bar placed at bottom left in the screen.

In the window, select Inbound Rules in the left tab and then click the "New Rules" in the right Action tab.

![Click Inbound Rules and New Rules](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rta9eccklaowe2k3gge.png)

In the Rule Type window, select Port and click Next.
 
![Rule Type window](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0nfpiqi22ovyzsc0p3nm.png)

In the Protocol and Ports window, select TCP, set specific local ports 8080, and then click Next.

![Protocol and Ports window](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/he59xlzcm9qs8pmenfsr.png)
 
In the Action window, select Allow the connection and click Next.

![Action window](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yxt5kd3r5dfyokrqubfx.png)

In the Profile window, choose the option depends on your environment and click Next.

![Profile window](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w6d19pnr561dnfq27f9r.png)
 
In the Name window, name whatever you want and write  the description if you want. And click Finish.

![Name window](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dyeidefg3sa2wepf249x.png)
 
Don't forget to stop the IP helper service and close the port after you finish the test for the security.

## Test &lt;model-viewer&gt; on mobile devices

Now it's ready for the test.

Check your host Windows 10 IP address. For example you may use `ipconfig` command. Here, I let the host Windows 10 IP address be `yyy.yyy.yyy.yyy`. 

Open a web browser in your mobile device which is in the same network with the host Windows 10.

Enter `https://yyy.yyy.yyy.yyy:8080/packages/modelviewer.dev/` in the URL bar. If you see an untrusted web page warning, select an ignore option.

&lt;model-viewer&gt; starts on your mobile. Your mobile accesses the host Windows 10 and it forwards to the guest WSL2.