Make text component work on wasm (#702)

Cargo.toml

@@ -49,6 +49,7 @@ socket2 = "0.5.5"
 webrtc-util = "0.8.0"
 opus = "0.3.0"
 rubato = "0.15.0"
+glyphon = "0.5.0"
 futures-util = "0.3.30"
 tokio = { version = "1", features = ["full"] }
 schemars = { git = "https://github.com/membraneframework-labs/schemars", rev = "a5ad1f9", features = [

compositor_render/Cargo.toml

@@ -18,7 +18,7 @@ reqwest = { workspace = true }
 bytes = { workspace = true }
 log = { workspace = true }
 bytemuck = { version = "1.13.1", features = ["derive"] }
-glyphon = "0.5.0"
+glyphon = { workspace = true }
 crossbeam-channel = { workspace = true }
 resvg = "0.35.0"
 nalgebra-glm = { version = "0.18.0", features = ["convert-bytemuck"] }

compositor_render/src/state.rs

@@ -1,6 +1,8 @@
 use std::sync::{Arc, Mutex};
 use std::time::Duration;
 
+use glyphon::fontdb;
+
 use crate::error::{RegisterRendererError, UnregisterRendererError};
 
 use crate::scene::{Component, OutputScene};
@@ -47,7 +49,7 @@ pub struct Renderer(Arc<Mutex<InnerRenderer>>);
 
 struct InnerRenderer {
     wgpu_ctx: Arc<WgpuCtx>,
-    text_renderer_ctx: TextRendererCtx,
+    text_renderer_ctx: Arc<TextRendererCtx>,
     chromium_context: Arc<ChromiumContext>,
 
     render_graph: RenderGraph,
@@ -156,6 +158,11 @@ impl Renderer {
         Ok(())
     }
 
+    pub fn register_font(&self, font_source: fontdb::Source) {
+        let ctx = self.0.lock().unwrap().text_renderer_ctx.clone();
+        ctx.add_font(font_source);
+    }
+
     pub fn render(&self, input: FrameSet<InputId>) -> Result<FrameSet<OutputId>, RenderSceneError> {
         self.0.lock().unwrap().render(input)
     }
@@ -185,7 +192,7 @@ impl InnerRenderer {
 
         Ok(Self {
             wgpu_ctx: wgpu_ctx.clone(),
-            text_renderer_ctx: TextRendererCtx::new(),
+            text_renderer_ctx: Arc::new(TextRendererCtx::new()),
             chromium_context: Arc::new(ChromiumContext::new(opts.web_renderer, opts.framerate)?),
             render_graph: RenderGraph::empty(),
             renderers: Renderers::new(wgpu_ctx)?,

compositor_render/src/transformations/text_renderer.rs

@@ -5,8 +5,8 @@ use std::{
 };
 
 use glyphon::{
-    AttrsOwned, Buffer, Color, FontSystem, Metrics, Shaping, SwashCache, TextArea, TextAtlas,
-    TextBounds,
+    fontdb::Source, AttrsOwned, Buffer, Color, FontSystem, Metrics, Shaping, SwashCache, TextArea,
+    TextAtlas, TextBounds,
 };
 use wgpu::{
     CommandEncoderDescriptor, LoadOp, MultisampleState, Operations, RenderPassColorAttachment,
@@ -203,7 +203,7 @@ impl From<&TextComponent> for TextParams {
     }
 }
 
-pub(crate) struct TextRendererCtx {
+pub struct TextRendererCtx {
     font_system: Mutex<FontSystem>,
     swash_cache: Mutex<SwashCache>,
 }
@@ -215,6 +215,11 @@ impl TextRendererCtx {
             swash_cache: Mutex::new(SwashCache::new()),
         }
     }
+
+    pub fn add_font(&self, source: Source) {
+        let mut font_system = self.font_system.lock().unwrap();
+        font_system.db_mut().load_font_source(source);
+    }
 }
 
 impl TextRendererCtx {

compositor_web/Cargo.toml

@@ -34,6 +34,8 @@ serde-wasm-bindgen = "0.6.5"
 wgpu = { workspace = true }
 crossbeam-channel = { workspace = true }
 reqwest = { workspace = true }
+bytes = { workspace = true }
+glyphon = { workspace = true }
 
 [target.'cfg(target_arch = "wasm32")'.dependencies]
 getrandom = { version = "0.2", features = ["js"] }

compositor_web/src/wasm.rs

@@ -1,8 +1,12 @@
+use std::sync::Arc;
+
+use bytes::Bytes;
 use compositor_api::types as api;
 use compositor_render::{
     image::{ImageSource, ImageType},
     InputId, OutputFrameFormat, OutputId, RegistryType, Renderer, RendererId, RendererSpec,
 };
+use glyphon::fontdb::Source;
 use input_uploader::InputUploader;
 use output_downloader::OutputDownloader;
 use types::to_js_error;
@@ -107,8 +111,7 @@ impl LiveCompositorRenderer {
             return Err(JsValue::from_str("Expected `url` field in image spec"));
         };
 
-        let resp = reqwest::get(url).await.map_err(to_js_error)?;
-        let bytes = resp.bytes().await.map_err(to_js_error)?;
+        let bytes = download(&url).await?;
         let renderer_spec = RendererSpec::Image(compositor_render::image::ImageSpec {
             src: ImageSource::Bytes { bytes },
             image_type,
@@ -118,6 +121,13 @@ impl LiveCompositorRenderer {
             .map_err(to_js_error)
     }
 
+    pub async fn register_font(&mut self, font_url: String) -> Result<(), JsValue> {
+        let bytes = download(&font_url).await?;
+        self.renderer
+            .register_font(Source::Binary(Arc::new(bytes.to_vec())));
+        Ok(())
+    }
+
     pub fn unregister_input(&mut self, input_id: String) {
         let input_id = InputId(input_id.into());
         self.renderer.unregister_input(&input_id);
@@ -136,3 +146,9 @@ impl LiveCompositorRenderer {
             .map_err(to_js_error)
     }
 }
+
+async fn download(url: &str) -> Result<Bytes, JsValue> {
+    let resp = reqwest::get(url).await.map_err(to_js_error)?;
+    let resp = resp.error_for_status().map_err(to_js_error)?;
+    resp.bytes().await.map_err(to_js_error)
+}