diff --git a/_art/mediasoup.svg b/_art/mediasoup.svg index fe49b86..fb44d26 100644 --- a/_art/mediasoup.svg +++ b/_art/mediasoup.svg @@ -2,22 +2,81 @@ + inkscape:version="1.2.1 (9c6d41e4, 2022-07-14)" + sodipodi:docname="mediasoup.svg" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:dc="http://purl.org/dc/elements/1.1/"> + id="defs4"> + + + + + + + + + + + inkscape:window-y="25" + inkscape:window-maximized="0" + inkscape:showpageshadow="2" + inkscape:pagecheckerboard="0" + inkscape:deskcolor="#d1d1d1" /> @@ -45,7 +107,7 @@ image/svg+xml - + @@ -55,114 +117,113 @@ id="layer1"> m + y="129.33304" + style="font-size:90px;line-height:1.25;stroke:none">m d + y="128.34303" + style="font-size:90px;line-height:1.25;stroke:none">d o + y="128.34303" + style="font-size:90px;line-height:1.25;fill-opacity:1;fill:url(#linearGradient10003);stroke:none">o e + style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:75px;line-height:125%;font-family:'Poiret One';-inkscape-font-specification:'Poiret One, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start;fill-opacity:1;fill:url(#linearGradient9999);stroke:none">e s + y="128.34303" + style="font-size:90px;line-height:1.25;fill-opacity:1;fill:url(#linearGradient10001);stroke:none">s + y="256.4451" + style="font-size:90px;line-height:1.25">  i + sodipodi:role="line" + style="font-size:90px;line-height:1.25;stroke:none">i a + sodipodi:role="line" + style="font-size:90px;line-height:1.25;stroke:none">a u + sodipodi:role="line" + style="font-size:90px;line-height:1.25;fill-opacity:1;fill:url(#linearGradient10005);stroke:none">u p + y="128.34303" + style="font-size:90px;line-height:1.25;fill-opacity:1;fill:url(#linearGradient10007);stroke:none">p diff --git a/_compass/_anchor.scss b/_compass/_anchor.scss index c416228..4edd91e 100644 --- a/_compass/_anchor.scss +++ b/_compass/_anchor.scss @@ -10,7 +10,7 @@ @include transition(color .16s linear); } -.anchorjs-link:link { color: $color-dark; } -.anchorjs-link:visited { color: $color-dark; } -.anchorjs-link:hover { color: $color-highlight; } -.anchorjs-link:active { color: $color-highlight; } +.anchorjs-link:link { color: $color-text; } +.anchorjs-link:visited { color: $color-text; } +.anchorjs-link:hover { color: $color-highlight-2; } +.anchorjs-link:active { color: $color-highlight-2; } diff --git a/_compass/_api_toc.scss b/_compass/_api_toc.scss index d7dc123..8dac20c 100644 --- a/_compass/_api_toc.scss +++ b/_compass/_api_toc.scss @@ -3,7 +3,7 @@ z-index: 50; background: center url(/images/toc.svg) no-repeat; background-size: 50%; - background-color: #fff; + background-color: lighten($color-white-2, 15%); border-right: none; @include box-shadow(0px 0px 3px 0px rgba(#111, 0.35)); cursor: pointer; @@ -38,12 +38,12 @@ z-index: 10; bottom: 0; top: 0; - background: rgba(#fff, 0.96); + background-color: lighten($color-white-2, 15%); + @include box-shadow(-3px 0px 8px 0px rgba(#fff, 0.25)); border-color: transparent; border-style: solid; border-width: 8px 0; font-size: 0.95rem; - @include box-shadow(-5px 0px 8px 0px rgba(#333, 0.1)); @include transition-duration(0.2s); overflow-y: auto; overscroll-behavior: contain; @@ -91,7 +91,7 @@ display: block; margin: 1.5em 0.75em 0.25em 0.75em; font-weight: 400; - color: #19170f; + color: $color-dark-2; &:first-child { margin-top: 0.75em; @@ -105,7 +105,7 @@ margin: 0 0 0.5em 0; font-size: 0.95em; font-weight: 400; - color: $color-dark; + color: darken($color-highlight-2, 10%); // Third level (API). > ul { @@ -114,7 +114,7 @@ letter-spacing: -0.04em; font-size: 0.9em; line-height: 1.3em; - color: #666; + color: darken($color-text, 25%); } } } diff --git a/_compass/_default.scss b/_compass/_default.scss index 44fa5e4..a79654b 100644 --- a/_compass/_default.scss +++ b/_compass/_default.scss @@ -43,7 +43,7 @@ h1 { font-family: 'Poiret One'; - color: #000; + color: $color-white-2; text-align: left; margin-bottom: 1em; clear: both; @@ -59,9 +59,9 @@ } h2 { - color: #444; + color: $color-white-2; text-align: left; - border-bottom: 4px solid rgba(#333, 0.1); + border-bottom: 4px solid rgba($color-white-2, 0.15); margin-top: 2.5em; margin-bottom: 1.5em; clear: both; @@ -81,22 +81,26 @@ h3 { font-size: 1.4em; line-height: 1.5em; - color: #151515; - border-bottom: 1px solid rgba($color-dark, 0.75); + color: $color-white-2; + border-bottom: 1px solid rgba($color-highlight-2, 0.75); text-align: left; margin-top: 2.5em; margin-bottom: 1.5em; clear: both; overflow-wrap: break-word; - } - &.h3color h3 { - color: $color-dark; + &.h3color { + color: $color-highlight-2; + } + + &.no-border { + border-bottom: none; + } } h4 { font-size: 1.25em; - color: #262626; + color: $color-white-2; text-align: left; margin-top: 2.5em; margin-bottom: 1.5em; @@ -149,7 +153,7 @@ } blockquote { - border-left: 6px solid #d6d6d6; + border-left: 6px solid $color-dark-2; padding-left: 8px; p, ul { @@ -160,7 +164,7 @@ a { text-decoration: none; - color: $color-dark; + color: $color-highlight-2; &:hover { text-decoration: underline; @@ -192,13 +196,13 @@ } > code { - color: $color-dark !important; + color: $color-white-2 !important; } } strong { font-weight: 400; - color: #000; + color: $color-white-2; } em { @@ -222,10 +226,10 @@ :not(pre) > code { font-family: 'Monaco', 'Andale Mono', monospace; - font-size: 0.9em; - color: #444; + font-size: 0.85em; + color: darken($color-white-2, 10%); white-space: pre; - background-color: rgba(#fff, 0.25); + background-color: rgba(#fff, 0.08); border-radius: 4px; padding: 1px 2px; } @@ -246,13 +250,12 @@ margin: 2em auto; padding: 1em; font-size: 0.95em; - color: shade($color-text, 60%); - background-color: rgba(#aaa, 0.1); + background-color: rgba(#000, 0.2); border-radius: 4px; - border: 2px solid $color-highlight; + border: 1px solid rgba($color-white-2, 0.1); &.warn { - border-color: #e47474; + border-color: rgba(#e47474, 0.5); } @include breakpoint($computer) { @@ -280,13 +283,12 @@ width: 100%; margin: 0 auto; border-collapse: collapse; - background-color: rgba(#333, 0.075); + background-color: rgba(#fff, 0.025); font-size: 0.9em; th { padding: 0.75em; text-align: center; - color: rgba(#fff, 0.9); background-color: rgba($color-dark, 0.85); } @@ -297,7 +299,7 @@ } th, td { - border: 1px solid #fff; + border: 1px solid rgba($color-white-2, 0.2); } } diff --git a/_compass/_home.scss b/_compass/_home.scss index 1a5f84f..97aa4bc 100644 --- a/_compass/_home.scss +++ b/_compass/_home.scss @@ -40,7 +40,7 @@ > p.description { margin: 0.1em 0 0.1em 2px; font-family: 'Poiret One'; - color: #000; + color: rgba(#fff, 0.25); line-height: 1.5em; @include breakpoint($computer) { @@ -67,9 +67,9 @@ width: 38px; height: 38px; background-size: contain; - background-image: url('/images/menu.svg'); - border-radius: 5px; + background-image: url('/images/menu-white.svg'); opacity: 0.85; + border-radius: 5px; @include transition-property(transform); @include transition-duration(.75s); @@ -98,7 +98,7 @@ width: 32px; height: 32px; background-size: contain; - background-image: url('/images/menu.svg'); + background-image: url('/images/menu-white.svg'); opacity: 0.9; @include transition-property(opacity); @include transition-duration(.25s); @@ -128,8 +128,15 @@ display: block; width: 100%; padding: 10px 5%; - background-color: rgba(#7C8073, 0.15); - color: #666; + background: rgba(#fff, 0.05); + background: radial-gradient(circle, rgba(#fff, 0.08) 0%, rgba($color-dark-2, 0.15) 100%); + color: rgba($color-white-2, 0.35); + + &.loading { + opacity: 0; + @include transform(scale(1.5)); + color: #fff; + } @include breakpoint($computer) { @include display-flex; @@ -138,26 +145,12 @@ @include transition-property(opacity, transform, background-color, color); @include transition-delay(1.5s); @include transition-duration(1s); - - &.loading { - opacity: 0; - @include transform(scale(1.5)); - background-color: rgba(#fff, 0.5); - color: #fff; - } } @include breakpoint($mobile) { @include transition-property(opacity, transform, background-color, color); @include transition-delay(0.25s); @include transition-duration(1s); - - &.loading { - opacity: 0; - @include transform(scale(1.5)); - background-color: rgba(#fff, 0.5); - color: #fff; - } } > .code-container { @@ -173,7 +166,7 @@ @include breakpoint($computer) { font-size: 0.9em; - line-height: 1.6em; + line-height: 1.8em; } @include breakpoint($mobile) { @@ -182,7 +175,7 @@ } span.no-select { - color: $color-dark; + color: $color-white-2; @include user-select(none); } } @@ -209,7 +202,7 @@ right: 15%; height: 400px; width: 400px; - opacity: 0.1; + opacity: 0.5; @include transition-property(opacity, transform); @include transition-delay(1s); @include transition-duration(1.5s); @@ -226,6 +219,14 @@ } } + > .github-stars { + @include flex(100 0 auto); + @include display-flex; + @include flex-direction(column); + @include justify-content(center); + margin-bottom: 2rem; + } + > .boxes { @include flex(100 0 auto); @@ -261,13 +262,14 @@ } .box { - background-color: #fff; - box-shadow: 0 4px 8px 0 rgba(#0e0e0f, 0.2); + background-color: rgba(#fff, 0.02); + border: 1px solid rgba(#fff, 0.1); + border-radius: 6px; @include breakpoint($computer) { @include flex(0 10 auto); width: 34%; - margin: 0 4px; + margin: 0 6px; padding: 1.5rem 1.75rem 1.25rem; @include transition-property(opacity); @include transition-duration(1s); @@ -293,7 +295,7 @@ h3 { line-height: 1.3em; margin-bottom: 0.85em; - color: $color-dark; + color: $color-white-2; font-weight: 400; @include breakpoint($computer) { @@ -309,7 +311,8 @@ p { line-height: 1.4em; - color: #666; + color: rgba(#fff, 0.30); + font-weight: 400; margin-bottom: 1em; @include breakpoint($computer) { @@ -327,8 +330,8 @@ border-bottom: 1px solid transparent; &:hover { - color: $color-highlight; - border-color: $color-highlight; + color: $color-highlight-1; + border-color: $color-highlight-1; } } } @@ -336,10 +339,39 @@ } } - > .shields { + // > .shields { + // @include flex(0 0 auto); + // display: flex; + // min-height: 20px; + // margin: 2rem 0; + // opacity: 0.65; + + // @include breakpoint($computer) { + // @include flex-direction(row); + // @include justify-content(center); + // @include transition-property(transform); + // @include transition-duration(0.25s); + + // &.loading { + // @include transform(scale(0)); + // } + // } + + // @include breakpoint($mobile) { + // @include flex-direction(column); + // @include justify-content(center); + // @include align-items(center); + // } + + // > a.shield { + // display: inline-block; + // margin: 2px 4px; + // } + // } + + > .versions { @include flex(0 0 auto); display: flex; - min-height: 20px; margin: 2rem 0; @include breakpoint($computer) { @@ -359,9 +391,35 @@ @include align-items(center); } - > a.shield { + > a.version { display: inline-block; - margin: 2px; + margin: 2px 4px; + text-decoration: none; + background-color: $color-dark-2; + border-radius: 4px; + overflow: hidden; + // Trick to remove horizotal space between inline-block elements. + font-size: 0; + + &:hover { + background-color: lighten($color-dark-2, 5%); + } + + > span { + font-size: 0.75rem; + line-height: 1.5rem; + padding: 6px; + + &.name { + padding-right: 3px; + color: rgba($color-white-2, 0.75); + } + + &.version { + padding-left: 3px; + @include mediasoup-gradient(); + } + } } } } diff --git a/_compass/_menu.scss b/_compass/_menu.scss index 1dc7ee3..732c8b2 100644 --- a/_compass/_menu.scss +++ b/_compass/_menu.scss @@ -12,8 +12,8 @@ padding-bottom: 10%; overflow: auto; overscroll-behavior: contain; - background-color: rgba(shade($color-dark, 15%), 0.98); - @include box-shadow(-3px 0px 8px 0px rgba(#333, 0.25)); + background-color: lighten($color-white-2, 15%); + @include box-shadow(-3px 0px 8px 0px rgba(#fff, 0.25)); @include transition-property(right); @include transition-duration(0.15s); @@ -61,8 +61,8 @@ > a { display: block; padding: 0.7em 1em; - color: rgba(#fff, 1); - text-align: center; + color: rgba($color-dark-2, 0.75); + text-align: left; text-decoration: none; border-radius: 4px; @include transition-property(color, background-color); @@ -70,17 +70,17 @@ @include breakpoint($computer) { font-size: 1.1rem; - font-weight: 300; + font-weight: 400; } @include breakpoint($mobile) { font-size: 1rem; - font-weight: 300; + font-weight: 400; } &:hover { - color: rgba(#fff, 1); - background-color: rgba(#fff, 0.15); + color: $color-dark-2; + background-color: rgba(#fff, 1); } } } diff --git a/_compass/_mixins.scss b/_compass/_mixins.scss index 802654a..28aec88 100644 --- a/_compass/_mixins.scss +++ b/_compass/_mixins.scss @@ -1,10 +1,20 @@ -@mixin mediasoup-logo($light: false) { +@mixin mediasoup-gradient() { + @include background-image(linear-gradient( + 0deg, $color-highlight-2 10%, + $color-highlight-1 100%)); + background-clip: text; + -webkit-background-clip: text; + text-fill-color: transparent; + -webkit-text-fill-color: transparent; +} + +@mixin mediasoup-logo($light: true) { font-family: 'Poiret One'; letter-spacing: -0.04em; @if ($light) { - color: rgba(#fff, 0.95); + color: $color-white-2; } @else { - color: #3b3a33; + color: $color-dark; } -webkit-tap-highlight-color: transparent; @@ -17,6 +27,6 @@ } span.highlight { - color: $color-highlight; + @include mediasoup-gradient(); } } diff --git a/_compass/_rouge_theme.scss b/_compass/_rouge_theme.scss index fcce1ba..8f0c82d 100644 --- a/_compass/_rouge_theme.scss +++ b/_compass/_rouge_theme.scss @@ -4,7 +4,8 @@ pre.highlight { margin: 0 auto; padding: 1.2em; border-radius: 4px; - background: rgba(#000, 0.75); + background: $color-dark; + border: 1px solid rgba($color-white-2, 0.15); font-size: 0.85em; font-family: 'Monaco', 'Andale Mono', monospace; text-align: left; @@ -19,6 +20,7 @@ pre.highlight { @include hyphens(none); // Default color. color: #d7d7d7; + opacity: 0.75; .hll { background-color: #49483e } .c { color: #908d7f; } /* comment */ diff --git a/_compass/mediasoup.scss b/_compass/mediasoup.scss index a694f2d..2d86687 100644 --- a/_compass/mediasoup.scss +++ b/_compass/mediasoup.scss @@ -20,9 +20,12 @@ $mobile: max-width 900px; $header-height-computer: 64px; $header-height-mobile: 56px; -$color-text: #222; -$color-highlight: #1fb7e8; -$color-dark: #1B9FC9; +$color-white-2: #ccc; +$color-dark: #000211; +$color-dark-2: #11142C; +$color-highlight-1: #9335DB; +$color-highlight-2: #1EB6E8; +$color-text: #999; * { @include box-sizing(border-box); @@ -52,12 +55,8 @@ body { @include flex-direction(column); @include align-items(center); background-repeat: no-repeat; - @include background-image(linear-gradient(110deg, - #fff 0%, - #dddfdf 25%, - #f4f4f4 25%, - #f4f4f4 100%)); - background-color: #f4f4f4; + background: radial-gradient($color-dark-2, $color-dark); + background-color: $color-dark; @include breakpoint($computer) { // Just set fixed background on computer (it's not supported in iOS Safari @@ -82,6 +81,8 @@ body { top: 0; left: 0; right: 0; + background-color: rgba($color-dark, 0.85); + backdrop-filter: blur(4px); @include display-flex; @include flex-direction(row); @include justify-content(space-between); @@ -91,17 +92,10 @@ body { height: $header-height-computer; padding: 0 3.5rem; font-size: 2.5rem; - @include background-image(linear-gradient(110deg, - rgba(#000, 0.9) 0%, - rgba(#282828, 0.9) 25%, - rgba(#060606, 0.9) 25%, - rgba(#111, 0.9) 100%)); - background-attachment: fixed; - - // iOS devices (iPad) do not support background-attachment: fixed. - &.ios { - @include background-image(none); - background-color: rgba(#222, 0.9); + + &::before { + transform: translateY(-100%) translateY(7rem); + transform: translateY(-100%) translateY(7rem) translateZ(0); } } @@ -109,7 +103,6 @@ body { height: $header-height-mobile; padding: 0 16px; font-size: 2rem; - background-color: rgba(#222, 0.9); } h1 { @@ -128,6 +121,7 @@ body { cursor: pointer; background-image: url('/images/menu-white.svg'); background-size: contain; + opacity: 0.85; @include transition-property(opacity); @include transition-duration(0.25s); -webkit-tap-highlight-color: transparent; @@ -180,7 +174,7 @@ body { @include flex(0 0 auto); width: 100%; padding: 1.75rem 2rem 2.25rem 2rem; - background-color: rgba(#111, 0.85); + background-color: $color-dark; > .links { @include breakpoint($computer) { @@ -189,20 +183,21 @@ body { @include justify-content(center); } - > a { + > a, iframe { display: block; - color: rgba(#fff, 0.5); - border-bottom: 1px solid rgba(#fff, 0.1); - font-size: 0.85rem; + color: rgba($color-white-2, 0.6); + font-weight: 300; + border-bottom: 1px solid rgba($color-white-2, 0.2); + font-size: 0.90rem; text-align: center; text-decoration: none; - @include transition-property(color, border-bottom); - @include transition-duration(0.05s); -webkit-tap-highlight-color: transparent; + @include transition-property(color, border-bottom); + @include transition-duration(0.1s); &:hover { - color: $color-highlight; - border-color: $color-highlight; + color: $color-white-2; + border-color: $color-white-2; } @include breakpoint($computer) { diff --git a/_includes/documentation/v3/mediasoup/api/Router.md b/_includes/documentation/v3/mediasoup/api/Router.md index 069c936..1b46fd2 100644 --- a/_includes/documentation/v3/mediasoup/api/Router.md +++ b/_includes/documentation/v3/mediasoup/api/Router.md @@ -41,10 +41,8 @@ Field | Type | Description | Required | Default Field | Type | Description | Required | Default ------------- | ------------------ | ------------- | -------- | --------- -`mediaCodecs` | Array<[RtpCodecCapability](/documentation/v3/mediasoup/rtp-parameters-and-capabilities/#RtpCodecCapability)> | Router media codecs. | No | `[ ]` - -`producerId` | String | Producer id | No | -`dataProducerId` | String | Data producer id | No | +`producerId` | String | Producer id. | No | +`dataProducerId` | String | Data producer id. | No | `router` | [Router](#Router) | Destination router to pipe the given producer. | Yes | `listenIp` | String | IP to connect both routers in the same host. | No | "127.0.0.1" `enableSctp` | Boolean | Create a SCTP association. | No | `true` diff --git a/about.md b/about.md index 05b2339..6acb195 100644 --- a/about.md +++ b/about.md @@ -12,6 +12,7 @@ mediasoup is made with love by a small team of Real-Time addicts. ## Authors ### Iñaki Baz Castillo +{: .no-border.h3color} ![Iñaki Baz Castillo][ibc-photo]{: .photo.left.round } @@ -29,6 +30,7 @@ Since the first days of WebRTC my professional efforts go around it, and this is ### José Luis Millán +{: .no-border.h3color} ![José Luis Millán][jmillan-photo]{: .photo.left.round } @@ -47,6 +49,7 @@ I'm a core author of [JsSIP][jssip-url] "The JavaScript SIP library" and co-auth ## Core Contributors ### Nazar Mokynskyi +{: .no-border.h3color} ![Nazar Mokynskyi][nazar-photo]{: .photo.left.round } diff --git a/documentation/v2/index.md b/documentation/v2/index.md index 2d8e78f..5304820 100644 --- a/documentation/v2/index.md +++ b/documentation/v2/index.md @@ -6,18 +6,15 @@ title : v2 # v2 Documentation ### General -{: .h3color} * [Glossary](/documentation/v2/glossary/) * [mediasoup protocol](/documentation/v2/mediasoup-protocol/) * [RTC stats](/documentation/v2/rtc-stats/) ### mediasoup -{: .h3color} {% include documentation/v2/mediasoup/index.md %} ### mediasoup-client -{: .h3color} {% include documentation/v2/mediasoup-client/index.md %} diff --git a/documentation/v3/index.md b/documentation/v3/index.md index a0d9ab6..c3224c3 100644 --- a/documentation/v3/index.md +++ b/documentation/v3/index.md @@ -6,19 +6,16 @@ title : v3 # v3 Documentation ### General -{: .h3color} * [Communication Between Client and Server](/documentation/v3/communication-between-client-and-server/) * [Scalability](/documentation/v3/scalability/) * [Tricks](/documentation/v3/tricks/) ### mediasoup -{: .h3color} {% include documentation/v3/mediasoup/index.md %} ### mediasoup-rust -{: .h3color} Brings the same powerful C++ SFU to the Rust ecosystem, shares design philosophy with Node.js module. @@ -26,17 +23,14 @@ Brings the same powerful C++ SFU to the Rust ecosystem, shares design philosophy * [Crate on crates.io](https://crates.io/crates/mediasoup) ### mediasoup-client -{: .h3color} {% include documentation/v3/mediasoup-client/index.md %} ### libmediasoupclient -{: .h3color} {% include documentation/v3/libmediasoupclient/index.md %} ### mediasoup-client-aiortc -{: .h3color} mediasoup-client handler for [aiortc](https://github.com/aiortc/aiortc/) Python library. Suitable for building Node.js applications that connect to a mediasoup server using WebRTC and exchange real audio, video and DataChannel messages with it in both directions. diff --git a/gulpfile.js b/gulpfile.js index d3e6077..46d172a 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -56,57 +56,39 @@ gulp.task('jekyll:watch', shell.task( [ 'bundle exec jekyll serve --host 0.0.0.0 -P 3001' ] )); -gulp.task('shields', async () => +gulp.task('versions', async () => { let tags; tags = await octokit.repos.listTags({ owner:'versatica', repo:'mediasoup' }); const mediasoupNodeVersion = getSemverVersions(tags.data)[0].name; - console.log('"shields" task | mediasoup node:', mediasoupNodeVersion); + console.log('"versions" task | mediasoup node:', mediasoupNodeVersion); const mediasoupRustVersion = getRustSemverVersions(tags.data)[0].name.replace(/^rust-/, ''); - console.log('"shields" task | mediasoup rust:', mediasoupRustVersion); + console.log('"versions" task | mediasoup rust:', mediasoupRustVersion); tags = await octokit.repos.listTags({ owner:'versatica', repo:'mediasoup-client' }); const mediasoupClientVersion = getSemverVersions(tags.data)[0].name; - console.log('"shields" task | mediasoup-client:', mediasoupClientVersion); + console.log('"versions" task | mediasoup-client:', mediasoupClientVersion); tags = await octokit.repos.listTags({ owner:'versatica', repo:'libmediasoupclient' }); const libmediasoupclientVersion = getSemverVersions(tags.data)[0].name; - console.log('"shields" task | libmediasoupclient:', libmediasoupclientVersion); + console.log('"versions" task | libmediasoupclient:', libmediasoupclientVersion); tags = await octokit.repos.listTags({ owner:'versatica', repo:'mediasoup-client-aiortc' }); const mediasoupClientAiortcVersion = getSemverVersions(tags.data)[0].name; - console.log('"shields" task | mediasoup-client-aiortc:', mediasoupClientAiortcVersion); - - // NOTE: If the library name contains a dash (-) don't use it below but use - // this Unicode symbol instead: – + console.log('"versions" task | mediasoup-client-aiortc:', mediasoupClientAiortcVersion); return gulp.src('_site/index.html') - .pipe(replace( - /__MEDIASOUP_NODE_VERSION_SHIELD__/g, - `https://img.shields.io/badge/mediasoup%20node-v${mediasoupNodeVersion}-1A9FC9` - )) - .pipe(replace( - /__MEDIASOUP_RUST_VERSION_SHIELD__/g, - `https://img.shields.io/badge/mediasoup%20rust-v${mediasoupRustVersion}-1A9FC9` - )) - .pipe(replace( - /__MEDIASOUP_CLIENT_VERSION_SHIELD__/g, - `https://img.shields.io/badge/mediasoup–client-v${mediasoupClientVersion}-1A9FC9` - )) - .pipe(replace( - /__LIBMEDIASOUPCLIENT_VERSION_SHIELD__/g, - `https://img.shields.io/badge/libmediasoupclient-v${libmediasoupclientVersion}-1A9FC9` - )) - .pipe(replace( - /__MEDIASOUP_CLIENT_AIORTC_VERSION_SHIELD__/g, - `https://img.shields.io/badge/mediasoup–client–aiortc-v${mediasoupClientAiortcVersion}-1A9FC9` - )) + .pipe(replace(/__MEDIASOUP_NODE_VERSION__/g, `v${mediasoupNodeVersion}`)) + .pipe(replace(/__MEDIASOUP_RUST_VERSION__/g, `v${mediasoupRustVersion}`)) + .pipe(replace(/__MEDIASOUP_CLIENT_VERSION__/g, `v${mediasoupClientVersion}`)) + .pipe(replace(/__LIBMEDIASOUPCLIENT_VERSION__/g, `v${libmediasoupclientVersion}`)) + .pipe(replace(/__MEDIASOUP_CLIENT_AIORTC_VERSION__/g, `v${mediasoupClientAiortcVersion}`)) .pipe(gulp.dest('./_site')); }); @@ -152,9 +134,9 @@ gulp.task('rsync', (done) => }); }); -gulp.task('build', gulp.series('clean', 'browserify', 'jekyll:build', 'shields', 'sitemap')); +gulp.task('build', gulp.series('clean', 'browserify', 'jekyll:build', 'versions', 'sitemap')); -gulp.task('live', gulp.series('clean', 'browserify', 'jekyll:watch', 'shields')); +gulp.task('live', gulp.series('clean', 'browserify', 'jekyll:watch', 'versions')); gulp.task('deploy', gulp.series('build', 'rsync')); diff --git a/images/arrow-up.svg b/images/arrow-up.svg index 08cf9f0..da566bc 100644 --- a/images/arrow-up.svg +++ b/images/arrow-up.svg @@ -1 +1,44 @@ - + + + + + + + diff --git a/images/close.svg b/images/close.svg index cbc52c8..62d14c8 100644 --- a/images/close.svg +++ b/images/close.svg @@ -1,4 +1,44 @@ - - - - \ No newline at end of file + + + + + + + diff --git a/images/icon-github.svg b/images/icon-github.svg index 25d9004..ab2fadb 100644 --- a/images/icon-github.svg +++ b/images/icon-github.svg @@ -1 +1,39 @@ - \ No newline at end of file + + + + + + diff --git a/images/icon-linkedin.svg b/images/icon-linkedin.svg index 0a3c799..eda08d9 100644 --- a/images/icon-linkedin.svg +++ b/images/icon-linkedin.svg @@ -1 +1,39 @@ - \ No newline at end of file + + + + + + diff --git a/images/icon-twitter.svg b/images/icon-twitter.svg index 7c22e25..f9ef1a3 100644 --- a/images/icon-twitter.svg +++ b/images/icon-twitter.svg @@ -1 +1,39 @@ - \ No newline at end of file + + + + + + diff --git a/images/icon-upwork.svg b/images/icon-upwork.svg index 64a9fea..d3d9789 100644 --- a/images/icon-upwork.svg +++ b/images/icon-upwork.svg @@ -1 +1,35 @@ - \ No newline at end of file + + diff --git a/images/icon-website.svg b/images/icon-website.svg index 05e5ac1..a47213c 100644 --- a/images/icon-website.svg +++ b/images/icon-website.svg @@ -1,4 +1,44 @@ - - - - \ No newline at end of file + + + + + + + diff --git a/images/jmillan.jpg b/images/jmillan.jpg index 6428846..9759b65 100644 Binary files a/images/jmillan.jpg and b/images/jmillan.jpg differ diff --git a/images/mediasoup-v3-architecture-01.svg b/images/mediasoup-v3-architecture-01.svg index 9613ddb..312a022 100644 --- a/images/mediasoup-v3-architecture-01.svg +++ b/images/mediasoup-v3-architecture-01.svg @@ -1,2 +1,2191 @@ - -
Host
Host
Worker 1
Worker 1
WebRtcTransport
WebRtcTransport
Audio Producer
Audio Producer
Video Producer
Video Producer
PlainRtpTransport
PlainRtpTransport
Video Producer
Video Producer
PipeTransport
PipeTransport
Video Consumer
Video ConsumerSRTPSRTP
Participant
(mic/webcam on)
Participant<br>(mic/webcam on)<br>
Participant
(viewer)
[Not supported by viewer]RTP
FFmpeg
(recording)
[Not supported by viewer]
GStreamer
(mp4 broadcaster)
GStreamer<br>(mp4 broadcaster)<br>RTP
Router 2
Router 2
Router 1
Router 1
Worker 2
Worker 2
PipeTransport
PipeTransport
Video Consumer
Video Consumer
Router 3
Router 3
PipeTransport
PipeTransport
Video Producer
Video Producer
Worker 3
Worker 3
PipeTransport
PipeTransport
Video Producer
Video Producer
Router 4
Router 4RTPRTP
Participant
(viewer)
[Not supported by viewer]
Participant
(viewer)
[Not supported by viewer]SRTPSRTPSRTP
Participant
(viewer)
[Not supported by viewer]
WebRtcTransport
WebRtcTransport
Video Consumer
Video Consumer
WebRtcTransport
WebRtcTransport
Video Consumer
Video Consumer
WebRtcTransport
WebRtcTransport
Video Consumer
Video Consumer
WebRtcTransport
WebRtcTransport
Video Consumer
Video Consumer
Participant
(viewer)
[Not supported by viewer]SRTP
WebRtcTransport
WebRtcTransport
Audio Consumer
Audio Consumer
Video Consumer
Video Consumer
PlainRtpTransport
PlainRtpTransport
Audio Consumer
Audio Consumer \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Host + + + Host + + + + + + + + Worker 1 + + + Worker 1 + + + + + + + + WebRtcTransport + + + WebRtcTransport + + + + + + + + + + Audio Producer + + + Audio Producer + + + + + + + + Video Producer + + + Video Producer + + + + + + + + + + + + PlainRtpTransport + + + PlainRtpTransport + + + + + + + + Video Producer + + + Video Producer + + + + + + + + + + PipeTransport + + + PipeTransport + + + + + + + + Video Consumer + + + Video Consumer + + + + + + + + + SRTP + + + + + + SRTP + + + + + + + Participant +(mic/webcam on) + + + + Participant<br>(mic/webcam on)<br> + + + + + + + + Participant +(viewer) + + + + [Not supported by viewer] + + + + + + + RTP + + + + + + + FFmpeg +(recording) + + + + [Not supported by viewer] + + + + + + + + GStreamer +(mp4 broadcaster) + + + + GStreamer<br>(mp4 broadcaster)<br> + + + + + + + RTP + + + + + + + Router 2 + + + Router 2 + + + + + + + + Router 1 + + + Router 1 + + + + + + + + Worker 2 + + + Worker 2 + + + + + + + + PipeTransport + + + PipeTransport + + + + + + + + Video Consumer + + + Video Consumer + + + + + + + + + + Router 3 + + + Router 3 + + + + + + + + PipeTransport + + + PipeTransport + + + + + + + + Video Producer + + + Video Producer + + + + + + + + Worker 3 + + + Worker 3 + + + + + + + + PipeTransport + + + PipeTransport + + + + + + + + Video Producer + + + Video Producer + + + + + + + + Router 4 + + + Router 4 + + + + + + + RTP + + + + + + RTP + + + + + + + + + + + Participant +(viewer) + + + + [Not supported by viewer] + + + + + + + + Participant +(viewer) + + + + [Not supported by viewer] + + + + + + + SRTP + + + + + + SRTP + + + + + + + + + + + + + + SRTP + + + + + + + Participant +(viewer) + + + + [Not supported by viewer] + + + + + + + + WebRtcTransport + + + WebRtcTransport + + + + + + + + Video Consumer + + + Video Consumer + + + + + + + + WebRtcTransport + + + WebRtcTransport + + + + + + + + Video Consumer + + + Video Consumer + + + + + + + + WebRtcTransport + + + WebRtcTransport + + + + + + + + Video Consumer + + + Video Consumer + + + + + + + + WebRtcTransport + + + WebRtcTransport + + + + + + + + Video Consumer + + + Video Consumer + + + + + + + + Participant +(viewer) + + + + [Not supported by viewer] + + + + + + + SRTP + + + + + + + WebRtcTransport + + + WebRtcTransport + + + + + + + + Audio Consumer + + + Audio Consumer + + + + + + + + Video Consumer + + + Video Consumer + + + + + + + + PlainRtpTransport + + + PlainRtpTransport + + + + + + + + Audio Consumer + + + Audio Consumer + + + + diff --git a/index.html b/index.html index db2e045..705c726 100644 --- a/index.html +++ b/index.html @@ -14,24 +14,25 @@

media 
$ npm install mediasoup
-

or

$ cargo add mediasoup
- +
+ +
-
+
@@ -60,6 +61,7 @@

Client side libraries

+ -