Support Simulcast Stream (RID Based Simulcast)

trunk/research/players/js/srs.page.js

@@ -18,6 +18,7 @@ function update_nav() {
     $("#nav_rtc_player").attr("href", "rtc_player.html" + window.location.search);
     $("#nav_rtc_publisher").attr("href", "rtc_publisher.html" + window.location.search);
     $("#nav_srs_publisher").attr("href", "srs_publisher.html" + window.location.search);
+    $("#nav_srs_publisher_simulcast").attr("href", "srs_publisher_simulcast.html" + window.location.search);
     $("#nav_srs_chat").attr("href", "srs_chat.html" + window.location.search);
     $("#nav_srs_bwt").attr("href", "srs_bwt.html" + window.location.search);
     $("#nav_vlc").attr("href", "vlc.html" + window.location.search);

trunk/research/players/js/srs.sdk.js

@@ -46,14 +46,20 @@ function SrsRtcPublisherAsync() {
         var conf = self.__internal.prepareUrl(url);
         const parameter = QueryParameterByName('numberOfSimulcastLayers', conf.streamUrl);
         const numberOfSimulcastLayers = parseInt(parameter)
+        var forceSetBitrate = false
         if (numberOfSimulcastLayers > 1) {
             self.constraints.video = {  
                 wіdth: 1280, height: 720
             }
+            UpdateNativeCreateOffer(numberOfSimulcastLayers);
+            console.log('kSimulcastApiVersionLegacy')
+        } else if (parameter === 'spec3') {
+            self.constraints.video = {
+                wіdth: 1280, height: 720
+            }
+            forceSetBitrate = true;
+            console.log('kSimulcastApiVersionSpecCompliant')
         }
-        UpdateNativeCreateOffer(numberOfSimulcastLayers);
-        self.pc.addTransceiver("audio", {direction: "sendonly"});
-        self.pc.addTransceiver("video", {direction: "sendonly"});
 
         if (!navigator.mediaDevices && window.location.protocol === 'http:' && window.location.hostname !== 'localhost') {
             throw new Error(`Please use HTTPS or localhost to publish, read https://github.com/ossrs/srs/issues/2762#issuecomment-983147576`);
@@ -62,7 +68,20 @@ function SrsRtcPublisherAsync() {
 
         // @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrack
         stream.getTracks().forEach(function (track) {
-            self.pc.addTrack(track);
+            if (track.kind === 'video' && parameter === 'spec3') {
+                self.pc.addTransceiver(track, {
+                    active: true,
+                    direction: "sendonly",
+                    sendEncodings: [
+                        // NOTE: modify from media/engine/simulcast.cc
+                        {rid: "high", active: true, maxBitrate: 5000 * 1024},
+                        {rid: "mid", active: true, maxBitrate: 1500 * 1024, scaleResolutionDownBy: 2},
+                        {rid: "low", active: true, maxBitrate: 400 * 1024, scaleResolutionDownBy: 4},
+                    ]
+                })
+            } else {
+                self.pc.addTrack(track, stream);
+            }
 
             // Notify about local track when stream is ok.
             self.ontrack && self.ontrack({track: track});
@@ -93,9 +112,24 @@ function SrsRtcPublisherAsync() {
                 reject(reason);
             });
         });
-        await self.pc.setRemoteDescription(
-            new RTCSessionDescription({type: 'answer', sdp: session.sdp})
-        );
+
+
+        if (forceSetBitrate) {
+            var arr = session.sdp.split('\r\n');
+            arr.forEach((str, i) => {
+                // TODO: FIXME: adapter to different browers.
+                if (/^a=fmtp:\d*/.test(str)) {
+                    arr[i] = str + ';x-google-min-bitrate=5000;x-google-max-bitrate=8000;x-google-start-bitrate=6000';
+                }
+            });
+            await self.pc.setRemoteDescription(
+                new RTCSessionDescription({type: 'answer', sdp: arr.join('\r\n')})
+            );
+        } else {
+            await self.pc.setRemoteDescription(
+                new RTCSessionDescription({type: 'answer', sdp: session.sdp})
+            );
+        }
         session.simulator = conf.schema + '//' + conf.urlObject.server + ':' + conf.port + '/rtc/v1/nack/';
 
         return session;
@@ -620,4 +654,4 @@ function QueryParameterByName(name, url) {
     if (!results) return null;
     if (!results[2]) return '';
     return decodeURIComponent(results[2].replace(/\+/g, ' '));
-}
+}

trunk/research/players/rtc_player.html

@@ -26,6 +26,7 @@
                     <li><a id="nav_srs_player" href="srs_player.html">SRS播放器</a></li>
                     <li class="active"><a id="nav_rtc_player" href="rtc_player.html">RTC播放器</a></li>
                     <li><a id="nav_rtc_publisher" href="rtc_publisher.html">RTC推流</a></li>
+                    <li><a id="nav_rtc_publisher_simulcast" href="rtc_publisher_simulcast.html">Simulcast推流</a></li>
                     <li><a  href="http://ossrs.net/srs.release/releases/app.html">iOS/Andriod</a></li>
                     <!--<li><a id="nav_srs_publisher" href="srs_publisher.html">SRS编码器</a></li>-->
                     <!--<li><a id="nav_srs_chat" href="srs_chat.html">SRS会议</a></li>-->

trunk/research/players/rtc_publisher.html

@@ -27,6 +27,7 @@
                     <li><a id="nav_srs_player" href="srs_player.html">SRS播放器</a></li>
                     <li><a id="nav_rtc_player" href="rtc_player.html">RTC播放器</a></li>
                     <li class="active"><a id="nav_rtc_publisher" href="rtc_publisher.html">RTC推流</a></li>
+                    <li><a id="nav_rtc_publisher_simulcast" href="rtc_publisher_simulcast.html">Simulcast推流</a></li>
                     <li><a  href="http://ossrs.net/srs.release/releases/app.html">iOS/Andriod</a></li>
                     <!--<li><a id="nav_srs_publisher" href="srs_publisher.html">SRS编码器</a></li>-->
                     <!--<li><a id="nav_srs_chat" href="srs_chat.html">SRS会议</a></li>-->

trunk/research/players/rtc_publisher_simulcast.html

@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>SRS</title>
+    <meta charset="utf-8">
+    <style>
+        body{
+            padding-top: 30px;
+        }
+    </style>
+    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
+    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
+    <script type="text/javascript" src="js/adapter-7.4.0.min.js"></script>
+    <script type="text/javascript" src="js/srs.sdk.js"></script>
+    <script type="text/javascript" src="js/winlin.utility.js"></script>
+    <script type="text/javascript" src="js/sdp.js"></script>
+    <script type="text/javascript" src="js/srs.page.js"></script>
+</head>
+<body>
+<img src='https://ossrs.net/gif/v1/sls.gif?site=ossrs.net&path=/player/rtcpublisher'/>
+<div class="navbar navbar-fixed-top">
+    <div class="navbar-inner">
+        <div class="container">
+            <a id="srs_index" class="brand" href="https://github.com/ossrs/srs">SRS</a>
+            <div class="nav-collapse collapse">
+                <ul class="nav">
+                    <li><a id="nav_srs_player" href="srs_player.html">SRS播放器</a></li>
+                    <li><a id="nav_rtc_player" href="rtc_player.html">RTC播放器</a></li>
+                    <li><a id="nav_rtc_publisher" href="rtc_publisher.html">RTC推流</a></li>
+                    <li class="active"><a id="nav_rtc_publisher_simulcast" href="rtc_publisher_simulcast.html">Simulcast推流</a></li>
+                    <li><a  href="http://ossrs.net/srs.release/releases/app.html">iOS/Andriod</a></li>
+                    <!--<li><a id="nav_srs_publisher" href="srs_publisher.html">SRS编码器</a></li>-->
+                    <!--<li><a id="nav_srs_chat" href="srs_chat.html">SRS会议</a></li>-->
+                    <!--<li><a id="nav_srs_bwt" href="srs_bwt.html">SRS测网速</a></li>-->
+                    <!--<li><a id="nav_vlc" href="vlc.html">VLC播放器</a></li>-->
+                    <!--<li><a id="nav_gb28181" href="srs_gb28181.html">GB28181</a></li>-->
+                    <li>
+                        <a href="https://github.com/ossrs/srs">
+                            <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/ossrs/srs?style=social">
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="container">
+    <div class="form-inline">
+        URL:
+        <input type="text" id="txt_url" class="input-xxlarge" value="">
+        <button class="btn btn-primary" id="btn_publish">开始推流</button>
+    </div>
+
+    <label></label>
+    <video id="rtc_media_player" width="320" autoplay muted></video>
+
+    <label></label>
+    SessionID: <span id='sessionid'></span>
+
+    <label></label>
+    <input type="checkbox" id="audio-check-box" name="audio-check-box" value="enabled" checked onclick="switchMediaState(this)">Audio: </input>
+    <span id='acodecs'></span><br/>
+    <input type="checkbox" id="video-check-box" name="video-check-box" value="enabled" checked onclick="switchMediaState(this)" disabled="disabled">Video:</input>
+    <span id='vcodecs'></span>
+
+    <label></label>
+    Simulator: <a href='#' id='simulator-drop'>Drop</a>
+
+    <footer>
+        <p></p>
+        <p><a href="https://github.com/ossrs/srs">SRS Team &copy; 2020</a></p>
+    </footer>
+</div>
+<script type="text/javascript">
+
+function switchMediaState (obj) {
+    if (obj.value === 'enabled') {
+        obj.value = 'disabled'
+    } else {
+        obj.value = 'enabled'
+    }
+}
+
+$(function(){
+    var sdk = null; // Global handler to do cleanup when republishing.
+    var startPublish = function() {
+        $('#rtc_media_player').show();
+
+        // Close PC when user replay.
+        if (sdk) {
+            sdk.close();
+        }
+        sdk = new SrsRtcPublisherAsync();
+        if ($("#audio-check-box").val() === 'disabled') {
+            delete sdk.constraints.audio
+            console.log('audio', $("#audio-check-box").val(), 'video', $("#video-check-box").val())
+            console.log('sdk.constraints', sdk.constraints)
+        }
+
+        // User should set the stream when publish is done, @see https://webrtc.org/getting-started/media-devices
+        // However SRS SDK provides a consist API like https://webrtc.org/getting-started/remote-streams
+        // Optional callback, SDK will add track to stream.
+        // sdk.ontrack = function (event) { console.log('Got track', event); sdk.stream.addTrack(event.track); };
+
+        // https://developer.mozilla.org/en-US/docs/Web/Media/Formats/WebRTC_codecs#getting_the_supported_codecs
+        sdk.pc.onicegatheringstatechange = function (event) {
+            if (sdk.pc.iceGatheringState === "complete") {
+                $('#acodecs').html(SrsRtcFormatSenders(sdk.pc.getSenders(), "audio"));
+                $('#vcodecs').html(SrsRtcFormatSenders(sdk.pc.getSenders(), "video"));
+            }
+        };
+
+        // For example: webrtc://r.ossrs.net/live/livestream
+        var url = $("#txt_url").val();
+        if (-1 === url.indexOf("?numberOfSimulcastLayers=spec3")) {
+            $("#txt_url").val(`${url}?numberOfSimulcastLayers=spec3`);
+            url = $("#txt_url").val();
+        }
+        sdk.publish(url).then(function(session){
+            $('#rtc_media_player').prop('srcObject', sdk.stream);
+            $('#sessionid').html(session.sessionid);
+            $('#simulator-drop').attr('href', session.simulator + '?drop=1&username=' + session.sessionid);
+        }).catch(function (reason) {
+            sdk.close();
+            $('#rtc_media_player').hide();
+            console.error(reason);
+        });
+    };
+
+    $('#rtc_media_player').hide();
+    var query = parse_query_string();
+    srs_init_rtc("#txt_url", query);
+
+    $("#btn_publish").click(startPublish);
+    if (query.autostart === 'true') {
+        startPublish();
+    }
+});
+</script>
+</body>
+</html>
+
+</html>

trunk/research/players/srs_bwt.html

@@ -25,6 +25,7 @@
                     <li><a id="nav_srs_player" href="srs_player.html">SRS播放器</a></li>
                     <li><a id="nav_rtc_player" href="rtc_player.html">RTC播放器</a></li>
                     <li><a id="nav_rtc_publisher" href="rtc_publisher.html">RTC推流</a></li>
+                    <li><a id="nav_rtc_publisher_simulcast" href="rtc_publisher_simulcast.html">Simulcast推流</a></li>
                     <li><a id="nav_srs_publisher" href="srs_publisher.html">SRS编码器</a></li>
                     <li><a id="nav_srs_chat" href="srs_chat.html">SRS会议</a></li>
                     <li class="active"><a id="nav_srs_bwt" href="srs_bwt.html">SRS测网速</a></li>

trunk/research/players/srs_chat.html

@@ -24,6 +24,7 @@
                     <li><a id="nav_srs_player" href="srs_player.html">SRS播放器</a></li>
                     <li><a id="nav_rtc_player" href="rtc_player.html">RTC播放器</a></li>
                     <li><a id="nav_rtc_publisher" href="rtc_publisher.html">RTC推流</a></li>
+                    <li><a id="nav_rtc_publisher_simulcast" href="rtc_publisher_simulcast.html">Simulcast推流</a></li>
                     <li><a id="nav_srs_publisher" href="srs_publisher.html">SRS编码器</a></li>
                     <li class="active"><a id="nav_srs_chat" href="srs_chat.html">SRS会议</a></li>
                     <li><a id="nav_srs_bwt" href="srs_bwt.html">SRS测网速</a></li>

trunk/research/players/srs_gb28181.html

@@ -38,6 +38,7 @@
                     <li><a id="nav_srs_player" href="srs_player.html">SRS播放器</a></li>
                     <li><a id="nav_rtc_player" href="rtc_player.html">RTC播放器</a></li>
                     <li><a id="nav_rtc_publisher" href="rtc_publisher.html">RTC推流</a></li>
+                    <li><a id="nav_rtc_publisher_simulcast" href="rtc_publisher_simulcast.html">Simulcast推流</a></li>
                     <li><a  href="http://ossrs.net/srs.release/releases/app.html">iOS/Andriod</a></li>
                     <!--<li><a id="nav_srs_publisher" href="srs_publisher.html">SRS编码器</a></li>-->
                     <!--<li><a id="nav_srs_chat" href="srs_chat.html">SRS会议</a></li>-->

trunk/research/players/srs_player.html

@@ -21,6 +21,7 @@
                     <li class="active"><a id="nav_srs_player" href="srs_player.html">SRS播放器</a></li>
                     <li><a id="nav_rtc_player" href="rtc_player.html">RTC播放器</a></li>
                     <li><a id="nav_rtc_publisher" href="rtc_publisher.html">RTC推流</a></li>
+                    <li><a id="nav_rtc_publisher_simulcast" href="rtc_publisher_simulcast.html">Simulcast推流</a></li>
                     <li><a  href="http://ossrs.net/srs.release/releases/app.html">iOS/Andriod</a></li>
                     <!--<li><a id="nav_srs_publisher" href="srs_publisher.html">SRS编码器</a></li>-->
                     <!--<li><a id="nav_srs_chat" href="srs_chat.html">SRS会议</a></li>-->

trunk/research/players/srs_player_deprecated.html

@@ -35,6 +35,7 @@
                     <li class="active"><a id="nav_srs_player" href="srs_player.html">SRS播放器</a></li>
                     <li><a id="nav_rtc_player" href="rtc_player.html">RTC播放器</a></li>
                     <li><a id="nav_rtc_publisher" href="rtc_publisher.html">RTC推流</a></li>
+                    <li><a id="nav_rtc_publisher_simulcast" href="rtc_publisher_simulcast.html">Simulcast推流</a></li>
                     <li><a  href="http://ossrs.net/srs.release/releases/app.html">iOS/Andriod</a></li>
                     <!--<li><a id="nav_srs_publisher" href="srs_publisher.html">SRS编码器</a></li>-->
                     <!--<li><a id="nav_srs_chat" href="srs_chat.html">SRS会议</a></li>-->

trunk/research/players/srs_publisher.html

@@ -24,6 +24,7 @@
                     <li><a id="nav_srs_player" href="srs_player.html">SRS播放器</a></li>
                     <li><a id="nav_rtc_player" href="rtc_player.html">RTC播放器</a></li>
                     <li><a id="nav_rtc_publisher" href="rtc_publisher.html">RTC推流</a></li>
+                    <li><a id="nav_rtc_publisher_simulcast" href="rtc_publisher_simulcast.html">Simulcast推流</a></li>
                 </ul>
             </div>
         </div>

trunk/research/players/vlc.html

@@ -21,6 +21,7 @@
                     <li><a id="nav_srs_player" href="srs_player.html">SRS播放器</a></li>
                     <li><a id="nav_rtc_player" href="rtc_player.html">RTC播放器</a></li>
                     <li><a id="nav_rtc_publisher" href="rtc_publisher.html">RTC推流</a></li>
+                    <li><a id="nav_rtc_publisher_simulcast" href="rtc_publisher_simulcast.html">Simulcast推流</a></li>
                     <li><a id="nav_srs_publisher" href="srs_publisher.html">SRS编码器</a></li>
                     <li><a id="nav_srs_chat" href="srs_chat.html">SRS会议</a></li>
                     <li><a id="nav_srs_bwt" href="srs_bwt.html">SRS测网速</a></li>