Compare commits

...

70 Commits
v1.4.1 ... v1.8

Author SHA1 Message Date
c23f55ee6b Bump version to 1.8 2023-07-31 07:49:11 +07:00
0c85770ed1 Bump version to 1.8 2023-07-31 07:48:52 +07:00
8233192b8d Update README.md 2023-07-31 07:47:45 +07:00
6c5fa3c061 Simplify playtime text 2023-07-31 07:31:03 +07:00
e47c6d9103 Use colors from PICO-8 palette for stream badges 2023-07-31 07:25:52 +07:00
563ad65580 Fix battery calculation 2023-07-31 07:16:32 +07:00
7933d8d22c Update README.md 2023-07-31 06:43:47 +07:00
b0e23ca335 Hold the "Quit game" button for 1s to refresh the stream (#43)
* Hold "Quit game" button to refresh the stream

* Fix problem with touch screen

* Another fix
2023-07-30 22:03:25 +07:00
c9f3990173 Show playtime & battery level badges (#42) 2023-07-30 21:07:25 +07:00
5d301b6588 Add setting to hide/disable touch controller (#38) 2023-07-30 15:47:56 +07:00
32123a7891 Update README.md 2023-07-29 18:02:20 +07:00
dad4d43313 Bump version to 1.7 2023-07-29 17:21:01 +07:00
e3af588b13 Bump version to 1.7 2023-07-29 17:20:47 +07:00
50226baa5c Update README.md 2023-07-29 17:20:02 +07:00
d2e3ad36da Fix check for update 2023-07-29 16:54:54 +07:00
26528fe2d7 Refactor code (#36)
* Refactor class names

* Move Quick settings bar's CSS to addCss()

* Adjust Stream menu button's size

* Add shadow to Video settings bar

* Put "Stream Stats" button before "Video Settings" button
2023-07-29 16:39:40 +07:00
9d44c9c779 Add "Preferred game's language" setting (#35) 2023-07-29 15:56:19 +07:00
423ac5c356 Start hiding cursor as soon as possible 2023-07-29 15:15:23 +07:00
746e32ecae Add "Hide mouse cursor while playing" setting (#33) 2023-07-29 12:11:41 +07:00
931d70ba3a Custom User-Agent (#32)
* Add "Custom User-Agent" feature

* Override navigator.userAgent

* Save the original User-Agent before overriding it
2023-07-29 10:49:12 +07:00
654d82208b Update README.md 2023-07-29 09:41:40 +07:00
0d5e3ed70f Replace "Force 1080p stream" setting with "Stream's target resolution" (#31) 2023-07-29 08:23:01 +07:00
fcd312344b Update README.md 2023-07-28 12:14:58 +07:00
d53aeb6c3e Update README.md 2023-07-28 06:32:12 +07:00
af5c758512 Update README.md 2023-07-27 08:45:03 +07:00
d1f39927d7 Update README.md 2023-07-27 08:29:48 +07:00
bd53961d67 Update README.md 2023-07-27 08:11:17 +07:00
ab6208a948 Bump version to 1.6.2 2023-07-27 07:29:53 +07:00
bae8c193d3 Bump version to 1.6.2 2023-07-27 07:29:39 +07:00
b9283eb435 Update README.md 2023-07-27 07:28:50 +07:00
e73e018380 Update Stream stats (#24)
* Change label's font

* Add Stats settings popup

* Toggle Stats settings dialog

* Update structure of Preferences.SETTINGS

* Add dialog title

* Add "Show stats when starting the game" setting

* Update texts

* Validate setting value before saving

* Add Preferences.toElement()

* Add "Text size" setting

* Add "Decode time" stat

* Add "Conditional formatting text color" feature

* Add "for" attributes to labels

* Update grade's colors

* Fix text wrapping

* Update stats using setInterval() instead of setTimeout()
2023-07-27 07:18:06 +07:00
e98ad00bb9 Update README.md 2023-07-26 15:42:38 +07:00
d232dc164f Update README.md 2023-07-26 09:07:31 +07:00
ee192bc98e Change value of "updateURL" 2023-07-25 11:35:50 +07:00
1210176413 Change "updateURL" to meta file 2023-07-25 11:33:21 +07:00
9262d0e14f Create better-xcloud.meta.js 2023-07-25 11:32:35 +07:00
df87a51329 Update README.md 2023-07-25 11:20:40 +07:00
8c7013659b Fix Stream stats bar's CSS 2023-07-25 09:14:28 +07:00
b3b7a51979 Bump version to 1.6.1 2023-07-25 09:01:04 +07:00
831ccb31c1 Stop stretching stream stats' background to full screen 2023-07-25 09:00:48 +07:00
d87ac78e57 Add "Check for update" feature (#21) 2023-07-25 08:58:42 +07:00
67b419c37d Update README.md 2023-07-25 07:57:16 +07:00
a7b796362a Update README.md 2023-07-25 07:12:01 +07:00
889ee890f1 Update README.md 2023-07-24 11:38:29 +07:00
71a48f8afb Update README.md 2023-07-24 08:00:56 +07:00
354ecac97e Update README.md 2023-07-23 20:22:39 +07:00
45a7c28d3f Update README.md 2023-07-23 17:53:56 +07:00
e43c34ed3a Bump version to 1.6 2023-07-23 17:45:27 +07:00
28a2e32fc5 Update README.md 2023-07-23 17:44:50 +07:00
b564de249a Show stream stats (#16)
* Get video and audio info from RTCPeerConnection.getStats()

* Show stream's stats bar

* Make Stream menu icon's size smaller

* Add shadow to stream badges

* Show bitrate

* Add button to toggle Stream Stats

* Rename StreamStatus to StreamBadges

* Show '???' then currentRoundTripTime is undefined

* Remove work-around for browsers with no setCodecPreferences() support as it's not working

* Remove updateVideoPlayerPreview()

* Disable USE_DESKTOP_CODEC setting on unsupported browsers
2023-07-23 17:09:30 +07:00
9fa073da82 Update README.md 2023-07-22 15:41:14 +07:00
958f5410f4 Update README.md 2023-07-22 15:20:45 +07:00
15d3efdf4e Update README.md 2023-07-22 15:20:35 +07:00
645b49751d Update README.md 2023-07-22 15:15:16 +07:00
53913ae218 Update README.md 2023-07-22 12:23:31 +07:00
2569e73018 Bump version to 1.5 2023-07-22 12:13:42 +07:00
4c790ac38d Update README.md 2023-07-22 12:08:27 +07:00
11c233e14e Add screenshot capture feature (#15)
* Add a button to test screenshot feature

* Update CSS of the screenshot button

* Prevent screenshot button from blocking UI

* Add setting to change screenshot button's position
2023-07-22 11:46:19 +07:00
a81cb86140 Update README.md 2023-07-22 09:23:58 +07:00
c3de245545 Rename "Dimension" to "Resolution" 2023-07-22 07:29:31 +07:00
a7ab506f0f Update README.md 2023-07-22 07:02:42 +07:00
8ecff6adae Update issue templates 2023-07-22 06:51:44 +07:00
27ec45512d Update issue templates 2023-07-22 06:42:30 +07:00
3a654b99cb Fix video not showing in Chrome 2023-07-22 06:36:26 +07:00
a009cca866 Update README.md 2023-07-21 17:28:29 +07:00
19302ea444 Update README.md 2023-07-21 17:03:03 +07:00
3c4248c1c7 Update README.md 2023-07-21 16:51:40 +07:00
de834fcb80 Bump version to 1.4.2 2023-07-21 16:49:28 +07:00
baf2c2a35d Fix "Force high quality codec" feature not working with Kiwi Browser 2023-07-21 16:42:57 +07:00
522830a47d Update README.md 2023-07-21 15:16:57 +07:00
5 changed files with 1475 additions and 436 deletions

33
.github/ISSUE_TEMPLATE/bug_report.md vendored Normal file
View File

@ -0,0 +1,33 @@
---
name: Bug report
about: Create a report to help us improve
title: "[Bug]"
labels: bug
assignees: ''
---
**Describe the bug**
A clear and concise description of what the bug is.
**To Reproduce**
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
**Expected behavior**
A clear and concise description of what you expected to happen.
**Screenshots**
If applicable, add screenshots to help explain your problem.
**Platform (please complete the following information):**
- OS: [e.g. Android]
- Browser: [e.g. chrome, firefox]
- Browser Version: [e.g. 100]
- Better xCloud Version: [e.g. 1.4]
**Additional context**
Add any other context about the problem here.

View File

@ -0,0 +1,20 @@
---
name: Feature request
about: Suggest an idea for this project
title: "[Feature]"
labels: enhancement
assignees: ''
---
**Is your feature request related to a problem? Please describe.**
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
**Describe the solution you'd like**
A clear and concise description of what you want to happen.
**Describe alternatives you've considered**
A clear and concise description of any alternative solutions or features you've considered.
**Additional context**
Add any other context or screenshots about the feature request here.

191
README.md
View File

@ -2,56 +2,86 @@
Improve [Xbox Cloud Gaming (xCloud)](https://www.xbox.com/play/) experience on web browser.
The main target of this script is mobile users, but it should work great on desktop too.
This script makes me spend more time with xCloud, and I hope the same thing happens to you.
Give this project a 🌟 if you like it. Thank you 🙏.
[![Latest version](https://img.shields.io/github/v/release/redphx/better-xcloud?label=latest)](https://github.com/redphx/better-xcloud/releases)
[![Total stars](https://img.shields.io/github/stars/redphx/better-xcloud?color=%23cca400)](https://github.com/redphx/better-xcloud/stargazers)
<!--
[![Total downloads](https://img.shields.io/github/downloads/redphx/better-xcloud/total?color=%23e15f2c)](https://github.com/redphx/better-xcloud/releases)
-->
## Features
<img width="500" alt="Settings UI" src="https://github.com/redphx/better-xcloud/assets/96280/8fb9f0ac-85f5-4e5a-9570-5a5e119e4fc1">
<img width="500" alt="Video Settings UI" src="https://github.com/redphx/better-xcloud/assets/96280/ed219d50-02ab-40bd-95c5-a010956d77bf">
<img width="475" alt="Settings UI" src="https://github.com/redphx/better-xcloud/assets/96280/f4187ef8-fa10-4eab-b085-ef3c3aed3201">
<img width="475" alt="Stream HUD UI" src="https://github.com/redphx/better-xcloud/assets/96280/68f91041-10b2-4fd9-adc1-e2a21db7e36f">
&nbsp;
**Demo video:** https://youtu.be/oDr5Eddp55E
- **🔥 Show stream stats**
> Check [Stream stats section](#stream-stats) for more info.
- **🔥 Capture screenshot**
> Exclusive to **Better xCloud**. Check the [**Capture screenshot** section](#capture-screenshot) for more info.
- **🔥 Hold the "Quit game" button for one second to refresh the stream**
> Sometimes you can fix the bad connection to the stream simply by refreshing the page.
> Useful on mobile where the pull-to-refresh feature doesn't work while playing.
- **Switch region of streaming server**
> Connect to another server instead of the default one. Check [FAQ section](#faq) for some notes.
> Not working in Hermit ([#5](https://github.com/redphx/better-xcloud/issues/5)).
- **Force 1080p stream**
> Connect to another server instead of the default one. Check the [**FAQ** section](#faq) for some notes.
- **Preferred game's language**
> If the game doesn't support this language, it will use the same language as xCloud's website.
- **Stream's target resolution**
> Set stream's resolution.
> By default you only get 1080p stream when playing on desktop.
> This feature will give you 1080p stream even on mobile, without having to change User-Agent.
> Not working in Hermit ([#5](https://github.com/redphx/better-xcloud/issues/5)).
- **Force high quality codec (if possible)<sup>(\*)</sup>**
> This feature can give you 1080p stream even on mobile, without having to change User-Agent.
- **Force high quality codec (if supported)<sup>(\*)</sup>**
> Force xCloud to use the best streaming codec profile (same as desktop & TV) if possible. You don't have to change User-Agent anymore.
> You should enable this feature even if you're on desktop.
> Not available for some browsers (Firefox, Safari...). Use the [changing User-Agent method](https://github.com/redphx/better-xcloud/wiki/UserAgent) instead.
> Use more bandwidth & battery.
> Comparison video with the setting ON & OFF: https://youtu.be/-9PuBJJSgR4
> Disable if it causes crashes.
> This feature doesn't work on Kiwi Browser (unsupported codec).
- **Prefer IPv6 streaming server**
> Might reduce latency
- **Disable bandwidth checking**
> xCloud won't reduce quality when the internet speed is slow
> Might reduce latency.
- **Disable bandwidth checking**
> xCloud won't warn about slow connection speed.
- **Skip Xbox splash video**
> Save 3 seconds
> Save 3 seconds.
- **Hide Dots icon while playing**
> You can still click on it, but it doesn't block the screen anymore
- **Reduce UI animations**
> Disable `transition` CSS property in some elements. The smooth scrolling cannot be disabled.
> You can still click on it, but it doesn't block the screen anymore.
- **Disable touch controller**
> Stop the touch controller from showing when touching the screen.
> Useful when you play on a device with a built-in controller like Logitech G Cloud, Steam Deck, Retroid, etc.
- **Hide mouse cursor while playing**
> Hide the mouse cursor after 3 seconds of not moving.
- **Stretch video to full sctreen**
> Useful when you don't have a 16:9 screen
- **Adjust video filters**
> Brightness/Contrast/Saturation
> Brightness/Contrast/Saturation.
- **Display stream's statuses**
> Region/Server/Quality/Dimension...
> Region/Server/Codecs/Resolution...
> Current playtime of the session.
> Current battery level. Only visible on battery-powered devices.
- **Disable social features**
> Features like friends, chat... Disable these will make the page load faster.
> Not working in Hermit ([#5](https://github.com/redphx/better-xcloud/issues/5)).
- **Disable xCloud analytics**
> The analytics contains statistics of your streaming session, so I'd recommend to allow analytics to help Xbox improve xCloud's experence in the future.
> Not working in Hermit ([#5](https://github.com/redphx/better-xcloud/issues/5)).
> The analytics contains statistics of your streaming session, so I'd recommend allowing analytics to help Xbox improve xCloud's experience in the future.
- **Change User-Agent**
> Useful when you're using unsupported browsers.
> If you're on Safari, changing User-Agent to "Edge on Windows" will allow you to use Mic feature.
> This setting only affects xCloud, and it doesn't change browser's global User-Agent.
> 📝 If you get 404 error after using this feature, try refreshing the page a few times. See [#34](https://github.com/redphx/better-xcloud/issues/34).
- **Reduce UI animations**
> Disable `transition` CSS property in some elements. The smooth scrolling cannot be disabled.
- **Hide footer and other UI elements**
<sup>(\*)</sup> By default (for compatibility reasons) xCloud only uses high quality codec profile when you use Tizen TV or Chrome/Edge/Chromium browser on Chrome/MacOS. Enable this setting will give you the best experience no matter what platform & browser you're on.
## How to use
1. Install [Tampermonkey extension](https://www.tampermonkey.net/) on suppported browsers. It's also available for Firefox on Android.
1. Install [Tampermonkey extension](https://www.tampermonkey.net/) on suppported browsers.
2. Install **Better xCloud**:
- [Stable version](https://github.com/redphx/better-xcloud/releases/latest/download/better-xcloud.user.js)
- [Dev version](https://github.com/redphx/better-xcloud/raw/main/better-xcloud.user.js)
@ -61,67 +91,108 @@ Give this project a 🌟 if you like it. Thank you 🙏.
To update manually, just install the script again (you won't lose your settings).
## Tutorial videos
If you still have trouble installing **Better xCloud**, you can follow one of these tutorial videos:
- 🇧🇷 [Tudo isso agora tem no xCloud!! (ChipTec)](https://youtu.be/zS8Zy0mYIbU?t=40)
- 🇫🇷 [#Tuto Xbox Cloud Gaming : Ecran ultra large et adieu les bandes noires sur smartphone (Cloud Gaming France)](https://www.youtube.com/watch?v=5U05KoTdDHs)
## Compatibility
✅ = confirmed to be working
❓ = not yet tested
❌ = not supported (mostly because of lacking Userscript/extension support)
= unavailable
= unavailable
⚠️ = see custom notes
| | Desktop | Android | iOS |
|----------------------------------------|------------------|------------------|------------------|
| Chrome/Edge/Chromium variants | ✅ | ❌ | ❌ |
| Firefox | ✅ | <sup>(1)</sup> | ❌ |
| Safari | ✅<sup>(2)</sup> | | ✅<sup>(3)</sup> |
| [Hermit](https://hermit.chimbori.com) | | ⚠️<sup>(4)</sup> | |
| Kiwi Browser | | ✅<sup>(5)</sup> | |
| | Desktop | Android/Android TV | iOS |
|-----------------------------------------|:-----------------|:-------------------|:----------------|
| Chrome/Edge/Chromium variants | ✅ | ❌ | ❌ |
| Firefox | ✅ | ⚠️<sup>(1)</sup> | ❌ |
| Safari | ✅<sup>(2)</sup> | | ✅<sup>(3)</sup> |
| [Hermit](https://hermit.chimbori.com) | | ⚠️<sup>(4)</sup> | |
| [Kiwi Browser](https://kiwibrowser.com) | | | |
Don't see your browser in the table? If it supports Tampermonkey/Userscript then the answer is likely **"YES"**.
<sup>1</sup> Follow [this guide](https://support.mozilla.org/en-US/kb/find-and-install-add-ons-firefox-android) to install Tampermonkey on Firefox Android.
<sup>1</sup> Follow [this guide](https://support.mozilla.org/en-US/kb/find-and-install-add-ons-firefox-android) to install Tampermonkey on Firefox Android. Its Gamepad API doesn't work properly so it might not recognize your controller.
<sup>2, 3</sup> Requires [Userscripts app](https://apps.apple.com/us/app/userscripts/id1463298887) (free & open source).
<sup>4</sup> NOT RECOMMENDED at the moment since its Userscript implementation is not working properly (see https://github.com/redphx/better-xcloud/issues/5 for full details). It's still my favorite app to play xCloud on because it's lightweight, supports Userscript (premium features, only $1.99) without having to install anything else. I built **Better xCloud** just so I could use it with Hermit.
<sup>5</sup> The "Force high quality codec" is unsupported (causes crashes).
<sup>4</sup> NOT RECOMMENDED at the moment since its Userscript implementation is not working properly (see https://github.com/redphx/better-xcloud/issues/5 for full details).
---
- **Kiwi Browser** is the best choice on Android. All features work, it means you can get 1080p stream + high quality codec profile (the best possible quality).
- **Better xCloud** also works on Android TV, but you'll have to sideload the browser APK and need a Bluetooth mouse if you want to interact with the Settings.
## Stream stats
<img width="500" alt="Stream stats" src="https://github.com/redphx/better-xcloud/assets/96280/70f4b1bb-4e3d-4f27-9b2f-afcfe1b8b261">
- While playing > `...` > `Stream Stats`.
- Double-click on the stats bar to show Settings dialog.
- This bar is updated every second.
- ⚠️ Using **Better xCloud** or showing the stats bar also affects the performance of the stream.
| Abbr. | Full name | Explain |
|------:|:-------------------|:-----------------------------------------------------------------------------------------------------------------------------------|
| FPS | Frames per Seconds | The number of decoded frames in the last second of the stream (equal to or lower than the FPS of the game) |
| DT | Decode Time | The average time it took to decode one frame in the last second (might be bugged [#26](https://github.com/redphx/better-xcloud/issues/26)) |
| RTT | Round Trip Time | The number of seconds it takes for data to be sent from your device to the server and back over (similar to ping, lower is better) |
| BR | Bitrate | The amount of data the server sent to your device in the last second |
| PL | Packets Lost | The total number of packets lost |
| FL | Frames Lost | The total number of frames dropped prior to decode or dropped because the frame missed its display deadline |
This info is provided by WebRTC API. You can use browser's built-in tool to see more info:
- Chrome/Edge/Chromium variants: `chrome://webrtc-internals`
- Firefox: `about:webrtc`
Colors:
- Red = Bad
- Yellow = Okay
- Green = Good
- White = Great
⚠️ Having this info on all the time will drain the battery faster, so I'd recommend only using it when having network problems.
## Capture screenshot
- This feature is only available in **Better xCloud**.
- Works on both desktop & mobile, but it was designed for mobile users.
- It's client-side only.
- It captures the current frame of the stream and saves it to a file. That means you won't get the raw quality like when you play on a console, but it's still better than using the built-in screenshot feature on your phone.
- Screenshot's resolution & quality depend on the quality of the stream at the moment.
- Screenshot doesn't include touch UI, notification bar... only the gameplay.
- There might be a slight delay.
- ⚠️ It's not possible to map the Share/Screenshot button on your controller to this feature.
### How to capture screenshot
1. Enable this feature in the Settings.
2. Play a game.
3. Tap once at the bottom left/right (depending on your setting) to show the Screenshot button.
4. Tap on that button to capture screenshot.
5. Screenshot will be saved by the browser.
6. You can double-tap that corner to capture screenshot.
<img width="600" alt="Screenshot button" src="https://github.com/redphx/better-xcloud/assets/96280/a911b141-5dc0-450a-aeac-30d9cf202b44">
## FAQ
1. **Will I get banned for using this?**
I think it's very unlikely that you'll get banned for using this. Most of the features only affect client-side, except for switching region of streaming server (you'll connect to another server instead of the default one). If you want to be safe just avoid using that. As always, use as your own risk.
I think it's very unlikely that you'll get banned for using this. Most of the features only affect client-side, except for switching region of streaming server (you'll connect to another server instead of the default one). If you want to be safe just avoid using that. As always, use it as your own risk.
2. **Why is it an Userscript and not extension?**
2. **Why is it an Userscript and not an extension?**
It's because not many browsers on Android support installing extensions (and not all extensions can be installed).
3. **I see "???" button instead of server's name**
3. **I see "???" button instead of the server's name**
That means Tampermonkey is not working properly. Please make sure you're using the latest version or switch to a well-known browser.
4. **Can I use this with the Xbox Android app?**
No you can't. You'll have to modify the app.
No, you can't. You'll have to modify the app.
5. **Will you able to enable "Clarity Boost" feature on non-Edge browsers?**
No. "Clarity Boost" feature uses an exclusive API (`Video.msVideoProcessing`) that's only available on Edge browser for desktop at the moment.
5. **Will you be able to enable the "Clarity Boost" feature on non-Edge browsers?**
No. The "Clarity Boost" feature uses an exclusive API (`Video.msVideoProcessing`) that's only available on Edge browser for desktop at the moment.
## User-Agent
You're no longer needed to change User-Agent since you can just use the **Force high quality stream** setting.
If your browser doesn't support **Force high quality stream** setting, try changing User-Agent to:
```
Mozilla/5.0 (SMART-TV; LINUX; Tizen 7.0) AppleWebKit/537.36 (KHTML, like Gecko) 94.0.4606.31/7.0 TV Safari/537.36
```
This will change your device to a Samsung TV running Tizen OS. It will improve the stream quality.
---
Change User-Agent to:
```
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 Edg/114.0.1823.67
```
This will trick xCloud into thinking you're using Edge browser on desktop.
Other options (only do one of these):
- Add ` smarttv` to switch to Smart TV layout.
- Add ` Xbox;` to become an Xbox console.
- Add ` 36102dd3-6953-45f6-8b48-031fb95e0e0d` to become a Logitech G Cloud device.
- Add ` 0ed22b6f-b61d-41eb-810a-a1ed586a550b` to become a Razer Edge device.
Moved to [wiki](https://github.com/redphx/better-xcloud/wiki/UserAgent).
## Acknowledgements
- [n-thumann/xbox-cloud-server-selector](https://github.com/n-thumann/xbox-cloud-server-selector) for the idea of IPv6 feature
- Icons by [Adam Design](https://www.iconfinder.com/iconsets/user-interface-outline-27)
## Disclaimers
- Use as your own risk.
- Use as it your own risk.
- This project is not affiliated with Xbox in any way. All Xbox logos/icons/trademarks are copyright of their respective owners.

5
better-xcloud.meta.js Normal file
View File

@ -0,0 +1,5 @@
// ==UserScript==
// @name Better xCloud
// @namespace https://github.com/redphx
// @version 1.8
// ==/UserScript==

File diff suppressed because it is too large Load Diff