SquashSRS4: Refine srs.sdk.js

AUTHORS.txt

@@ -84,3 +84,5 @@ CONTRIBUTORS ordered by first contribution.
 * xbpeng121<53243357+xbpeng121@users.noreply.github.com>
 * johzzy<hellojinqiang@gmail.com>
 * stone<bluestn@163.com>
+* cfw11<34058899+cfw11@users.noreply.github.com>
+* louis.xia<68469352@qq.com>

README.md

@@ -9,9 +9,10 @@ SRS/4.0，[Leo][release4]，是一个简单高效的实时视频服务器，支
 
 SRS is a simple, high efficiency and realtime video server, supports RTMP/WebRTC/HLS/HTTP-FLV/SRT/GB28181.
 
-> Note: SRS is licenced under [MIT][LICENSE], but some depended libraries are distributed using their [own licenses][LicenseMixing].
+SRS is licenced under [MIT][LICENSE], but some depended libraries are distributed using their [own licenses][LicenseMixing].
 
 <a name="product"></a>
+<a name="usage-docker"></a>
 ## Usage
 
 Run SRS by [docker][docker-srs4], images is [here](https://hub.docker.com/r/ossrs/srs/tags) or [there](https://cr.console.aliyun.com/repository/cn-hangzhou/ossrs/srs/images), 
@@ -23,6 +24,7 @@ docker run --rm -it -p 1935:1935 -p 1985:1985 -p 8080:8080 \
     ossrs/srs:v4.0.117 ./objs/srs -c conf/srs.conf
 ```
 
+<a name="usage-source"></a>
 Or build SRS from source(or [mirrors](#mirrors)), by CentOS7(or Linux([CN][v4_CN_Build],[EN][v4_EN_Build])):
 
 ```
@@ -77,15 +79,20 @@ Other important wiki:
 
 ## Ports
 
-The ports used by SRS:
+The ports used by SRS, kernel services:
+
+* tcp://1935, for RTMP live streaming server([CN][v4_CN_DeliveryRTMP],[EN][v4_EN_DeliveryRTMP]).
+* tcp://1985, HTTP API server, for HTTP-API([CN][v4_CN_HTTPApi], [EN][v4_EN_HTTPApi]), WebRTC([CN][v4_CN_WebRTC], [EN][v4_EN_WebRTC]), etc.
+* tcp://8080, HTTP live streaming server, HTTP-FLV([CN][v4_CN_SampleHttpFlv], [EN][v4_EN_SampleHttpFlv]), HLS([CN][v4_CN_SampleHLS], [EN][v4_EN_SampleHLS]) as such.
+* udp://8000, WebRTC Media([CN][v4_CN_WebRTC], [EN][v4_EN_WebRTC]) server.
+
+For optional HTTPS services, which might be provided by other web servers:
 
-* tcp://1935, for RTMP live streaming server.
-* tcp://1985, HTTP API server.
-* tcp://1990, HTTPS API server.
-* tcp://8080, HTTP live streaming server.
 * tcp://8088, HTTPS live streaming server.
-* udp://8000, [WebRTC Media](https://github.com/ossrs/srs/wiki/v4_CN_WebRTC) server.
-* udp://1980, [WebRTC Signaling](https://github.com/ossrs/signaling#usage) server.
+* tcp://1990, HTTPS API server.
+
+For optional stream caster services, to push streams to SRS:
+
 * udp://8935, Stream Caster: [Push MPEGTS over UDP](https://github.com/ossrs/srs/wiki/v4_CN_Streamer#push-mpeg-ts-over-udp) server.
 * tcp://554, Stream Caster: [Push RTSP](https://github.com/ossrs/srs/wiki/v4_CN_Streamer#push-rtsp-to-srs) server.
 * tcp://8936, Stream Caster: [Push HTTP-FLV](https://github.com/ossrs/srs/wiki/v4_CN_Streamer#push-http-flv-to-srs) server.
@@ -93,6 +100,10 @@ The ports used by SRS:
 * udp://9000, Stream Caster: [Push GB28181 Media(bundle)](https://github.com/ossrs/srs/issues/1500#issuecomment-606695679) server.
 * udp://58200-58300, Stream Caster: [Push GB28181 Media(no-bundle)](https://github.com/ossrs/srs/issues/1500#issuecomment-606695679) server.
 * udp://10080, Stream Caster: [Push SRT Media](https://github.com/ossrs/srs/issues/1147#issuecomment-577469119) server.
+  
+For external services to work with SRS:
+
+* udp://1989, [WebRTC Signaling](https://github.com/ossrs/signaling#usage) server.
 
 ## Features
 
@@ -1298,14 +1309,13 @@ Remark:
 |   ......)            |                            |                |
 +----------------------+                            |                |
 |  MediaSource(2)      |                            |                |
-|  (RTSP,FILE,         |                            |                |
-|   HTTP,HLS,   --push-+->- StreamCaster(4) -(rtmp)-+-> SRS          |
-|   Device,            |                            |                |
+|  (MPEGTSoverUDP      |                            |                |
+|   HTTP-FLV,   --push-+->- StreamCaster(4) -(rtmp)-+-> SRS          |
+|   GB28181,SRT,       |                            |                |
 |   ......)            |                            |                |
 +----------------------+                            |                |
 |  FFMPEG --push(srt)--+->- SRTModule(5)  ---(rtmp)-+-> SRS          |
 +----------------------+----------------------------+----------------+
-
 ```
 
 Remark:

trunk/3rdparty/signaling/www/demos/index.html

@@ -19,7 +19,16 @@
     let elems = document.getElementsByClassName('srs_demo');
     for (var i = 0; i < elems.length; i++) {
         let elem = elems.item(i);
-        elem.setAttribute('href', elem.getAttribute('href') + '&room=' + roomName);
+
+        // Use random room.
+        let href = elem.getAttribute('href') + '&room=' + roomName;
+
+        // For run demos on SRS http server.
+        if (window.location.port === '8080') {
+            href += '&wsp=1989';
+        }
+
+        elem.setAttribute('href', href);
     }
 </script>
 </body>

trunk/3rdparty/signaling/www/demos/js/srs.sdk.js

@@ -29,6 +29,14 @@
 function SrsRtcPublisherAsync() {
     var self = {};
 
+    // https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
+    self.constraints = {
+        audio: true,
+        video: {
+            width: {ideal: 320, max: 576}
+        }
+    };
+
     // @see https://github.com/rtcdn/rtcdn-draft
     // @url The WebRTC url to play with, for example:
     //      webrtc://r.ossrs.net/live/livestream
@@ -56,12 +64,14 @@ function SrsRtcPublisherAsync() {
         self.pc.addTransceiver("audio", {direction: "sendonly"});
         self.pc.addTransceiver("video", {direction: "sendonly"});
 
-        var stream = await navigator.mediaDevices.getUserMedia(
-            {audio: true, video: {width: {max: 320}}}
-        );
+        var stream = await navigator.mediaDevices.getUserMedia(self.constraints);
+
         // @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrack
         stream.getTracks().forEach(function (track) {
             self.pc.addTrack(track);
+
+            // Notify about local track when stream is ok.
+            self.ontrack && self.ontrack({track: track});
         });
 
         var offer = await self.pc.createOffer();
@@ -94,9 +104,6 @@ function SrsRtcPublisherAsync() {
         );
         session.simulator = conf.schema + '//' + conf.urlObject.server + ':' + conf.port + '/rtc/v1/nack/';
 
-        // Notify about local stream when success.
-        self.onaddstream && self.onaddstream({stream: stream});
-
         return session;
     };
 
@@ -107,7 +114,10 @@ function SrsRtcPublisherAsync() {
     };
 
     // The callback when got local stream.
-    self.onaddstream = function (event) {
+    // @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrack
+    self.ontrack = function (event) {
+        // Add track to stream of SDK.
+        self.stream.addTrack(event.track);
     };
 
     // Internal APIs.
@@ -253,6 +263,11 @@ function SrsRtcPublisherAsync() {
 
     self.pc = new RTCPeerConnection(null);
 
+    // To keep api consistent between player and publisher.
+    // @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrack
+    // @see https://webrtc.org/getting-started/media-devices
+    self.stream = new MediaStream();
+
     return self;
 }
 
@@ -315,6 +330,7 @@ function SrsRtcPlayerAsync() {
         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;
     };
 
@@ -324,8 +340,12 @@ function SrsRtcPlayerAsync() {
         self.pc = null;
     };
 
-    // The callback when got remote stream.
-    self.onaddstream = function (event) {};
+    // The callback when got remote track.
+    // Note that the onaddstream is deprecated, @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/onaddstream
+    self.ontrack = function (event) {
+        // https://webrtc.org/getting-started/remote-streams
+        self.stream.addTrack(event.track);
+    };
 
     // Internal APIs.
     self.__internal = {
@@ -469,9 +489,14 @@ function SrsRtcPlayerAsync() {
     };
 
     self.pc = new RTCPeerConnection(null);
-    self.pc.onaddstream = function (event) {
-        if (self.onaddstream) {
-            self.onaddstream(event);
+
+    // Create a stream to add track to the stream, @see https://webrtc.org/getting-started/remote-streams
+    self.stream = new MediaStream();
+
+    // https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/ontrack
+    self.pc.ontrack = function(event) {
+        if (self.ontrack) {
+            self.ontrack(event);
         }
     };
 
@@ -483,7 +508,8 @@ function SrsRtcPlayerAsync() {
 function SrsRtcFormatSenders(senders, kind) {
     var codecs = [];
     senders.forEach(function (sender) {
-        sender.getParameters().codecs.forEach(function(c) {
+        var params = sender.getParameters();
+        params && params.codecs && params.codecs.forEach(function(c) {
             if (kind && sender.track.kind !== kind) {
                 return;
             }

trunk/3rdparty/signaling/www/demos/one2one.html

@@ -22,7 +22,7 @@
             <a class="brand" href="https://github.com/ossrs/srs">SRS</a>
             <div class="nav-collapse collapse">
                 <ul class="nav srs_nav">
-                    <li class="active"><a href="#">一对一通话</a></li>
+                    <li class="active"><a href="one2one.html">一对一通话</a></li>
                     <li><a href="room.html">多人通话</a></li>
                     <li class="srs_ignore">
                         <a href="https://github.com/ossrs/signaling">
@@ -226,10 +226,7 @@
                 publisher.close();
             }
             publisher = new SrsRtcPublisherAsync();
-            publisher.onaddstream = function (event) {
-                console.log('Start publish, event: ', event);
-                $('#rtc_media_publisher').prop('srcObject', event.stream);
-            };
+            $('#rtc_media_publisher').prop('srcObject', publisher.stream);
 
             return publisher.publish(url).then(function(session){
                 $('#self').text('Self: ' + url);
@@ -254,10 +251,7 @@
             }
 
             player = new SrsRtcPlayerAsync();
-            player.onaddstream = function (event) {
-                console.log('Start play, event: ', event);
-                $('#rtc_media_player').prop('srcObject', event.stream);
-            };
+            $('#rtc_media_player').prop('srcObject', player.stream);
 
             player.play(url).then(function(session){
                 $('#peer').text('Peer: ' + display);
@@ -284,7 +278,7 @@
         $('#ff_preview').attr('href', 'http://ossrs.net/players/srs_player.html?app=' + $('#txt_room').val() + '&stream=merge.flv&server=' + conf.host + '&vhost=' + conf.host + '&autostart=true');
 
         // Update href for all navs.
-        $('ul.srs_nav').children('li').not('.srs_ignore').children('a').not("[href='#']").each(function (i, e) {
+        $('ul.srs_nav').children('li').not('.srs_ignore').children('a').each(function (i, e) {
             $(e).attr('href', $(e).attr('href') + conf.rawQuery);
         });
 

trunk/3rdparty/signaling/www/demos/room.html

@@ -23,7 +23,7 @@
             <div class="nav-collapse collapse">
                 <ul class="nav srs_nav">
                     <li><a href="one2one.html">一对一通话</a></li>
-                    <li class="active"><a href="#">多人通话</a></li>
+                    <li class="active"><a href="room.html">多人通话</a></li>
                     <li class="srs_ignore">
                         <a href="https://github.com/ossrs/signaling">
                             <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/ossrs/signaling?style=social">
@@ -139,10 +139,7 @@
                 publisher.close();
             }
             publisher = new SrsRtcPublisherAsync();
-            publisher.onaddstream = function (event) {
-                console.log('Start publish, event: ', event);
-                $('#rtc_media_publisher').prop('srcObject', event.stream);
-            };
+            $('#rtc_media_publisher').prop('srcObject', publisher.stream);
 
             return publisher.publish(url).then(function(session){
                 $('#self').text('Self: ' + url);
@@ -178,10 +175,7 @@
             video.show();
             ui.show();
 
-            player.onaddstream = function (event) {
-                console.log('Start play, event: ', event);
-                video.prop('srcObject', event.stream);
-            };
+            video.prop('srcObject', player.stream);
 
             player.play(url).then(function(session){
                 ui.children('#peer').text('Peer: ' + url);
@@ -200,7 +194,7 @@
         $('#txt_display').val(conf.display);
 
         // Update href for all navs.
-        $('ul.srs_nav').children('li').not('.srs_ignore').children('a').not("[href='#']").each(function (i, e) {
+        $('ul.srs_nav').children('li').not('.srs_ignore').children('a').each(function (i, e) {
             $(e).attr('href', $(e).attr('href') + conf.rawQuery);
         });
 

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

@@ -330,6 +330,8 @@ function SrsRtcPlayerAsync() {
         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;
     };