Forem: PiterDev

Video streaming tutorial. Javascript webrtc streaming example 🌐LibreRemotePlay

PiterDev — Fri, 28 Mar 2025 15:00:00 +0000

Hi, in this post I will be covering only WebRTC simple setup for streaming using getDisplayMedia() (screen) but is also valid for getUserMedia() (camera, microphone).

First if you are intereseted in more WebRTC explanations/tutorials this is part of a serie of WebRTC articles for JavaScript and Golang (This includes general knowledge about WebRTC).

In second place I will introduce you the fundamentals about MediaChannels , what they are and how to use them in your webapp.

In a Peerconnection we can create two types of channels, DataChannels (used for passing general purpose data between peers) and MediaChannels (for media data like video/audio). The MediaChannels are negociated before the stablish of the connection but its paremeters can change with the time automatically or manually.

The streaming using MediaChannels usually work well just 📦 out of the box but if your webapp needs specific behaviour that differs from the default you can make use of the video/audio codecs.

The are a lot of codecs to use but you need to know that not all codecs are always supported (they are dependent to the software/hardware of the user) but no worries because the codec negociation is handled by the browser like magic 👌. Here you have a list of the codecs available for WebRTC.

To work with codecs we will need an Array of prefered codecs ordered in preferency. Ex: [The codec I want the most, ..., Other codecs, ..., Worst codec]. The codecs preferences must be set by the client (the one that want to receive the video/audio).

Now that you have learned this little general information about MediaChannels we will see some examples.

⭐ This are modified and simplified examples of "LibreRemotePlay" my software product that tries to be an alternative to Steam Remote Play. If you are interested to learn more about how it works I will continue this serie, but for the moment you will have the codebase to check it out

📘 Code example for Host Peer (who shares screen)

In this example signalization is made using a WebSocket, I call it ws()

Next we will write all the logic for our JS host


// PeerConnection declaration (note that you will need to specify iceServers)
let peerConnection = peerConnection = new RTCPeerConnection({iceServers});;

// This function returns the media stream generated by getDisplayMedia or
// undefined if the user rejects to share screen.
// Video and Audio properties can be objects to specify some parameters
// like resolution, frame rate, ...
async function getDisplayMediaStream(resolution, idealFrameRate maxFramerate) {
    try {
        const mediastream = await navigator.mediaDevices.getDisplayMedia({
            video: true,
            audio: true,
        });

        return mediastream;
    } catch (e) {
        return undefined;
    }
}

peerConnection.onicecandidate = async (event) => {
    if (event.candidate) {
        const data = {
            type: 'candidate',
            candidate: event.candidate.toJSON(),
            role: 'host'
        };

        return ws().send(JSON.stringify(data));

    }

    const answer = peerConnection?.localDescription?.toJSON();
    const data = {
        type: 'answer',
        answer,
        role: 'host'
    };

    return ws().send(JSON.stringify(data));

};

let offerArrived = false

async function onSignalArrive(data) {

    const { type, offer, candidate, role } = JSON.parse(data);

    if (role !== 'client') return;

    if (type === "candidate") {
        try {peerConnection.addIceCandidate(candidate)} catch {/** */}
        return
    }

    if (type !== 'offer') return;
    if (!offer || offerArrived) return;

    try {
        await peerConnection.setRemoteDescription(offer);
    } catch (e) {
        console.error(e)
        return
    }
    offerArrived = true;

    const stream = await getDisplayMediaStream(resolution, idealFrameRate, maxFramerate);

    // Here I add MediaStream tracks to the WebRTC Peerconnection
    stream?.getTracks().forEach((track) => {
        if (!stream) return;
        peerConnection?.addTrack(track, stream);
    });

    try {

        await peerConnection.setLocalDescription(await peerConnection.createAnswer());

    } catch (e) {
        console.error(e)
        return
    }

}


const cllbck = (ev) =>  onSignalArrive(ev.data)
ws().addEventListener("message", cllbck)
unlistenerStreamingSignal = () => ws().removeEventListener("message", cllbck)
return

📘 Code example for Client Peer (who receives video/audio stream)

In this example signalization is made using a WebSocket, I call it ws()

Declaring HTML video element

<video id="video-streaming"></video>

Declaring our prefered codecs

const DEFAULT_PREFERED_CODECS = ["video/VP9","video/AV1","video/H264", "video/VP8"]

The order of preference is: "VP9", "AV1", "H264" and "VP8"

First we will declare a function to get our prefered codecs in order

// This function is a little modification of one that you can find in MDN
// docs
export function getSortedVideoCodecs() {

    const codecs = RTCRtpReceiver.getCapabilities("video")?.codecs;

    if (!codecs) return [];

    return codecs.sort((a, b) => {
      const indexA = DEFAULT_PREFERED_CODECS.value.indexOf(a.mimeType);
      const indexB = DEFAULT_PREFERED_CODECS.value.indexOf(b.mimeType);
      const orderA = indexA >= 0 ? indexA : Number.MAX_VALUE;
      const orderB = indexB >= 0 ? indexB : Number.MAX_VALUE;
      return orderA - orderB;
    });
}

And now all the logic for the JS client


// PeerConnection declaration (note that you will need to specify iceServers)
let peerConnection = peerConnection = new RTCPeerConnection({iceServers});;

// Get the video element
const videoElement = document.getElementById("video-streaming");

// Add transceiver to receive video (if you don't want codec preferences
// is not needed to declare the transceiver)
const transceiver = peerConnection.addTransceiver("video", { direction: "recvonly" });

// Set the codec preferences to the transceiver (this is the prefered
// syntax, a lot of StackOverflow answers are not updated and say that 
// you must modify the raw SDP messages. These days setCodecPreferences
// is supported in almost every modern browsers)
transceiver.setCodecPreferences(getSortedVideoCodecs());

peerConnection.onicecandidate = (e) => {
    if (!e.candidate) return;

    const data = {
        type: 'candidate',
        candidate: e.candidate.toJSON(),
        role: 'client'
    };

    ws().send(JSON.stringify(data));
};

peerConnection.ontrack = (ev) => {

    if (ev.streams && ev.streams[0]) {
        // Setting videoElement source and automatically play video
        videoElement.srcObject = ev.streams[0];
        videoElement.play();
    } else {
        if (!inboundStream) {
        // Setting videoElement source and automatically play video
            inboundStream = new MediaStream();
            videoElement.srcObject = inboundStream;
            videoElement.play();
        }
        // Adding the track to the MediaStream
        inboundStream.addTrack(ev.track);
};

// Create the offer indicating that we want to receive audio/video
const offer = await peerConnection.createOffer({
    offerToReceiveAudio: true,
    offerToReceiveVideo: true,
    iceRestart: true
});

await peerConnection.setLocalDescription(offer);

const data = {
    type: 'offer',
    offer: offer,
    role: 'client'
};

ws().send(JSON.stringify(data));

async function onSignalArrive(data) {
    const { type, answer, candidate, role } = JSON.parse(data);

    if (role !== 'host') {
        return;
    }

    switch (type) {
        case 'answer':
            if (!answer) return;
            await peerConnection.setRemoteDescription(answer);
            break;
        case 'candidate':
            try {await peerConnection.addIceCandidate(candidate)} catch {/** */}
            break;
    }
}

const cllbck = (ev) =>  onSignalArrive(ev.data);
ws().addEventListener("message", cllbck);
unlistenerStreamingSignal = () => ws().removeEventListener("message", cllbck);

With this code you can start implementing your own video streaming solution, I hope you liked this little tutorial. ❤

If you want more WebRTC tutorials tell me at the comments I will read them 👀.

Sources of information:

✨Gleam javascript interop 🤝

PiterDev — Wed, 13 Nov 2024 08:00:00 +0000

If you are here you may have heard about the Gleam programming language.

If not you can check my previous post 👉 What is gleam language used for ❓.

Gleam has as targets Erlang & JavaScript, in this article we will cover how to integrate JavaScript in a Gleam codebase and the inverse (always in the context of targeting JavaScript with Gleam).

First we will need in our Gleam project to add this line to the gleam.toml:

target = "javascript"

Javascript inside Gleam

If we have a Gleam codebase and we need to do some bings or access a third-party module (for example: express) from Gleam that is from JS.
The way to do this type of interop is as follows:

@external(javascript, "<path_to_js_file>", "<exported_function_name>")
fn <exported_function_name>(<parameters>) -> <return_type>

now lets see an example from a project I am building, electron-gleam-quick-start is a template for electron prepared to be used with Gleam.

@external(javascript, "./js_wrapper/electron.js", "onWindowAllClosed")
fn on_window_all_closed(callback: fn() -> Nil) -> Nil

in this example we are going to select in the file "./js_wrapper/electron.js" the function onWindowAllClosed that receives a callback function and doesn't return anything.

and the JS function is defined in the electron.js file as

/**
 * App on window all closed
 * @param {Function} callback - Callback function
 * @returns {void}
 */
export function onWindowAllClosed(callback) {
    if (!app) return console.error("Error: Electron app is not defined");

    app.on("window-all-closed", function () {
        callback();
        if (process.platform !== "darwin") app.quit();
    });
}

Gleam in JavaScript

To import our Gleam code from JavaScript is very easy, when you build using gleam build -t javascript the necesarry files will be located in \build\dev\javascript<package_name> you only need to import it like this example:

// JS File

import { renderer } from "./src_gleam/build/dev/javascript/main/renderer.mjs";

renderer()

// Gleam FIle: /src_gleam/src/renderer.gleam

import gleam/io

pub fn renderer() {
  io.print("Hello from renderer")
}

I hope you like this little tutorial about using the FFI capabilities of Gleam to integrate it with JS in a bidirectional way.

If you have any question leave it in the comments. I will answer as fast as I can ♥.

👉 What is gleam language used for ❓

PiterDev — Tue, 29 Oct 2024 08:00:00 +0000

If you are here you may have heard about the Gleam programming language.

Gleam as it says in their website is a friendly language for building type-safe systems that scale!.

It is inspired by languages like Rust, follows a functional paradigm similar to Elixir and it is calified by the authors as production ready.

One of the main features of the language is that can be runned on the BEAM (the VM used to run all the Erlang family languages and it is known by they good performance on concurrency enviroments) or Javascript (that can be runned on your favorite runtime or the browser).

Thanks to the Erlang target Gleam can be deployed to every machine that has a BEAM VM. And thanks to the Javascript target you can deploy to NodeJS, Deno, Browser and Bun (Not sure at 100% about this last).

So you can go ahead and do a WebApp full on Gleam for the server and the client. You can also do an incremental migration of a project from JS to Gleam or from Erlang to Gleam.

Gleam works with modules so you can develop a module and then integrate it on an existing codebase.

There are a lot of things built with Gleam and more that will be in the future because is a really interesting language for those who already know how to code in Elixir, Erlang or JS.

Right now I am doing my first Gleam project electron-gleam-quick-start a template to start creating Desktop APPs using Gleam and based in Electron. This will be the first template project that includes the most Gleam experience to Electron.

If you want to see a tutorial on how to use Gleam to extend an existing JS codebase leave a comment below and I will try to bring tou you as fast as I can :)

How to run Orbit by 🦊Mozilla in Chrome based browsers

PiterDev — Thu, 24 Oct 2024 07:00:00 +0000

Orbit is a Firefox add-on that uses AI technology to summarize and answer queries about web content, such as articles and videos. It works on various websites including Gmail, Wikipedia, NY Times, YouTube, and more. The service provides summaries and answers without requiring account creation or saving session data.

If you go to the Orbit ofical website it will say that it is only available for Firefox but here I will cover how to use it on Chromium based browsers (Chrome, Brave, Edge). Disclaimer: some functionality may not work, for example in my experience the Youtube resume tool didn't work at first but now it works well.

First you have to go to the Firefox store extension page, here we will click on Download File this will download an .xpi file. This type of file can be uncompressed using programs like 7zip, Winrar, etc …

Now you go to your Chromium based browser to the extensions config page in my case (brave://extensions/)

Here you have to enable the developer mode and click on load uncompressed and select the folder extracted from the .xpi file.

Nice!! Now you have the extension in your browser. To check if works see if it is enabled and re-visit the orbit page and should appear in the upper right corner of the browser.

I hope you liked this littel tutorial :)

Showcasing ReverUI 💻< 3kb React Alternative

PiterDev — Tue, 08 Oct 2024 07:00:00 +0000

For months I have been slowly building my own frontend framework (it is 10 times smaller than React and without VDOM) 👇

You obviously know React, is one of the most famous frontend frameworks along with Vue and Angular. 🏆

I have been using React since I started to learn how to do web apps and later when I want more complex apps using Nextjs.

But since I have tried others like Svelte/Sveltekit or Vue/Nuxt I have learned that React in spite of being the most popular it hasn't as good DX as those (at least in my opinion). And I bet more people will agree with me.

With this wave of new frontend framewroks that have arrived "recently" with some examples as Qwik, Solid or Astro, I was curious of how JSX , components, state and all around this works.

For this reason and after reading some articles 📘 related, I went direct to try to configure 👨‍💻 Vite to use my own JSX and I achieve my first static components.

Later step by step I achieve to implement a kind of useState() of React that then I migrate to useSignal() and also useEffect(). All perfect but the component will do a full re-render in every state change 😭.

I didn't know how could to do "smart" renders or selectives, then I learn about the Vite pre-proccess capability that make me able to do some things that cheat at the developer and changes the source code under the hood. This way I create IDs for the states that later will be registered on the DOM components and could be used to track the HTMLElements and do fast compares.

🚩
In this way I also learned very interesting beneficts of the Arrow Functions over "traditional functions". (maybe I will do an article about this)

But I am not gona talk about all the aspects of the project in this post because is a lot to tell.

Now a lot of months later my toy project is already more than that. Now a days you can create complex frontends with components, nesting, effects, custom hooks, SPA router, Vite support and very lightweight.

If you are interested in the project (that by the way I have called ReverUI) to read the code, using it for a project, to give a star ⭐ on Github or because it comes from your heart, here are some links:

Github ReverUI: https://github.com/PiterWeb/ReverUI
Github ReverRouter: https://github.com/PiterWeb/ReverRouter
(Built in ReverUI) ReverUI Web: https://reverui.vercel.app/

Now I will show you some code examples.

Counter Component

Other Counter with effects

import { $useEffect, $useSignal } from "reverui";

export default function StateFullApp() {
    $useEffect(() => {
        console.log("Mounted");
    });

    const counter = $useSignal(0);

    $useEffect(() => {
        console.log("Counter value changed to " + counter.value);
    }, [counter]);

    return <div>...</div>;
}

SPA Router

The ReverRouter supports Lazy Loading of routes and it is <1kb of size

// main.ts
import { $UI } from "reverui"; 
import { $lazy, $Router } from "reverouter";

$Router($UI ,{
    "/": () => import("./Banner"), // Normal Route
    "/todo": $lazy(() => import("./Todo")), // Lazy Route
    "/counter": $lazy(() => import("./Counter")), // Lazy Route
    "/counter-with-hook": $lazy(() => import("./CounterWithHook")), // Lazy Route
});

I hope you liked this article, I am waiting to see if someone try this Lib and I will be very thankfull if you give some feedback in the comments ♥

TypeScript WebRTC. How to implement a Deno Signaling Server 🌐GameLinkSafe

PiterDev — Tue, 17 Sep 2024 07:00:00 +0000

This is a complementary post to Golang WebRTC | How to use Pion

What is a signaling server 🤷‍♂️ ?

If we are talking about a webrtc signaling server are those servers that make posible the communication of two peers that want to share ICE candidates and other data before connecting between itselfs.

Why are soo important ❓

Signaling servers are very important if we want to ensure a good UX on our product based on WebRTC. This is because the other ways of sharing this data between peers would be dependent on the user who want to use the APP.

What types of signaling servers exist 💻 ?

Basically you can implement however you want your signaling server but the most popular ways are using:

REST API
Websockets

Personally I prefer Websockets because of the abillity of two-way communication and the maturity of the libs on the main programming languages. If we talk about two-way communication we can also have Server Sent Event (SSE) but these might be a little dificult to use/implement if you are not using languages like JavaScript or TypeScript.

Code example for a Websocket WebRTC signaling server 📘

Now we are going to check how we can make a Websocket server to do signaling using TypeScript on Deno because DenoDeploy has a very good free tier to do this type of things. Also denodeploy is very usefull due to the lots of regions that use, ensuring that you can do fast signaling in many parts of the world.

This example is a simplification of my own signaling server that I am creating for GameLinkSafe

GameLinkSafe is an Desktop APP that replace Hamachi in the Gaming enviroment and makes easy to play LAN games through the internet.

If you want to help me with the launch consider pre-registering and share the website with more people ♥

Well, this example of code is done using oak web framework and we will cover all the parts with some explanations:

First we will import oak version 16.1.0

import { Application, Router } from "https://deno.land/x/oak@v16.1.0/mod.ts";

Next we will define our SignalMessage interface that we will share between the client/server websocket.

The discriminator field will be used to classify our signal_message if we are going to use the WS for more things than signaling.

In msg_target we will use the ID of the receiver or "*" to target all clients.

The msg_source always will be the ID of the sender.

Our signal is a simple string.

And for the last our signal_types that will be offer, answer, candidate and close. These are the posible actions that can have our signals.

interface SignalMessage {
    discriminator: "signal_message";
    signal: string;
    msg_target: string;
    msg_source: string;
    signal_type: "offer" | "answer" | "candidate" | "close";
}

function instanceOfSignalMessage(object: object): object is SignalMessage {
    return "discriminator" in object;
}

function isBroadcast(message: SignalMessage): boolean {
    return message.msg_target === "*";
}

Now we will create an interface that extends the websocket to store there the user_id associated to the websocket.

interface SignalWebSocket extends WebSocket {
    user_id: string;
}

Then we need a Map with the connected clients using as their key the user_id and value the SignalWebSocket that we define before.

const clientsConnected = new Map<string, SignalWebSocket[]>();

Now it is the turn for our server inicialization

const app = new Application();
const port = 8080;
const router = new Router();

In this case because of the use of Deno Deploy where we have different instances of our service working in different regions we will need a thing called BroadcastChannel this can be used to sync all the instances.

So we will create a channel called "signal_channel" and we will listen for it to search if the message is for one of our connected clients. And later when we try to send a message and we do not have that target we will post the signal data to the "signal_channel"

Note that this specific part of the broadcast channel is not required if you plan to host this outside of the deno deploy service.


function GetBroadCastChannel() {
    try {
        const channel = new BroadcastChannel("clients_channel");

        channel.onmessage = (e) => {
            const socket = e.data as SignalWebSocket;
            const user_id = socket.user_id;

            const currentClients = clientsConnected.get(user_id);

            if (currentClients && currentClients.length > 0) {
                clientsConnected.set(user_id, [...currentClients, socket]);
            } else {
                clientsConnected.set(user_id, [socket]);
            }
        };

        return channel;
    } catch {}
}

const channel = GetBroadCastChannel();

This will be the function that will try to send the message

function send_signal(message: object) {
    if (instanceOfSignalMessage(message)) {
        const msg = JSON.stringify(message);

        if (isBroadcast(message)) {
            clientsConnected.forEach((sockArr) => {
                sockArr.forEach((s) => s.send(msg));
            });
            return;
        }

        const sockets = clientsConnected.get(message.msg_target);

        sockets?.forEach((s) => s.send(msg));
    }
}

The websocket endpoint will be like this. Here we handle the user_id, the websocket lifecycle and finally we setup and start our server

router.get("/ws", (ctx) => {
    const socket = ctx.upgrade() as SignalWebSocket;

    // implement authentication here

    const user_id = ctx.request.url.searchParams.get("user_id");

    if (user_id === null) {
        return;
    }

    socket.user_id = user_id;

    // when a new user logs in
    socket.onopen = () => {
        console.log(`New client connected: ${user_id}`);
        const currentClients = clientsConnected.get(user_id);

        if (currentClients && currentClients.length > 0) {
            clientsConnected.set(user_id, [...currentClients, socket]);
        } else {
            clientsConnected.set(user_id, [socket]);
        }

        if (channel !== undefined) {
            channel.postMessage(socket);
        }
    };

    // when a client disconnects, remove them from the connected clients list
    socket.onclose = () => {
        console.log(`Client disconnected: ${user_id}`);
        clientsConnected.delete(user_id);
    };

    // broadcast new message if someone sent one
    socket.onmessage = (m) => {
        const data = JSON.parse(m.data);

        console.log(data);

        send_signal(data);

        if (instanceOfSignalMessage(data) && data.signal_type === "close") {
            const sockets = clientsConnected.get(user_id);

            const remainingSockets = sockets?.filter((s) => s !== socket) ?? [];

            clientsConnected.set(user_id, remainingSockets);
            socket.close();
        }
    };
});

app.use(router.routes());
app.use(router.allowedMethods());

console.log("Listening at http://localhost:" + port);
await app.listen({ port });

Obviously this implementation can be better in terms of optimization, specially in terms of the BroadcastChannel but can be a good base to start building your own signaling server. I hope you enjoy this little tutorial.

Before finishing this post I will say that I am looking for create a second part using Go to implement a simple client for this server using the Gorilla websockets with code examples. So if you want that second part the fastest I can, leave me comments with tons of love 😉

I always read and answer if you want to ask about something that is not very clear or you want more expanded explanations.

Golang WebRTC. Como usar Pion 🌐LibreRemotePlay

PiterDev — Sun, 14 Jul 2024 08:47:02 +0000

¿ Porqué debería elegir Go para crear una aplicación WebRTC 🤷‍♂️?

WebRTC y Go es una combinación poderosa, puedes desplegar pequeños binarios en cualquier sistema operativo soportado por el compilador de Go. Y por el hecho de ser compilado acostumbra ser más rápido que muchos otros lenguajes, así que es ideal si quieres procesar comunicaciones en tiempo real como WebRTC.

(Al menos este es mi punto de vista después de crear un proyecto usando estas 2 tecnologías)

¿ Que es Pion WebRTC ?

Pion es una implementación de WebRTC en Go puro (aunque algunás parte más "externas" si que pueden depender de CGo dependiendo del sistema operativo), por ello es muy útil si quieres tiempos de compilación reducidos, binarios más pequeños y mejor soporte multi plataforma que si usase CGo.

Entendiendo las conexiones extremo a extremo WebRTC

¿ Sabes como funciona WebRTC y todas sus partes ? Ahora te explicaré una versión simplificada de ello limitado al contenido de este tutorial.

ICE (Interactive Connectivity Establishment)

Es un entorno de trabajo usado por WebRTC, la función principal de este es dar candidatos (posibles rutas o IPs) para que 2 dispositivos o más se puedan conectar incluso si están detrás de un firewall o no están expuestas a internet. Esto se consigue haciendo uso de STUN y TURN.

STUN

Es un protocolo y un tipo de servidor usado por WebRTC que es adecuado para manejar conexiones que no estén detrás de un NAT restrictivo. Esto es porque algunos NAT depende de como se hallen configurados no permitirán que se resuelvan los ICE candidates.

Es muy fácil empezar a experimentar con ellos ya que existen muchas listas de servidores STUN públicos disponibles.

TURN

TURN es como STUN pero mejor. La principal diferencia es que puede evadir las restricciones de los NAT que hacen a STUN no funcionar correctamente. Además también existen servidores TURN públicos y algunas compañias los ofrecen gratuitamente.

Ambos TURN y STUN pueden ser auto-alojados (lo que se conoce comúnmente como self-hosting), el proyecto más popular que he encontrado es coturn

Canales (Channels)

Son flujos bidireccionales de datos proporcionados por WebRTC que pueden usar conexiones UDP o TCP. A estos te puedes suscribir o escribir en ellos.

Además generalemente existen 2 tipos: Datachannels(datos binarios) y Mediachannels(video/audio).

SDP

Es un formato que describe la conexión: canales que se van a usar, codecs, encoding, ...

Señalización

Método escogido para intercambiar los SDPs y los ICEcandidates entre extremos para establecer una conexión. Pueden usar peticiones http, copiar y pegar manuales, websockets, ...

Ejemplo de código para el extremo de cliente 📘

Ahora vamos a explorar un poco de código, este es un ejemplo que está extraído y simplificado de la base de código del repositorio de Github de "LibreRemotePlay"

LibreRemotePlay es mi proyecto personal que intenta ser una alternativa abierta a Steam Remote Play (un servicio para jugar juegos cooperativos locales de forma online usando conexiones de extremo a extremo [P2P])

La función principal de este ejemplo será la de conectarnos a un extremo WebRTC que actue como servidor (llamando servidor a aquel que inicia la conexión) y mandando números a través de un Datachannel y escuchando los datos recividos en otro Datachannel.

Primero declararé la variable del Datachannel y una variable de string como una forma genérica de señalización (en el caso real de la aplicación se usa un copia/pega manual basado en las necesidades de la idea de mi producto pero puede ser implementado de muchas otras maneras)

var offerEncodedWithCandidates string //OfferFromServer
var answerResponse := make(chan string) //AnswerFromClient

y después vamos a añadir una función que nos será de utilidad para convertir a base64 y comprimir nuestras "señales" (aunque es opcional)

// SPDX-FileCopyrightText: 2023 The Pion community <https://pion.ly>
// SPDX-License-Identifier: MIT

// Package signal contains helpers to exchange the SDP session
// description between examples.
package <package>

import (
    "bytes"
    "compress/gzip"
    "encoding/base64"
    "encoding/json"
    "io"
)

// Allows compressing offer/answer to bypass terminal input limits.
const compress = true

// signalEncode encodes the input in base64
// It can optionally zip the input before encoding
func signalEncode(obj interface{}) string {
    b, err := json.Marshal(obj)
    if err != nil {
        panic(err)
    }

    if compress {
        b = signalZip(b)
    }

    return base64.StdEncoding.EncodeToString(b)
}

// signalDecode decodes the input from base64
// It can optionally unzip the input after decoding
func signalDecode(in string, obj interface{}) {
    b, err := base64.StdEncoding.DecodeString(in)
    if err != nil {
        panic(err)
    }

    if compress {
        b = signalUnzip(b)
    }

    err = json.Unmarshal(b, obj)
    if err != nil {
        panic(err)
    }
}

func signalZip(in []byte) []byte {
    var b bytes.Buffer
    gz := gzip.NewWriter(&b)
    _, err := gz.Write(in)
    if err != nil {
        panic(err)
    }
    err = gz.Flush()
    if err != nil {
        panic(err)
    }
    err = gz.Close()
    if err != nil {
        panic(err)
    }
    return b.Bytes()
}

func signalUnzip(in []byte) []byte {
    var b bytes.Buffer
    _, err := b.Write(in)
    if err != nil {
        panic(err)
    }
    r, err := gzip.NewReader(&b)
    if err != nil {
        panic(err)
    }
    res, err := io.ReadAll(r)
    if err != nil {
        panic(err)
    }
    return res
}

Ahora vamos a importar Pion

import (
    ...
    "github.com/pion/webrtc/v3"
)

Y ahora haremos la inicialización


// slice de ICECandidates 
candidates := []webrtc.ICECandidateInit{}

// Config struct con los servidores STUN
config := webrtc.Configuration{
        ICEServers: []webrtc.ICEServer{
            {
                URLs: []string{"stun:stun.l.google.com:19305", "stun:stun.l.google.com:19302"},
            },
        },
    }

// Creación de la conexión
peerConnection, err := webrtc.NewAPI().NewPeerConnection(config)
if err != nil {
        panic(err)
}

// Manejo del cerrado de conexión
defer func() {
        if err := peerConnection.Close(); err != nil {
            fmt.Printf("cannot close peerConnection: %v\n", err)
        }
}()

// Registrar los Datachannels y especificar su funcionamiento
peerConnection.OnDataChannel(func(d *webrtc.DataChannel) {

     if d.Label() == "numbers" {

       d.OnOpen(func() {

         // Mandar número 5 por el Datachannel "numbers"
          err := d.SendText("5")

          if err != nil {
              panic(err)
          }

       })
          return
    }

   if d.Label() == "other" {

      gamepadChannel.OnMessage(func(msg webrtc.DataChannelMessage) {
                // Listening for channel called "other"
        fmt.Println(msg.Data)

      })

   }


})

// Escuchar por los ICEcandidates
peerConnection.OnICECandidate(func(c *webrtc.ICECandidate) {

   // When no more candidate available
   if c == nil {
    answerResponse <-signalEncode(*peerConnection.LocalDescription()) + ";" + signalEncode(candidates)
    return
   }

   candidates = append(candidates, (*c).ToJSON())

})

// Esto notificará cuando un extremo se ha conectado/desconectado
peerConnection.OnConnectionStateChange(func(s webrtc.PeerConnectionState) {
    fmt.Printf("Peer Connection State has changed: %s\n", s.String())

    if s == webrtc.PeerConnectionStateFailed {

        peerConnection.Close()

    }
})

// Separamos la oferta y los candidatos codificados

offerEncodedWithCandidatesSplited := strings.Split(offerEncodedWithCandidates, ";")

    offer := webrtc.SessionDescription{}
    signalDecode(offerEncodedWithCandidatesSplited[0], &offer)

    var receivedCandidates []webrtc.ICECandidateInit

    signalDecode(offerEncodedWithCandidatesSplited[1], &receivedCandidates)

// Then we set our remote description
    if err := peerConnection.SetRemoteDescription(offer); err != nil {
        panic(err)
    }
// After setting the remote description we add the candidates
    for _, candidate := range receivedCandidates {
        if err := peerConnection.AddICECandidate(candidate); err != nil {
            panic(err)
        }
    }

    // Crea una respuesta para mandarla al otro extremo
    answer, err := peerConnection.CreateAnswer(nil)
    if err != nil {
        panic(err)
    }

    // Guarda la descripción local, y empieza a escuchar las conexiones UDP
    err = peerConnection.SetLocalDescription(answer)
    if err != nil {
        panic(err)
    }

  // Bucle infinito para bloquear el hilo
  for {}

Con este código puedes empezar a implementar tu propio servicio WebRTC. Hay que tener en cuenta que si usar la función opcional que codifica y comprime las "señales" debes implementarlo también en el otro extremo, en el caso que el otro extremo sea JS (ya sea navegador, Node , Deno, ...) deberás usar librerías de terceros. En mi caso he hecho un port simple de Go a WASM para usar desde cualquier plataforma que soporte WebAssembly, puedes encontrarlo aquí. Solo necesitas compilarlo usando el compilador de Go o con TinyGo o simplemente usar el WASM del repositorio de LibreRemotePlay

Fuentes de información:

Esta es una tradución de un artículo existente, el artículo original es el siguiente,
Golang WebRTC. How to use Pion 🌐 LibreRemotePlay

Create custom browser protocols 🌐 A little guide into protocol handlers 📘

PiterDev — Fri, 28 Jun 2024 05:45:00 +0000

Hi, in this tutorial I will cover the creation of custom browser protocols using Javascript and the posible use cases.

What are the protocol handlers ?

These are ways to "generalize" services, to understand it i will use a very common example. Imagine that you want your website to open the user preferred mail client with an email address. To approach this task we may think to use an anchor link with "mailto:myaddr@gmail.com" this way it will open the Mail APP.

In this case mailto is the custom protocol, instead of using http or https we are using mailto.

Why can be interesting for your webpage/app ?

If you want some type of branding in your links or simplicity.

If you want to create standart way to comunicate your website with an APP or web page from the browser. As i have shown in the previous example custom protocols can be really usefull in this aspect but exists more examples.

Another example of this can be Instant.io, it is a service to share files through webtorrent. When you upload a file the website will give you a link that looks like "magnet:....." this way someone who has already visited Instant.io and agreed to use it with the magnet protocol you can paste this custom url in the browser and it will work. But magnet is an standart so other websites are using it

How can I create protocol handlers ?

Now we are going to see how the code looks. In a script we will write

// Modified example taken from MDN: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers#registering

if ('registerProtocolHandler' in navigator) {

   const customProtocol = "web+burguer"
   const placeHolder = "https://myburguerwebpage.com/?uri=%s"
   const protocolDescription = "Burger handler"

   navigator.registerProtocolHandler(
        customProtocol,
        placeHolder,
        protocolDescription,
      ); 
}

And now if you want to try out

<a href="web+burger:cheeseburger">My custom browser protocol: web+burger</a>

This feature may not be for everyone but it is very easy to implement and interesting. This was all for this post, I hope you liked. ♥

Write down in the comments if you have funny/better use cases for this feature

Resources: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers#registering

Make stunning Landing Pages with ✨UIgraphic

PiterDev — Wed, 15 May 2024 19:04:26 +0000

This is not a paid article but the owner of the product contacted me and I found that he offers very good free and premium resources. So I think it might be interesting for who are looking for UI resources

UIgraphic

If you don't know what is UIGraphic is a really simple platform that has 3D designs (free & premium) that can be used for real products in both plans. In addition when you download the design you got:

PNG with the background
PNG with the content
PNG with the composition for desktop
PNG with the composition for mobile/tablet
Blender project to modify the whole the design

So if you just want the basic design you can use the PNG but if you want to go further you can change colors/position or add/remove elements in the Blender design to customize it for your product.

To download a resource is super easy you just need to give them your email and they will send you the zip with all the listed files.

Now a days they offer illustrations (free & premium), animations (premium) and they also offer custom products if you contact them

If you want to check out their website is uigraphic.com.

Finally I will show you an example of a design resource, this is the one I have downloaded to test it out

As you see is perfect for the top of a landing page.

Also good luck to the UIGraphic team because they seem to have launched very recently. ♥

OMI the surprising Chinese Web Components Framework ✨

PiterDev — Wed, 01 May 2024 18:15:44 +0000

In my spare time I usually look for promising projects and also see what the big companies are doing in open source.

When I found out that Tencent (the big Chinese company) has a github profile I started looking all the projects. They have a lot of interesting and powerful projects but OMI is amazing 🤯.

Of course it's not a new must framework or anything like that but it has some promising aspects and also things I don't like. More on that later

OMIjs

It is defined itself as a Web Components Framework but in my opinion it goes beyond that . It offers reactive signals, cross framework components, tiny size, fast performance and much more.

By the way OMI uses Vite so it is compatible with all the Vite stuff (like TailwindCSS support, ...).

Now let's look at some code to create the typical Hello World counter :

import { tag, Component, h, render, signal } from 'omi'

const count = signal(0)

@tag('hello-omi')
class HelloOmi extends Component {
  render(props) {
    return (
      <>
        <h1>Hello {props.msg}!</h1>
        {count.value}<button onClick={()=>count.value++}>+</button>
      </>
    )
  }
}

render(<hello-omi msg='Omi' />, 'body')

It looks very cool, you can use OOP with reactive signals and also JSX.

I now it is a very strange mix OOP + signals but it feels realy intuitive and easy.

Are you thinking in how can you style your app created in OMI, it is very easy (but uses CSS in JS techniques):


...
class HelloOmi extends Component {

  static css = `h1 { color: #07c160 } `

  render(props) {
     ...
  }
}

This way you can have scoped css but you can also share your styles with other components in other ways.

Cross framework

One of the most exciting features of the framework itself is that it can interact with Vue and React out of the box

As you can see this has a double counter, one controlled by Vue and the other by OMI and they are both synchronised!

If you are interested in this particular aspect and how to code it 👉 Cross Frameworks Guide

Conclusion

OMI looks very fast to develop with, easy to use and embeddable with other frameworks so I might play with it in some project.

It might be difficult at first but it has a good docs site and also a really cool playground

But there is one thing I don't like, CSS in JS but I have to say that the implementation is really good, probably the best CSS in JS I have seen.

Well if you want to check out the project you have here:
🌐 Docs website
📦 Github repo

I hope you really enjoyed this post ♥
If you want to know about other projects I find interesting on Github, let me know below 👇

How to create and use DLL's on VLang

PiterDev — Sat, 20 Apr 2024 13:04:19 +0000

Hi, this is going to be a very compact post as this will only cover a simple example of creating and using dll's and some limitations I have found when calling dll's from V.

First we will have an example dll called "example.dll" this file will expose the hello_world function which will print Hello World to standard output.

The code to generate our example DLL is as follows:

// file: example.v

@[export: 'hello_world']
fn hello_world() {
    println("Hello World")
}

Now we run it:
$ v ./example.v -shared -o example.dll.

Now we need to write the following in our V program:

Note that you have to replace <absolute path to the DLL> with your own path

// file: main.v

import dl.loader;

type DLLFunc = fn ()

fn main() {

    mut dl_loader := loader.get_or_create_dynamic_lib_loader(
        key: "example",
        paths: ["<absolute path to the DLL>"]
    )!

    defer {
        dl_loader.unregister()
    }

    dll_func := dl_loader.get_sym("hello_world")!

    f_hello_world := DLLFunc(dll_func);

    f_hello_world()

}

It is really important to make the DLLFunc type match the dll function signature to make the compiler happy and not get any unexpected problems.

If we have done everything well and we run
$ v run ./main.v then
we will see our 'Hello World'.

Now if we want to pass some args it is as simple as adding an argument to the hello_world function on example.v, compile it into a shared library, then add the argument in our local signature type DLLFunc and it will work 👍!

The only bad thing I have found when working with DLLs in Vlang is the lack of flexibility if you want to work with different generic DLLs, because you need to have a strict type definition for the DLL functions signature. But it is very easy, fast and perfect if you already know how your DLL is at compile time.

Also, thanks to the efforts of the VLang team for the language, it has a lot of simple and interesting features I love ♥.

JavaScript WebRTC. WebRTC example JavaScript 🌐LibreRemotePlay

PiterDev — Tue, 19 Mar 2024 07:15:00 +0000

As we have seen on the first post of this serie we have setup a Pion WebRTC "client". Now we are going to explore the "server" example built for the browser with JS(TS) and a little of WASM.

💭 Remember that this is modified and simplified example of "LibreRemotePlay" my software product that tries to be an alternative to Steam Remote Play. If you are interested to learn more about how it works I will continue this serie, but for the moment you will have the codebase to check it out

Lets start with the example:

First we will define the default STUN servers

const defaultStunServers = [
    'stun:stun.l.google.com:19302',
    'stun:stun.l.google.com:19305'
];

The next step will be the peerconnection creation and handle


const peerConnection = new RTCPeerConnection({
        iceServers: [
            {
                urls: defaultStunServers
            }
        ]
});

/* fn will be an optional callback function to execute 
 when the close succeded */
function ClosePeerConnection(fn?: () => void) {
    if (fn) fn();
    peerConnection.close();
}

async function CreateServerWebRTC() {

    peerConnection.onconnectionstatechange = handleConnectionState;

    const numbersChannel = peerConnection.createDataChannel("numbers");

    const otherChannel = peerConnection.createDataChannel("other");

    numbersChannel.onmessage = (e) => {
        console.log("Number: ", e.data);
    }

    othersChannel.onopen = () => {
        othersChannel.send(JSON.stringify({'message': "Hello World from WebRTC"}))
    };

    let copiedCode: string = '';


        const offer = await peerConnection.createOffer();

        await peerConnection.setLocalDescription(offer);

        const candidates: RTCIceCandidateInit[] = [];

        peerConnection.onicecandidate = (ev) => {
            if (ev.candidate === null) {

                copiedCode =
                    signalEncode(peerConnection?.localDescription) + ';' + signalEncode(candidates);

                // Server code logged on console
                console.log(copiedCode);

                return;
            }

            candidates.push(ev.candidate.toJSON());
        };

}

// Handle connection with the PionWebRTC client
/*hostAndCandidatesCode argument is the code provided by our client after submiting the server code in it */
async function ConnectToClientWebRTC(hostAndCandidatesCode: string) {
    try {
        const [hostCode, candidatesCode] = hostAndCandidatesCode.split(';');

        const answer: RTCSessionDescription = signalDecode(hostCode);

        const candidates: RTCIceCandidateInit[] = signalDecode(candidatesCode);

        await peerConnection.setRemoteDescription(answer);

        candidates.forEach(async (candidate) => {
            await peerConnection.addIceCandidate(candidate);
        });
    } catch (e) {
        console.error(e);
    }
}

// Execute code in base of the peerconection state change
function handleConnectionState() {

    const connectionState = peerConnection.connectionState;

    switch (connectionState) {
        case 'connected':
            console.log("connected");
            break;
        case 'disconnected':
            console.log("disconnected");
            ClosePeerConnection();
            break;
        case 'failed':
            console.log("failed");
            ClosePeerConnection();
            break;
        case 'closed':
            console.log("closed");
            ClosePeerConnection();
            break;
    }
}

And now we will export our main functions to use in your own codebase


export { CreateServerWebRTC, ConnectToClientWebRTC, ClosePeerConnection };

But now you may have thinked about signalEncode and signalDecode functions, these are some WASM functions generated from the Go codebase to compress the resulting codes and exchange more info like candidates.

You will have all the files on this gist, now let's create the helper functions to use it out of the box

// Function WASM (GOLANG)
function signalEncode<T>(signal: T): string {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    //@ts-ignore
    return window.signalEncode(JSON.stringify(signal));
}

// Function WASM (GOLANG)
function signalDecode<T>(signal: string): T {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    //@ts-ignore
    return JSON.parse(window.signalDecode(signal)) as T;
}

Now with all our setup we will have the tooling to make an APP were a server (js in the browser) can exchange some numbers and objects with a client (golang with Pion) using a P2P (WebRTC connection) obviously passing the codes manually. But making a service to avoid this it is an easy task, but not what i wanted for my use case (avoid using third party servers/services).

I hope this little tutorial/showcase was helpfull for all the devs who want to experiment with the WebRTC APIs without shooting himself on the foot like i did during the proccess of building "LibreRemotePlay" 😉

If you want me to continue this serie of articles talking about how i am building my personal project (like Gamepad emulation) leave one comment on the comments box below 👇