Rendering to Browser Windows
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.
