Rendering to Browser Windows
Problems running the pipelines shown on this page? Please see our
GStreamer Debugging guide for help
.
Rendering to Browser Windows
To be able to render in the browser windows with the rrbrowsersink element is important to modify in the .js file the following
1. You need a video element in your body. Give it a known id. None of the parameters other parameters are mandatory.
<video autoplay playsinline controls class="browser-video" id="camera"></video>
2. In the <script> section of your page, create an instance of a RrBrowserSink and connect the stream to the video element using its id.
import { RrBrowserSink } from "./rrbrowsersink.js";
//...
const rbs = new RrBrowserSink();
const url = "http://127.0.0.1:8080/endpoint"; // IP, PORT and ENDPOINT of the rrbrowsersink pipeline
const video_id = "camera"; // The ID assigned to the <video> element
rbs.connect(video_id, url);
Advanced users can interact with the rrbrowsersink element directly using WebRTC and the WHEP protocol.
Below is an example of a custom WHEP client.
1. Instance a RTCPeerConnection and assign the stream to the video element.
const pc = new RTCPeerConnection({ bundlePolicy: "max-bundle" });
pc.addTransceiver("video");
pc.ontrack = (event) => {
if (event.track.kind === "video") {
document.getElementById("camera").srcObject = event.streams[0];
}
};
2. Make standard [WHEP](https://www.ietf.org/archive/id/draft-murillo-whep-03.html)
requests to the rrbrowsersink element. You don't need to do them manually, there are
many utilities to perform them for you.
In this example we are using @medooze WHEP helper from (whip-whep-js), but any whep utility should work.
import { WHEPClient } from "./whep.js";
//...
const whep = new WHEPClient();
const url = "http://127.0.0.1:8080/"; // IP and PORT of the rrbrowsersink
whep.view(pc, url, null);
Execute the GStreamer pipeline
For example, you can use the following pipeline to open a camera stream in the browser by using rrbrowsersink.
gst-launch-1.0 v4l2src ! queue max-size-buffers=3 leaky=downstream ! videoconvert ! queue ! x264enc key-int-max=30 speed-preset=ultrafast tune=zerolatency bitrate=5000 ! h264parse ! rrbrowsersink port=8080 reliable=false
Example output
You can load video files and obtain the following output.
