Demo: Update srs.sdk.js

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(
+        var stream = await navigator.mediaDevices.getUserMedia(self.constraints);
-            {audio: true, video: {width: {max: 320}}}
+
-        );
         // @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;
 }
 
@@ -324,8 +339,12 @@ function SrsRtcPlayerAsync() {
         self.pc = null;
     };
 
-    // The callback when got remote stream.
+    // The callback when got remote track.
-    self.onaddstream = function (event) {};
+    // 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 +488,14 @@ function SrsRtcPlayerAsync() {
     };
 
     self.pc = new RTCPeerConnection(null);
-    self.pc.onaddstream = function (event) {
+
-        if (self.onaddstream) {
+    // Create a stream to add track to the stream, @see https://webrtc.org/getting-started/remote-streams
-            self.onaddstream(event);
+    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 +507,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) {
+            $('#rtc_media_publisher').prop('srcObject', publisher.stream);
-                console.log('Start publish, event: ', event);
-                $('#rtc_media_publisher').prop('srcObject', event.stream);
-            };
 
             return publisher.publish(url).then(function(session){
                 $('#self').text('Self: ' + url);
@@ -254,10 +251,7 @@
             }
 
             player = new SrsRtcPlayerAsync();
-            player.onaddstream = function (event) {
+            $('#rtc_media_player').prop('srcObject', player.stream);
-                console.log('Start play, event: ', event);
-                $('#rtc_media_player').prop('srcObject', event.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) {
+            $('#rtc_media_publisher').prop('srcObject', publisher.stream);
-                console.log('Start publish, event: ', event);
-                $('#rtc_media_publisher').prop('srcObject', event.stream);
-            };
 
             return publisher.publish(url).then(function(session){
                 $('#self').text('Self: ' + url);
@@ -178,10 +175,7 @@
             video.show();
             ui.show();
 
-            player.onaddstream = function (event) {
+            video.prop('srcObject', player.stream);
-                console.log('Start play, event: ', event);
-                video.prop('srcObject', event.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);
         });