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 stream event is raised for the client, in which the client can decide to "join" the stream or ignore it.

// given some peer object (see the previous tutorial pages for an example)

// add a handler for the announcement event, and join the stream it's announcing
peer.addEventListener("stream-announcement", async (ev) => {
  // the returned stream can now be stored and used
  const stream = await ev.join();
});

Created streams

In this method, the client calls createStream on the Peer it would like to host a stream.

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

// given some peer object (see the previous tutorial pages for an example)

// attempt to create a stream
const stream = await peer.createStream({ permissions: InputLevel.All });

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

Displaying a stream

An InboundStream 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.

// building on the above sample
// attach the container to the DOM
document.body.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 an InboundStream. See Getting Started with React for more info.

Inbound Stream controls

These Web Runtime methods on an InboundStream provide some useful controls:

• pause(): stop processing incoming media. The stream will appear frozen.
• play(): start processing incoming media. The stream will continue.
• close(): 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.