Windows touch do not work on PixelStreaming (Webrtc) Page

Development Programming & Scripting
,
1

I am an Unreal Engine developer and use the Pixel Streaming plugin to stream Unreal built Game, to play in browser. They use mostly touchscreen. The touch input works absolutely fine on the browser on mobile devices, but on PC the touch inputs do not work. It is like browser is taking over the input, when i Pinch Zoom the streaming window, instead of zooming inside the game it zooms the whole webpage, swiping opens new webpage etc. The one clue i had was to make the whole page touch disabled, so with my limited knowledge of html/css i managed to make it touch disabled but now whole page is touch disabled including the game. You guys have any clue how to solve this riddle?
Thanks

2

Hello @liyonggangUe

Touch inputs might not be working properly on native Pixel Streaming. Here’s some suggestions to address this issue:

  1. Enable Touch Inputs for the Game Container Only:

    • Identify the HTML element that contains your game’s streaming window.
    • Use CSS to enable touch actions specifically for this element. For example:
      #game-container {
  touch-action: none;
}
    • Replace #game-container with the actual ID or class of your game container.

  2. Disable Touch Actions on the Rest of the Page:

    • Apply a global CSS rule to disable touch actions, then override it for the game container. For example:
      html, body {
  touch-action: pan-x pan-y;
}
#game-container {
  touch-action: none;
}

  3. Handle Touch Events in JavaScript:

    • If CSS isn’t enough, use JavaScript to manually handle touch events.
    • Attach event listeners for touch events like touchstart, touchmove, and touchend.
    • Prevent default behavior to stop the browser from taking over. For example:
      var gameContainer = document.getElementById('game-container');
gameContainer.addEventListener('touchstart', function(e) {
  e.preventDefault();
  // Your touch handling logic
}, {passive: false});

  4. Ensure Proper Scaling:

    • Set the viewport properties correctly to prevent unintentional interactions.
    • Use the <meta> tag to set viewport properties. For example:
      <meta name="viewport" content="width=device-width, initial-scale=1.0">

I hope these suggestions fix your issue. If you’re interested in another solution with touch input support, let me introduce Vagon Streams, an innovative streaming technology that could streamline your game development and pixel streaming process.

At Vagon Streams, we offer effortless streaming for applications on any device, with no code configuration. This means you can make any application accessible globally without the problems of complex configurations. Just activate the plugin, and you’re ready to stream!

You don’t just pixel stream on Vagon; you get a powerful cloud-based solution that adapts to your users’ network conditions, ensuring a no-latency experience and instant launch for up to 10,000 concurrent users. Plus, you can stream your application in 4K & 60 FPS from more than 25 regions globally with just one click.

If you would like to do a test drive, please let me know. Or, you can create your account and easily start your first Stream anytime you want. :slight_smile: