diff --git a/src/components/feature.astro b/src/components/feature.astro new file mode 100644 index 0000000..750ffe8 --- /dev/null +++ b/src/components/feature.astro @@ -0,0 +1,34 @@ +--- +type Feature = + | "source" + | "web" + | "realtime" + | "scale" + | "native" + | "discover" + | "efficient"; + +interface Props { + icon: Feature; +} + +const { icon } = Astro.props; + +// These are Kixel's original hand-drawn icons from moq.pro. +const artwork: Record = { + source: "box", + web: "globe", + realtime: "rocket", + scale: "stonk", + native: "puzzle", + discover: "link", + efficient: "battery", +}; +--- + +
  • + + +
    • diff --git a/src/pages/demo.mdx b/src/pages/demo.mdx index 0202195..d94f41d 100644 --- a/src/pages/demo.mdx +++ b/src/pages/demo.mdx @@ -65,3 +65,132 @@ Click on any of them. That's what they're here for. Everything is open source! +## Build Your Own + +Want something you can run from a terminal? These copy-paste examples use the same MoQ stack as the browser demos. + +
    + + Hand-drawn box +
    MoQ CLI
    +
    Pull a live broadcast out of MoQ and play it with ffplay.
    +     + + + Hand-drawn rocket +
    FFmpeg
    +
    Encode a test pattern, webcam, or screen and publish it live.
    +     + + + Hand-drawn puzzle piece +
    GStreamer
    +
    Drop moqsrc and moqsink into a media pipeline.
    +     +
    + +> **Everything under `/anon` is public and ephemeral.** Pick a unique broadcast name, do not publish anything private, and stop the command when you're done. + +## CLI + +The [`moq` CLI](https://doc.moq.dev/bin/cli) imports and exports common media containers over MoQ. +Install it with Homebrew or Cargo: + +```bash +# macOS +brew install moq-dev/tap/moq + +# Any platform with Rust +cargo install moq-cli +``` + +Then pull the always-on Big Buck Bunny broadcast out as fragmented MP4 and pipe it directly into `ffplay`: + +```bash +moq --client-connect https://cdn.moq.pro/demo \ + --broadcast bbb.hang export fmp4 \ + | ffplay - +``` + +That's the whole loop: `moq` handles the live transport and media tracks, while FFmpeg handles decoding and playback. + +## FFmpeg + +Publish a generated video and audio test pattern. Replace `YOUR_NAME` with something unique so you don't fight another publisher for the same broadcast. + +```bash +ffmpeg -re \ + -f lavfi -i testsrc=size=1280x720:rate=30 \ + -f lavfi -i sine=frequency=440 \ + -c:v libx264 -preset veryfast -tune zerolatency -g 60 \ + -c:a aac \ + -f mp4 \ + -movflags cmaf+separate_moof+delay_moov+skip_trailer+frag_every_frame - \ + | moq --client-connect https://cdn.moq.pro/anon \ + --broadcast YOUR_NAME.hang import fmp4 +``` + +While it is running, open `/watch?name=YOUR_NAME.hang` on this site, or play it in another terminal: + +```bash +moq --client-connect https://cdn.moq.pro/anon \ + --broadcast YOUR_NAME.hang export fmp4 \ + | ffplay - +``` + +Want a real camera instead? Replace the two generated inputs above with the input for your platform: + +```bash +# macOS: first camera + first microphone +ffmpeg -f avfoundation -framerate 30 -i "0:0" ... + +# Linux: first V4L2 camera + default ALSA input +ffmpeg -f v4l2 -framerate 30 -i /dev/video0 -f alsa -i default ... + +# Windows: replace these names with devices from `ffmpeg -list_devices true -f dshow -i dummy` +ffmpeg -f dshow -i video="Integrated Camera":audio="Microphone" ... +``` + +FFmpeg device names vary, so use its device-list command before assuming the defaults are correct. + +## GStreamer + +The [`moq-gst` plugin](https://doc.moq.dev/bin/gstreamer) provides two normal GStreamer elements: + +- `moqsink` publishes encoded audio and video. +- `moqsrc` subscribes to a broadcast and exposes one pad per rendition. + +The quickest install is Nix, which bundles the plugin with GStreamer and the common codec plugins: + +```bash +nix shell github:moq-dev/moq#moq-gst --command gst-inspect-1.0 moq +``` + +Watch the public demo, explicitly connecting both the video and audio pads: + +```bash +nix shell github:moq-dev/moq#moq-gst --command gst-launch-1.0 -v -e \ + moqsrc name=src url=https://cdn.moq.pro/demo broadcast=bbb.hang \ + src.video_0 ! queue ! decodebin3 ! videoconvert ! autovideosink \ + src.audio_0 ! queue ! decodebin3 ! audioconvert ! autoaudiosink +``` + +Or publish a live test pattern to your own public broadcast: + +```bash +nix shell github:moq-dev/moq#moq-gst --command gst-launch-1.0 -v -e \ + videotestsrc is-live=true ! videoconvert \ + ! x264enc tune=zerolatency ! h264parse ! mux.sink_0 \ + audiotestsrc is-live=true ! audioconvert \ + ! avenc_aac ! aacparse ! mux.sink_1 \ + moqsink name=mux url=https://cdn.moq.pro/anon broadcast=YOUR_NAME.hang +``` + +Open `/watch?name=YOUR_NAME.hang` while the pipeline is running. For a webcam or screen share, swap `videotestsrc` for your platform's source element such as `avfvideosrc`, `v4l2src`, `ximagesrc`, or `d3d11screencapturesrc`. + +### Next Steps + +- Embed the [publisher](/publish) or [player](/watch) in a web app. +- Try the full [CLI](https://doc.moq.dev/bin/cli) and [GStreamer](https://doc.moq.dev/bin/gstreamer) docs. +- [Run your own relay](https://doc.moq.dev/bin/relay/) instead of using the public namespace. +- Browse the [source code](https://github.com/moq-dev/moq) or ask questions in [Discord](https://discord.moq.dev). diff --git a/src/pages/index.mdx b/src/pages/index.mdx index c0726fe..ff5e1ca 100644 --- a/src/pages/index.mdx +++ b/src/pages/index.mdx @@ -2,34 +2,36 @@ layout: "@/layouts/global.astro" --- +import Feature from "@/components/feature.astro"; +
    Media over QUIC Logo
    **Media over QUIC** is a live media protocol powered by [QUIC](https://quicwg.org/): a super-charged TCP/UDP replacement that powers [HTTP/3](https://en.wikipedia.org/wiki/HTTP/3). -It's being developed by the [IETF](https://www.ietf.org/) and your _favorite_ big tech companies such as Google, Cisco, Akamai, Cloudflare, etc. +It's being developed by the [IETF](https://www.ietf.org/) and your _favorite_ big tech companies such as Google, Cisco, Akamai, etc. MoQ supports **real-time latency**, scales via **generic CDNs**, and **works in browsers**. -It replaces [WebRTC](./blog/replacing-webrtc), [HLS/DASH](./blog/replacing-hls-dash), and [RTMP/SRT](./blog/on-a-boat) with one extensible protocol for **contribution**, mass **distribution**, multiple **latency targets**, and **generic** live tracks. +It replaces [WebRTC](./blog/replacing-webrtc), [HLS/DASH](./blog/replacing-hls-dash), and [RTMP/SRT](./blog/on-a-boat) with one extensible protocol for **contribution**, mass **distribution**, dynamic **latency targets**, and **generic** live tracks. -But seriously, try the demos already. There's even a gameboy emulator. Don't pretend like you're not excited. +Holy, that's a lot of keywords, Batman. But seriously, try the demos already. There's even a gameboy emulator. Don't pretend like you're not excited. -### ✨ Features +### Features -- 🔓 **Open Source**: Production-ready [Rust and TypeScript libraries](/source). -- 🌐 **100% Web**: Utilizes [WebTransport](https://developer.mozilla.org/en-US/docs/Web/API/WebTransport), [WebCodecs](https://developer.mozilla.org/en-US/docs/Web/API/WebCodecs_API), [WebAudio](https://developer.mozilla.org/en-US/docs/Web/API/WebAudio_API), WebEtc. -- ⚡ **Real-time**: Minimal latency by skipping less important media during congestion. -- 🚀 **Massive Scale**: Host your own CDN with [moq-relay](https://github.com/moq-dev/moq/tree/main/rs/moq-relay) or use [Cloudflare](/blog/first-cdn). -- 🎬 **Multi-Platform**: [Web](https://github.com/moq-dev/moq/tree/main/js/hang), [FFmpeg](https://github.com/moq-dev/moq/tree/main/rs/hang-cli), [GStreamer](https://github.com/moq-dev/gstreamer), [OBS](https://github.com/moq-dev/obs), and [native](/source) clients available. -- 🔍 **Discoverable**: Live notifications when broadcasts are published or finish. -- 💪 **Efficient**: No encoding or bandwidth usage until a viewer needs it. -- 🌍 **Compatible**: TCP fallback via [WebSocket](https://github.com/moq-dev/web-transport/tree/main/web-transport-ws), Safari fallback via [libav.js](https://github.com/Yahweasel/libav.js/). -- 🔧 **Customizable**: Hardware accelerated encoding, the rest is in your control. + ### *Standards This website uses [moq-lite](https://doc.moq.dev/concept/layer/moq-lite), a subset of the *official* [moq-transport](https://datatracker.ietf.org/doc/draft-ietf-moq-transport/) draft. -moq-lite is forwards compatible with moq-transport (draft-14+) and works with any MoQ CDN (ex. [Cloudflare](/blog/first-cdn)). +moq-lite is forwards compatible with moq-transport (draft-14+) and works with any MoQ CDN (ex. [moq.pro](https://moq.pro)). The principles behind MoQ are fantastic, but standards are **SLOW** and involve too much arguing/bloat. My goal is to get MoQ in __production now__, even if it's not a standard yet. @@ -39,6 +41,7 @@ My goal is to get MoQ in __production now__, even if it's not a standard yet. - The [docs](https://doc.moq.dev) and [Github](https://github.com/moq-dev/moq) if you're a nerd. - The [discord](https://discord.moq.dev) if you want to chat with me or other unhinged developers. - The [demos](/demo) if you seriously got this far without clicking on a link. +- The [Pro](https://moq.pro) offering if you don't want to self-host. Contributions are welcome, of course. But also feel free to just yoink the code, fork it, and make it your own. diff --git a/src/pages/publish.mdx b/src/pages/publish.mdx index 66342c9..5f02e03 100644 --- a/src/pages/publish.mdx +++ b/src/pages/publish.mdx @@ -13,14 +13,14 @@ Publishing a **PUBLIC** broadcast. Pls don't do anything stupid. ## Features -- 🔓 **Open Source**: powered by the [@moq/publish](https://github.com/moq-dev/moq/tree/main/js/publish) library. +- 🔓 **Open Source**: powered by the [@moq/publish](https://doc.moq.dev/lib/js/@moq/publish) library. - 🌐 **100% Web**: WebTransport, WebCodecs, WebAudio, WebWorkers, WebEtc. - 🎬 **Modern Codecs**: Supports AV1, H.265, H.264, VP9, Opus, AAC, etc. - 💬 **Automatic Captions**: Generated [in-browser](https://huggingface.co/docs/transformers.js/en/index) using WebGPU and [Whisper](https://github.com/openai/whisper). - ⚡ **Real-Time**: Minimal latency by skipping unimportant media during congestion. - 🚀 **Massive Scale**: Everything is deduplicated and distributed across a global CDN. - 💪 **Efficient**: No encoding or bandwidth usage until a viewer needs it. -- 🔧 **Compatible**: TCP fallback via [WebSocket](https://github.com/moq-dev/web-transport/tree/main/web-transport-ws), Safari fallback via [libav.js](https://github.com/Yahweasel/libav.js/). +- 🔧 **Compatible**: TCP fallback via [WebSocket](https://doc.moq.dev/concept/layer/web-socket), Safari fallback via [libav.js](https://github.com/Yahweasel/libav.js/). ## Embed it diff --git a/src/pages/source.mdx b/src/pages/source.mdx index 49d3685..d55a3f2 100644 --- a/src/pages/source.mdx +++ b/src/pages/source.mdx @@ -11,17 +11,17 @@ Everything is open source and broken into two repositories: - [moq-dev/moq.dev](https://github.com/moq-dev/moq.dev): This website. ## Rust -Native code is written in [Rust](https://github.com/moq-dev/moq/tree/main/rs) and is split into a few notable crates: +Native code is written in [Rust](https://doc.moq.dev/lib/rs/) and is split into a few notable crates: | crate | description | | ----------------------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------------------------- | | [moq-lite](https://docs.rs/moq-lite/latest/moq_lite/) | A generic pub/sub transport. This is a minimal reinterpretation of the IETF [MoqTransport draft](https://datatracker.ietf.org/doc/draft-ietf-moq-transport/). | -| [moq-relay](https://github.com/moq-dev/moq/tree/main/rs/moq-relay) | A Moq server that connects publishers to subscribers, caching and deduplicating any subscriptions. Note that MoQ does not support P2P; instead it utilizes relays to scale out to many subscribers. | +| [moq-relay](https://doc.moq.dev/bin/relay/) | A Moq server that connects publishers to subscribers, caching and deduplicating any subscriptions. Note that MoQ does not support P2P; instead it utilizes relays to scale out to many subscribers. | | [moq-clock](https://github.com/moq-dev/moq/tree/main/rs/moq-clock) | It's a clock! Just to demonstrate that MoQ can be used for more than media. | | [hang](https://docs.rs/hang/latest/hang/) | A media specific library built on top of moq-lite. This provides a JSON "catalog" that describes the media tracks and "container" that literally consists of a timestamp. The actual media decoding/encoding is left to the platform. | -| [hang-cli](https://github.com/moq-dev/moq/tree/main/hang-cli) | A client that integrates with ffmpeg to publish media. This pipes fMP4 over stdin, so it's not the most efficient... | -| [hang-gst](https://github.com/moq-dev/gstreamer) | A GStreamer plugin for publishing and consuming media. Separate repository to avoid GStreamer build dependency. | -| [hang-obs](https://github.com/moq-dev/obs) | An OBS plugin for publishing media. Separate repository to avoid OBS build dependency. | +| [hang-cli](https://doc.moq.dev/bin/cli) | A client that integrates with ffmpeg to publish media. This pipes fMP4 over stdin, so it's not the most efficient... | +| [hang-gst](https://doc.moq.dev/bin/gstreamer) | A GStreamer plugin for publishing and consuming media. Separate repository to avoid GStreamer build dependency. | +| [hang-obs](https://doc.moq.dev/bin/obs) | An OBS plugin for publishing media. Separate repository to avoid OBS build dependency. | | [hang-wasm](https://github.com/moq-dev/moq/tree/main/hang-wasm) | An MoQ web client utilizing WebAssembly, WebCodecs, and WebTransport. Deprecated in favor of the Typescript implementation; see below for justification. | @@ -36,7 +36,7 @@ There are some additional crates in other repositories that might be of interest ## Typescript -Web code is written in [Typescript](https://github.com/moq-dev/moq/tree/main/js) and is split into a few packages: +Web code is written in [Typescript](https://doc.moq.dev/lib/js/) and is split into a few packages: | package | description | | ------- | ----------- | diff --git a/src/pages/watch.mdx b/src/pages/watch.mdx index 5532e14..087da1f 100644 --- a/src/pages/watch.mdx +++ b/src/pages/watch.mdx @@ -11,14 +11,14 @@ import WatchEmbed from "@/components/watch-embed.astro"; ## Features -- 🔓 **Open Source**: powered by the [@moq/watch](https://github.com/moq-dev/moq/tree/main/js/watch) library. +- 🔓 **Open Source**: powered by the [@moq/watch](https://doc.moq.dev/lib/js/@moq/watch) library. - 🌐 **100% Web**: WebTransport, WebCodecs, WebAudio, WebWorkers, WebEtc. - 🎬 **Modern Codecs**: Supports AV1, H.265, H.264, VP9, Opus, AAC, etc. - 💬 **Automatic Captions**: Generated [in-browser](https://huggingface.co/docs/transformers.js/en/index) using WebGPU and [Whisper](https://github.com/openai/whisper). - ⚡ **Real-Time**: Minimal latency by skipping unimportant media during congestion. - 🚀 **Massive Scale**: Downloaded from the nearest CDN edge. - 💪 **Efficient**: No video is downloaded when minimized, or audio when muted. -- 🔧 **Compatible**: TCP fallback via [WebSocket](https://github.com/moq-dev/web-transport/tree/main/web-transport-ws), Safari fallback via [libav.js](https://github.com/Yahweasel/libav.js/). +- 🔧 **Compatible**: TCP fallback via [WebSocket](https://doc.moq.dev/concept/layer/web-socket), Safari fallback via [libav.js](https://github.com/Yahweasel/libav.js/). ## Embed it