Skip to content

Commit

Permalink
update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
yume-chan committed Mar 28, 2024
1 parent f494c5c commit 46327ec
Show file tree
Hide file tree
Showing 14 changed files with 223 additions and 156 deletions.
33 changes: 6 additions & 27 deletions docs/prepare.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -9,31 +9,10 @@ Android's USB debugging feature is for developers to debug and test their apps,
By default, USB debugging option is hidden in Android settings. Depending on the device, the steps to enable it may be slightly different. Here are the common steps:

1. Open Settings app.
2. Find the **Build number** option. On some devices it may have a different name. The following table lists the location of this option on some devices:
2. Find the **Build number** option. On some devices it may have a different name.
3. Tap the above option 7 times. You will see a popup saying "You are now a developer!".
4. Go back to Settings and find **Developer options**.
5. Tap **Developer options** and enable it on the top right corner.
6. Scroll down to find **USB debugging** and enable it.

| Device | Location |
| ------------------------ | ------------------------------------------------------------- |
| Stock Android | Settings > About phone > Build number |
| Samsung OneUI | Settings > About phone > Software information > Build number |
| Xiaomi MIUI 13 or higher | Settings > My device > Detailed info and specs > MIUI version |
| Xiaomi MIUI 12 or lower | Settings > About phone > MIUI version |
| Oppo ColorOS | Settings > About phone > Version > Build number |
| Meizu Flyme | Settings > My device > System version |
| Huawei EMUI | Settings > About phone > Build number |

1. Tap the above option 7 times. You will see a popup saying "You are now a developer!".
2. Go back to Settings and find **Developer options**. The following table lists the location of this option on some devices:

| Device | Location |
| -------------------------- | -------------------------------------------------- |
| Stock Android 11 or higher | Settings > System > Developer options |
| Stock Android 9 and 10 | Settings > System > Advanced > Developer options |
| Stock Android 4 or higher | Settings > Developer options |
| Samsung OneUI | Settings > Developer options |
| Xiaomi MIUI | Settings > Additional settings > Developer options |
| Oppo ColorOS | Settings > Additional settings > Developer options |
| Meizu Flyme | Settings > Accessibility > Developer options |
| Huawei EMUI | Settings > System & updates > Developer options |

1. Tap **Developer options** and enable it on the top right corner.
2. Scroll down to find **USB debugging** and enable it.
Check the [guide](https://app.tangoapp.dev/guide) page for option names on different devices.
125 changes: 0 additions & 125 deletions docs/screen-mirror.mdx

This file was deleted.

4 changes: 4 additions & 0 deletions docs/screen-mirror/_category_.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
label: Screen Mirror
position: 7
collapsed: false
collapsible: false
15 changes: 15 additions & 0 deletions docs/screen-mirror/_pro.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
.pro {
display: inline-block;
margin-right: 8px;
height: 16px;
line-height: 16px;
margin-left: 4px;
vertical-align: middle;
margin-top: -2px;
padding-left: 5px;
padding-right: 4px;
border-radius: 4px;
font-size: 12px;
background-color: #447cf6;
color: white;
}
12 changes: 12 additions & 0 deletions docs/screen-mirror/_pro.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import React from 'react';

import styles from './_pro.module.css'

export default function Pro() {
return (
<p>
<span className={styles.pro}>Pro</span>
<span>This feature requires Pro plan or higher.</span>
</p>
);
}
23 changes: 23 additions & 0 deletions docs/screen-mirror/camera.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
---
sidebar_position: 1
---

# Mirror Cameras

import Pro from './_pro.tsx';

<Pro/>

On Android 12 and higher, Tango can mirror the camera instead, so you don't need to open the camera app, and there will be no camera UI on the screen.

To mirror a camera, scroll to **Video** section, then change **Source** to **Camera**.

When **Camera** is selected in **Source**, the following options are available:

* **Camera**: Choose between the front and back camera. The list contains the ID, position, and resolution of each camera. Sadly, it's not possible to know the type of the camera (normal, micro, ultra-wide, etc.) so you may need to try each camera to find the one you want.

Cameras usually have very high resolutions, so they require more hardware resources to capture, encode, and playback. If the video is laggy or the device is overheating, try reducing the resolution or bitrate.

## Mirror multiple cameras at the same time

Due to Android system and hardware limitations, only one camera can be mirrored at a time. When a camera is mirrored, other apps can't access the camera, including the camera app itself. If you need to use the camera app, you need to stop mirroring the camera first.
47 changes: 47 additions & 0 deletions docs/screen-mirror/control.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
---
sidebar_position: 3
---

# Control the device

## Mouse

The mouse inputs are translated to touch events on the device. You can use mouse to tap, drag, scroll, and zoom.

Some apps (like Chrome for Android) can also responds to right clicks and mouse wheel, but most apps are only designed for touch input, so all buttons behave like left click.

## Keyboard

The keyboard inputs are sent to the device as is. Except:

* When in full screen mode, some system-critical keys and shortcuts are handled by local OS and not forwarded to the device, for example:
* **Command + Tab** on macOS: Switch between windows.
* **Command + Q** on macOS: Quit the current app.
* **Windows + L** on Windows: Lock the computer.
* **Control + Alt + Delete** on Windows: Open task manager.
* When not in full screen mode, in additional to the above keys, more keys and shortcuts will be handled by local OS or Web browser, for example:
* **Windows** key on Windows: Open Start menu.
* **Ctrl/Command + W**: Close current tab.
* **Ctrl/Command + N**: Open new browser window.

The **Windows/Command/Super** key becomes the Search key on Android (also known as the OS key in some ROMs). To see a list of supported shortcuts, press **Search + /** on the device.

## Simulate physical keyboard

By default, Tango uses Android's built-in virtual keyboard for sending keyboard inputs. When enabled from the **Control** section, Tango can also simulate a physical keyboard, which has the following advantages:

* The on-screen virtual keyboard won't show up when you type. This gives you more screen space, but also means you can't type on the device directly.
* The keyboard layout is configurable at **Settings → System → Languages and input → Physical keyboard**. You can choose a layout that matches your physical keyboard.
* It's more compatible with apps that don't respond to virtual keyboard inputs, including some IMEs and games.

## Touch

If your computer (or tablet) has a touch screen, you can use it to control the device. The touch inputs are sent to the device as is. Multi-touch is also supported.

## Game controller

Game controllers connected to the computer can be used to control the device. The controller inputs are sent to the device as is. It should work in games that support game controllers natively, like Minecraft, and emulators like PPSSPP.

## App switcher

On the left side of the screen there is the app switcher. It lists all running apps on the current display (either physical or virtual). You can tap an app to quickly switch to it.
15 changes: 15 additions & 0 deletions docs/screen-mirror/faq.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
---
sidebar_position: 4
---

# Troubleshooting

## The screen is black on lock screen, Netflix, or other media apps

For privacy, security or copyright protection reasons, apps can prevent its content to be captured. This will result in a black screen in Tango, and there is nothing we can do.

While you can't see the screen content, you can still control the device using mouse and keyboard. For example, you can use keyboard to enter the PIN to unlock the device.

## Can't control XiaoMi devices

In developer options, XiaoMi devices have a **USB debugging (Security settings)** option. It needs to be enabled for controlling the device.
39 changes: 39 additions & 0 deletions docs/screen-mirror/index.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
---
sidebar_position: 0
---

# Screen Mirror

Screen mirror page allows you to see the device screen in real time, and control the device using mouse and keyboard.

Check the left navigation for more information on how to control the device, create virtual displays, mirror cameras, and troubleshoot common issues.

## Video

* Source: Choose the source of the video. It can be the device screen, a [virtual display](./virtual.mdx), or a [camera](./camera.mdx). Depending on the source, different options are available.
* Codec: On supported device and browser, use H.265 codec can improve video quality and reduce latency. If the device or the browser doesn't support H.265, the option will be disabled.
* Encoder: Choose the video encoder. **Default** will automatically choose the best encoder based on the device and browser. Some devices may ship with a buggy encoder, in which case you can try another one.
* Bitrate: The video bitrate in bps. Higher bitrate means better video quality, but also higher resource usage and latency. If the video is laggy, try reducing the bitrate.
* Resolution: The video resolution. Higher resolution means better video quality, but also higher resource usage and latency. If the video is laggy, try reducing the resolution.

## Audio

On Android 11 or higher, Tango can forward audio from the device to your computer. There are two options:

### Play internal audio on ...

Forwards internal audio (from apps) to computer. It has three values:

* **Device**: Disable audio forwarding. Internal audio is played on the device normally.
* **Tango**: Forward internal audio to computer.
* **Both**: Play internal audio on both device and computer.

Due to Android system restrictions, internal audio forwarding doesn't work when a wired or Bluetooth headset is connected. Also, notifications, alarms, and phone ringtone can't be forwarded and will always play only on the device.

When choosing **Both**, Tango will play captured audio through notification channel, so the volume is controlled both by the **Media** volume and **Notification** volume. If the sound on device is too quiet, try increasing both volumes.

### Forward microphone

Captures device microphone input and play it on computer.

Internal audio forwarding and microphone forwarding can be enabled at the same time.
23 changes: 23 additions & 0 deletions docs/screen-mirror/virtual.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
---
sidebar_position: 2
---

# Create and mirror virtual display

import Pro from './_pro.tsx';

<Pro/>

On Android 11 and higher, Tango can create and mirror a virtual display. Virtual displays are similar to connecting multiple displays to the device. It can run apps and accept inputs independently from the main display, allowing you to use multiple apps at the same time.

To mirror a virtual display, scroll to **Video** section, then change **Source** to **Virtual**. You can also customize the resolution and density of the virtual display below.

## Show PowerPoint presentation on virtual displays

Some apps, like Microsoft Office, can display different content on multiple displays. For example, if Tango is mirroring a virtual display, start a PowerPoint presentation will show the presentation at full screen on the virtual display, while the main display shows the presentation controls.

If the app launcher is showing on the virtual display and covers the presentation, you can tap **Back** button in the command bar to close it.

## Create multiple virtual displays

On Desktop platforms, by opening multiple tabs of Tango, multiple virtual displays can be created and mirrored in each tab. Each virtual display is independent and can run different apps. Note that Android apps can't run on multiple virtual displays, but you can run different apps on each of them.
Loading

0 comments on commit 46327ec

Please sign in to comment.