Streaming

Streaming

Here's how to stream an interactive Windows desktop from one Peer to another.

๐Ÿšง

Platform limitations on streaming

In its current beta state, the Rainway SDK only supports streams

  • from a Windows desktop, using the Native Runtime,
  • to a web browser, using the Web Runtime.

So make sure you have both of these set up if you want to try out streaming.

If you want to try streaming without writing any code yourself, you can install the C# demo on a Windows desktop, and use the web demo page to connect to it from a browser on another computer.

Before a stream is initiated, the peer-to-peer connection is symmetrical. Once streaming begins, this changes. The streaming Peer (native app) is referred to as the host, and the Peer consuming the stream (the host's web app) is the client.

A stream may be initiated in two ways: either the host announces it, or the client requests it. Both methods are outlined below.

Announced streams

A host has the ability to start a stream to a remote peer.

When a host initiates a stream, the onStreamAnnouncement handler is invoked for the client, in which the client can decide to "join" the stream or ignore it.

RainwayRuntime.initialize({
    // ...
    onStreamAnnouncement: async (runtime, peer, announcement) => {
        announcement.info; // Contains some info about the stream.
        // Decide to join the stream:
        const stream = await announcement.join();
        this.handleNewStream(stream);
    },
    // ...
})

Requested streams

In this method, the client will call requestStream on the Peer it would like to host a stream.

The client will need to provide an InputLevel value, which is a bitmask describing how much control to request over the host's desktop.

const stream = await peer.requestStream(inputLevel);

If the host accepts this request, this promise resolves to a RainwayStream object, which can be used to display and manage the established stream. If the host rejects the request, the promise on the client's side fails with a supplied "reason" string.

Displaying a stream

A RainwayStream object has a .container property. This is an HTMLDivElement that the client can attach to the DOM to display a Rainway stream in a web app.

const wrapper = document.querySelector(".stream-wrapper");
wrapper.appendChild(stream.container);

It's the client's responsibility to remove this DOM node (or display an overlay over it, etc.) when the stream ends.

๐Ÿ“˜

Note for React users

Rainway supplies a React component that renders a RainwayStream. See Getting Started with React for more info.

Stream controls

These Web Runtime methods on a RainwayStream provide some useful controls:

  • pause(): stop processing incoming media. The stream will appear frozen.
  • play(): start processing incoming media. The stream will continue.
  • leave(): inform the host that we no longer care about the stream, and it's allowed to stop streaming.
  • requestFullscreen(): display the stream container full-screen.
  • enableVideoStatsOverlay() / disableVideoStatsOverlay(): toggle a debug stats overlay.

Did this page help you?