Web Content Test Application (CTA) on xbox.com/play

The Web Content Test Application (CTA) developer tools are available at xbox.com/play, the current XBOX Cloud Gaming web experience. These tools are designed for Edge and Chrome on Windows, and for Safari on Mac, iOS, and iPadOS. This article covers xbox.com/play. A new experience is in preview at play.xbox.com. To use its developer tools, see Web Content Test Application (CTA) overview.

• Choose an experience
• Open developer tools
• Select an offering
• IP Connect
• Remote Connect
• Developer settings
• TAK sideload
• Switch TAK layouts during a stream
• Mouse and Keyboard
• Try the new experience

​

Choose an experience

The web CTA runs on two XBOX Cloud Gaming web experiences: xbox.com/play and play.xbox.com, which is in preview. Use this table to choose one for your scenario: Both experiences support private offerings, sandbox test accounts, region selection, and Mouse and Keyboard.

​

Open developer tools

To start using the developer tools, go to xbox.com/play/dev-tools. If you aren’t signed in, the page asks you to sign in and includes a sandbox field.

• For retail accounts, leave the sandbox blank and sign in with the same account that’s signed in to the XBOX Development Kit or configured to access a private offering.
• For sandbox test accounts, enter the sandbox ID before you sign in.

A sandbox is an isolated development environment for your title, and each sandbox test account belongs to one. The sandbox ID isn’t your offering ID; get it from whoever created your test accounts. For more information, see XBOX services sandboxes overview. If you signed in without the sandbox ID, sign out by visiting another Microsoft website, such as outlook.com. Then sign in again with the correct sandbox ID. You can also open developer settings from the xbox.com/play catalog. Select your profile picture, then select Settings > Developer. If Developer isn’t shown, select Account 10 times in quick succession to reveal it. In developer settings, Developer Tools Home returns to the developer tools page.

​

Select an offering

Offerings are the private test environments used to validate games running on datacenter hardware. For more information on offerings, see Game Streaming Overview. To use a specific offering:

1. Go to xbox.com/play/dev-tools/select-offering.
2. Select the offering from the dropdown list, or select Custom offering ID and enter the offering ID in Enter offering ID for cloud connection.
3. Select Connect.

The catalog for your offering opens, and the page shows Using custom offering followed by the offering ID. If you’re unable to access the offering, make sure you’re signed in to an account that’s authorized to use that specific offering.

​

Offering regions

Offerings don’t automatically route you to the closest datacenter. To test in a different region, open Settings > Developer and choose a region under Streaming Region. Choose it before you start a stream. Current region shows your selection. Available regions must be configured ahead of time. Contact your Microsoft account representative to adjust the available regions for your offering.

​

IP Connect

Use IP Connect to stream directly from an XBOX Development Kit by IP address. On xbox.com/play, IP Connect requires a sandbox test account, and the developer tools page doesn’t link to it. Before using IP Connect, complete these prerequisites:

1. Set up your XBOX Development Kit for streaming. For more information, see Set up an XBOX Development Kit.
2. In Dev Home > Streaming, make sure Direct Connect is listening. It stops listening each time the kit restarts.
3. Make sure your client device is on the same network as your XBOX Development Kit, or connected through a VPN.
4. Make sure your network allows TCP and UDP traffic to port 9002 on the XBOX Development Kit. The browser uses a WebSocket connection for signaling and UDP for the stream.

To connect by IP address:

1. Go to xbox.com/play/dev-tools. Enter the sandbox ID, then sign in with a test account for that sandbox.
2. Go to xbox.com/play/dev-tools/ip-connect.
3. Enter the IP address and port of the XBOX Development Kit, for example 192.168.1.10:9002.
4. Select Connect.
5. If your browser asks for permission to access devices on your local network, select Allow.

When the connection succeeds, the app running on the XBOX Development Kit appears in the browser. If you’re signed in with a retail account, the IP Connect address returns you to the developer tools page.

​

Remote Connect

Remote Connect streams from your XBOX Development Kit over the internet through XBOX remote play services. It finds the kit through your signed-in account, so you don’t enter an IP address. First, set up the XBOX Development Kit:

1. Sign in to the XBOX Development Kit with the account you’ll use on xbox.com/play. The account must be allowed in the kit’s sandbox.
2. Go to Dev Home > Streaming. Under Remote Connect, select your account.
3. In Dev Home > Streaming, make sure Direct Connect isn’t listening. Direct Connect is a separate connection mode for IP Connect, and it blocks Remote Connect while it’s listening.

Then connect from xbox.com/play:

1. Go to xbox.com/play/dev-tools and sign in with the same account. For a sandbox test account, enter the sandbox ID before you sign in.
2. Select Remote Connect. It’s available when your signed-in account has a development kit set up for Remote Connect, or when you’re signed in with a sandbox test account.
3. Find your XBOX Development Kit in the list, then select Connect.

​

Developer settings

To open developer settings, select your profile picture, then select Settings > Developer. Developer settings include the current offering and stream configuration settings. Stream Configuration Overview includes more information about the specific stream configuration settings that can be overridden. Under Stream Configuration > Touch adaptation, you can set:

• Enable sideload: Loads touch layouts from the TAK CLI serve command instead of the layouts published for your title.
• Sideload server address: The address of the sideload server.
• Enable automatic refresh: Updates the layouts on your device when you change them on the sideload server.
• Emulate touch with mouse: Treats mouse clicks as touch.

​

TAK sideload

These steps cover streaming from a custom offering or an XBOX Development Kit. To use an offering, see Select an offering. Before you start, run tak serve on the PC that serves your layouts. To sideload from the same PC as the browser:

1. Open Settings > Developer and find Touch adaptation.
2. Turn on Enable sideload.
3. In Sideload server address, enter the address of your sideload server, for example http://localhost:9269. Any address other than localhost must use https, as described in Sideload from another device.
4. Under Network Status, check Network Permission. If it shows Required, select Request Permission. When the browser asks to let the site Access other apps and services on this device, select Allow.
5. On a PC without a touch screen, turn on Emulate touch with mouse. Without it, the stream shows no touch controls and the TAK menu isn’t available.
6. When Server Connection shows Connected, start a stream. If it shows Not Reachable, make sure tak serve is running, then select Recheck.

Changing Enable sideload or Emulate touch with mouse during a stream prompts you to switch games. To confirm that the stream uses your layouts, check for them under Bundle layouts, as described in Switch TAK layouts during a stream.

​

Sideload from another device

To test on a phone or tablet, run tak serve on a PC that the device can reach on your local network. The server must use https:

1. Create a certificate. For more information, see Certificate Generation Instructions.
2. On the PC, run tak serve with the --certificate-file and --certificate-password options.
3. Install the certificate on the phone or tablet and trust it. For steps, see Trusting the certificate on different clients.
4. On the phone or tablet, open Settings > Developer, turn on Enable sideload, and enter https://<your PC's IP address>:9269 in Sideload server address.
5. Check Network Permission and Server Connection, as described in steps 4 and 6 of TAK sideload.

To require a password, use the --password option and enter the same password in the device’s developer settings. For more information, see Serve Command.

​

Switch TAK layouts during a stream

In developer mode, you can switch the active layout while streaming:

1. In the stream, open Developer Tools Menu in the bottom-left corner, then select TAK.
2. Under Select touch controls layout, select a layout under Bundle layouts or System layouts. Bundle layouts shows the layouts loaded for this stream. When sideload works, those are your layouts.
3. Select Close.

The System layouts are Standard and Native Touch Only (Blank). Standard shows the standard controller overlay. Native Touch Only (Blank) removes the touch controls.

​

Mouse and Keyboard

Before you start, open developer tools as described in Open developer tools.

1. In Settings > Developer, under Stream Configuration > Enabled input types, turn on Mouse and keyboard. Change this setting before you start a stream.
2. Under Touch adaptation, turn off Emulate touch with mouse. When both are on, mouse clicks are treated as touches.
3. Start a stream.
4. If a banner reads Enter fullscreen mode to play with mouse and keyboard, select Enter fullscreen.

To release the mouse, press the key shown in the Press key to release your mouse notification.

​

Try the new experience

To switch to the new experience at play.xbox.com, select your profile picture, then select Try the new experience > Try now. To return to xbox.com/play, open Account settings from your profile and select Exit preview.