RTC: Refine player and publisher

trunk/research/players/rtc_player.html

@@ -66,8 +66,31 @@
     $(function(){
         // Async-await-promise based SRS RTC Player.
         function SrsRtcPlayerAsync() {
-            var self = {
+            var self = {};
-                play: async function(apiUrl, streamUrl) {
+
+            // @url The WebRTC url to play with, for example:
+            //      webrtc://r.ossrs.net/live/livestream
+            // or specifies the API port:
+            //      webrtc://r.ossrs.net:11985/live/livestream
+            // or autostart the play:
+            //      webrtc://r.ossrs.net/live/livestream?autostart=true
+            // or change the app from live to myapp:
+            //      webrtc://r.ossrs.net:11985/myapp/livestream
+            // or change the stream from livestream to mystream:
+            //      webrtc://r.ossrs.net:11985/live/mystream
+            // or set the api server to myapi.domain.com:
+            //      webrtc://myapi.domain.com/live/livestream
+            // or set the candidate(ip) of answer:
+            //      webrtc://r.ossrs.net/live/livestream?eip=39.107.238.185
+            // or force to access https API:
+            //      webrtc://r.ossrs.net/live/livestream?schema=https
+            // or use plaintext, without SRTP:
+            //      webrtc://r.ossrs.net/live/livestream?encrypt=false
+            // or any other information, will pass-by in the query:
+            //      webrtc://r.ossrs.net/live/livestream?vhost=xxx
+            //      webrtc://r.ossrs.net/live/livestream?token=xxx
+            self.play = async function(url) {
+                var conf = self.__internal.prepareUrl(url);
                 self.pc.addTransceiver("audio", {direction: "recvonly"});
                 self.pc.addTransceiver("video", {direction: "recvonly"});
 
@@ -76,12 +99,12 @@
                 var session = await new Promise(function(resolve, reject) {
                     // @see https://github.com/rtcdn/rtcdn-draft
                     var data = {
-                            api: apiUrl, streamurl: streamUrl, clientip: null, sdp: offer.sdp
+                        api: conf.apiUrl, streamurl: conf.streamUrl, clientip: null, sdp: offer.sdp
                     };
                     console.log("Generated offer: ", data);
 
                     $.ajax({
-                            type: "POST", url: apiUrl, data: JSON.stringify(data),
+                        type: "POST", url: conf.apiUrl, data: JSON.stringify(data),
                         contentType:'application/json', dataType: 'json'
                     }).done(function(data) {
                         console.log("Got answer: ", data);
@@ -98,152 +121,96 @@
                     new RTCSessionDescription({type: 'answer', sdp: session.sdp})
                 );
                 return session;
-                },
+            };
-                close: function() {
+
+            // Close the publisher.
+            self.close = function() {
                 self.pc.close();
+            };
+
+            // The callback when got remote stream.
+            self.onaddstream = function (event) {};
+
+            // Internal APIs.
+            self.__internal = {
+                defaultPath: '/rtc/v1/play/',
+                parse: function (url) {
+                    // @see: http://stackoverflow.com/questions/10469575/how-to-use-location-object-to-parse-url-without-redirecting-the-page-in-javascri
+                    var a = document.createElement("a");
+                    a.href = url.replace("rtmp://", "http://")
+                        .replace("webrtc://", "http://")
+                        .replace("rtc://", "http://");
+
+                    var vhost = a.hostname;
+                    var app = a.pathname.substr(1, a.pathname.lastIndexOf("/") - 1);
+                    var stream = a.pathname.substr(a.pathname.lastIndexOf("/") + 1);
+
+                    // parse the vhost in the params of app, that srs supports.
+                    app = app.replace("...vhost...", "?vhost=");
+                    if (app.indexOf("?") >= 0) {
+                        var params = app.substr(app.indexOf("?"));
+                        app = app.substr(0, app.indexOf("?"));
+
+                        if (params.indexOf("vhost=") > 0) {
+                            vhost = params.substr(params.indexOf("vhost=") + "vhost=".length);
+                            if (vhost.indexOf("&") > 0) {
+                                vhost = vhost.substr(0, vhost.indexOf("&"));
+                            }
+                        }
+                    }
+
+                    // when vhost equals to server, and server is ip,
+                    // the vhost is __defaultVhost__
+                    if (a.hostname === vhost) {
+                        var re = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;
+                        if (re.test(a.hostname)) {
+                            vhost = "__defaultVhost__";
+                        }
+                    }
+
+                    // parse the schema
+                    var schema = "rtmp";
+                    if (url.indexOf("://") > 0) {
+                        schema = url.substr(0, url.indexOf("://"));
+                    }
+
+                    var port = a.port;
+                    if (!port) {
+                        if (schema === 'http') {
+                            port = 80;
+                        } else if (schema === 'https') {
+                            port = 443;
+                        } else if (schema === 'rtmp') {
+                            port = 1935;
+                        }
+                    }
+
+                    var ret = {
+                        url: url,
+                        schema: schema,
+                        server: a.hostname, port: port,
+                        vhost: vhost, app: app, stream: stream
+                    };
+                    self.__internal.fill_query(a.search, ret);
+
+                    // For webrtc API, we use 443 if page is https, or schema specified it.
+                    if (!ret.port) {
+                        if (schema === 'webrtc' || schema === 'rtc') {
+                            if (ret.user_query.schema === 'https') {
+                                ret.port = 443;
+                            } else if (window.location.href.indexOf('https://') === 0) {
+                                ret.port = 443;
+                            } else {
+                                // For WebRTC, SRS use 1985 as default API port.
+                                ret.port = 1985;
+                            }
+                        }
+                    }
+
+                    return ret;
                 },
-                // callbacks.
+                prepareUrl: function (webrtcUrl) {
-                onaddstream: function (event) {}
+                    var urlObject = self.__internal.parse(webrtcUrl);
-            };
-
-            self.pc = new RTCPeerConnection(null);
-            self.pc.onaddstream = function (event) {
-                if (self.onaddstream) {
-                    self.onaddstream(event);
-                }
-            };
-            return self;
-        }
-
-        // Promise based SRS RTC Player.
-        function SrsRtcPlayerPromise() {
-            var self = {
-                play: function(apiUrl, streamUrl) {
-                    self.pc.addTransceiver("audio", {direction: "recvonly"});
-                    self.pc.addTransceiver("video", {direction: "recvonly"});
-
-                    return self.pc.createOffer().then(function(offer) {
-                        return self.pc.setLocalDescription(offer).then(function(){ return offer; });
-                    }).then(function(offer) {
-                        return new Promise(function(resolve, reject) {
-                            // @see https://github.com/rtcdn/rtcdn-draft
-                            var data = {
-                                api: apiUrl, streamurl: streamUrl, clientip: null, sdp: offer.sdp
-                            };
-                            console.log("Generated offer: ", data);
-
-                            $.ajax({
-                                type: "POST", url: apiUrl, data: JSON.stringify(data),
-                                contentType:'application/json', dataType: 'json'
-                            }).done(function(data) {
-                                console.log("Got answer: ", data);
-                                if (data.code) {
-                                    reject(data); return;
-                                }
-
-                                resolve(data);
-                            }).fail(function(reason){
-                                reject(reason);
-                            });
-                        });
-                    }).then(function(session) {
-                        return self.pc.setRemoteDescription(
-                            new RTCSessionDescription({type: 'answer', sdp: session.sdp})
-                        ).then(function(){ return session; });
-                    });
-                },
-                close: function() {
-                    self.pc.close();
-                },
-                // callbacks.
-                onaddstream: function (event) {}
-            };
-
-            self.pc = new RTCPeerConnection(null);
-            self.pc.onaddstream = function (event) {
-                if (self.onaddstream) {
-                    self.onaddstream(event);
-                }
-            };
-            return self;
-        }
-
-        // Callback based SRS RTC Player.
-        function SrsRtcPlayerCallbacks() {
-            var self = {
-                play: function(apiUrl, streamUrl, success, fail) {
-                    self.pc.addTransceiver("audio", {direction: "recvonly"});
-                    self.pc.addTransceiver("video", {direction: "recvonly"});
-
-                    self.pc.createOffer(function(offer){
-                        onOffer(offer);
-                    }, function(reason){
-                        fail(reason);
-                    });
-
-                    var onOffer = function(offer) {
-                        self.pc.setLocalDescription(offer, function(){
-                            onOfferDone(offer);
-                        }, function(reason) {
-                            fail(reason);
-                        });
-                    };
-
-                    var onOfferDone = function (offer) {
-                        // @see https://github.com/rtcdn/rtcdn-draft
-                        var data = {
-                            api: apiUrl, streamurl: streamUrl, clientip: null, sdp: offer.sdp
-                        };
-                        console.log("Generated offer: ", data);
-
-                        $.ajax({
-                            type: "POST", url: apiUrl, data: JSON.stringify(data),
-                            contentType:'application/json', dataType: 'json'
-                        }).done(function(data) {
-                            console.log("Got answer: ", data);
-                            if (data.code) {
-                                fail(data); return;
-                            }
-
-                            onAnswer(data);
-                        }).fail(function(reason){
-                            fail(reason);
-                        });
-                    };
-
-                    var onAnswer = function(session) {
-                        var answer = session.sdp;
-                        self.pc.setRemoteDescription(
-                            new RTCSessionDescription({type: 'answer', sdp: answer})
-                        ).then(function(){
-                            success(session);
-                        }).catch(function(reason) {
-                            fail(reason);
-                        });
-                    };
-                },
-                close: function() {
-                    self.pc.close();
-                },
-                // callbacks.
-                onaddstream: function (event) {}
-            };
-
-            self.pc = new RTCPeerConnection(null);
-            self.pc.onaddstream = function (event) {
-                if (self.onaddstream) {
-                    self.onaddstream(event);
-                }
-            };
-            return self;
-        }
-
-        // Build RTC api url.
-        var prepareUrl = function () {
-            var apiUrl, streamUrl;
-
-            if (true) {
-                var urlObject = parse_rtmp_url($("#txt_url").val());
 
                     // If user specifies the schema, use it as API schema.
                     var schema = urlObject.user_query.schema;
@@ -255,7 +222,7 @@
                     }
 
                     // @see https://github.com/rtcdn/rtcdn-draft
-                var api = urlObject.user_query.play || '/rtc/v1/play/';
+                    var api = urlObject.user_query.play || self.__internal.defaultPath;
                     if (api.lastIndexOf('/') !== api.length - 1) {
                         api += '/';
                     }
@@ -267,66 +234,77 @@
                         }
                     }
                     // Replace /rtc/v1/play/&k=v to /rtc/v1/play/?k=v
-                apiUrl = apiUrl.replace(api + '&', api + '?');
+                    var apiUrl = apiUrl.replace(api + '&', api + '?');
 
-                streamUrl = urlObject.url;
+                    var streamUrl = urlObject.url;
-            }
 
                     return {apiUrl: apiUrl, streamUrl: streamUrl, schema: schema, urlObject: urlObject, port: port};
+                },
+                fill_query: function (query_string, obj) {
+                    // pure user query object.
+                    obj.user_query = {};
+
+                    if (query_string.length === 0) {
+                        return;
+                    }
+
+                    // split again for angularjs.
+                    if (query_string.indexOf("?") >= 0) {
+                        query_string = query_string.split("?")[1];
+                    }
+
+                    var queries = query_string.split("&");
+                    for (var i = 0; i < queries.length; i++) {
+                        var elem = queries[i];
+
+                        var query = elem.split("=");
+                        obj[query[0]] = query[1];
+                        obj.user_query[query[0]] = query[1];
+                    }
+
+                    // alias domain for vhost.
+                    if (obj.domain) {
+                        obj.vhost = obj.domain;
+                    }
+                }
             };
 
-        // Start play with conf.
+            self.pc = new RTCPeerConnection(null);
-        var playStream = function (conf) {
+            self.pc.onaddstream = function (event) {
+                if (self.onaddstream) {
+                    self.onaddstream(event);
+                }
+            };
+
+            return self;
+        }
+
+        var sdk = null; // Global handler to do cleanup when replaying.
+        var startPlay = function() {
+            $('#rtc_media_player').show();
+
             // Close PC when user replay.
             if (sdk) {
                 sdk.close();
             }
 
-            // Use Callback style.
-            if (true) {
-                if (true) {
             sdk = new SrsRtcPlayerAsync();
-                } else {
-                    sdk = new SrsRtcPlayerPromise();
-                }
             sdk.onaddstream = function (event) {
                 console.log('Start play, event: ', event);
                 $('#rtc_media_player').prop('srcObject', event.stream);
             };
 
-                sdk.play(conf.apiUrl, conf.streamUrl).then(function(session){
+            // For example:
-                    var simulator = conf.schema + '//' + conf.urlObject.server + ':' + conf.port + '/rtc/v1/nack/';
+            //      webrtc://r.ossrs.net/live/livestream
+            var url = $("#txt_url").val();
+            sdk.play(url).then(function(session){
                 $('#sessionid').html(session.sessionid);
-                    $('#simulator-drop').attr('href', simulator + '?drop=1&username=' + 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);
             });
-            } else if (false) {
-                sdk = new SrsRtcPlayerCallbacks();
-                sdk.onaddstream = function (event) {
-                    console.log('Start play, event: ', event);
-                    $('#rtc_media_player').prop('srcObject', event.stream);
-                };
-
-                sdk.play(conf.apiUrl, conf.streamUrl, function (session) {
-                    var simulator = conf.schema + '//' + conf.urlObject.server + ':' + conf.port + '/rtc/v1/nack/';
-                    $('#sessionid').html(session.sessionid);
-                    $('#simulator-drop').attr('href', simulator + '?drop=1&username=' + session.sessionid);
-                }, function (reason) {
-                    sdk.close();
-                    $('#rtc_media_player').hide();
-                    throw reason;
-                });
-            }
-        };
-
-        var sdk = null; // Global handler to do cleanup when replaying.
-        var startPlay = function() {
-            $('#rtc_media_player').show();
-            var conf = prepareUrl();
-            playStream(conf);
         };
 
         $('#rtc_media_player').hide();

trunk/research/players/rtc_publisher.html

@@ -65,69 +65,56 @@
 <script type="text/javascript">
     var pc = null; // Global handler to do cleanup when replaying.
     $(function(){
-        var startPublish = function() {
+        // Async-awat-prmise based SRS RTC Publisher.
-            $('#rtc_media_player').show();
+        function SrsRtcPublisherAsync() {
-            var urlObject = parse_rtmp_url($("#txt_url").val());
+            var self = {};
-            var schema = window.location.protocol;
 
-            // Close PC when user replay.
+            // @url The WebRTC url to play with, for example:
-            if (pc) {
+            //      webrtc://r.ossrs.net/live/livestream
-                pc.close();
+            // or specifies the API port:
-            }
+            //      webrtc://r.ossrs.net:11985/live/livestream
+            // or autostart the publish:
+            //      webrtc://r.ossrs.net/live/livestream?autostart=true
+            // or change the app from live to myapp:
+            //      webrtc://r.ossrs.net:11985/myapp/livestream
+            // or change the stream from livestream to mystream:
+            //      webrtc://r.ossrs.net:11985/live/mystream
+            // or set the api server to myapi.domain.com:
+            //      webrtc://myapi.domain.com/live/livestream
+            // or set the candidate(ip) of answer:
+            //      webrtc://r.ossrs.net/live/livestream?eip=39.107.238.185
+            // or force to access https API:
+            //      webrtc://r.ossrs.net/live/livestream?schema=https
+            // or use plaintext, without SRTP:
+            //      webrtc://r.ossrs.net/live/livestream?encrypt=false
+            // or any other information, will pass-by in the query:
+            //      webrtc://r.ossrs.net/live/livestream?vhost=xxx
+            //      webrtc://r.ossrs.net/live/livestream?token=xxx
+            self.publish = async function (url) {
+                var conf = self.__internal.prepareUrl(url);
+                self.pc.addTransceiver("audio", {direction: "sendonly"});
+                self.pc.addTransceiver("video", {direction: "sendonly"});
 
-            pc = new RTCPeerConnection(null);
+                var stream = await navigator.mediaDevices.getUserMedia(
-            pc.addTransceiver("audio", {direction: "sendonly"});
+                    {audio: true, video: {height: {max: 320 }}}
-            pc.addTransceiver("video", {direction: "sendonly"});
+                );
-
+                // @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrack
-            var constraints = {
+                stream.getTracks().forEach(function(track) {
-                audio: true, video: {
+                    self.pc.addTrack(track);
-                    height: { max: 320 }
-                }
-            };
-            navigator.mediaDevices.getUserMedia(
-                constraints
-            ).then(function(stream) {
-                console.log('Got stream with constraints: ', constraints);
-                $('#rtc_media_player').prop('srcObject', stream);
-
-                pc.addStream(stream);
-
-                return new Promise(function(resolve, reject) {
-                    pc.createOffer(function(offer){
-                        resolve(offer);
-                    },function(reason){
-                        reject(reason);
                 });
-                });
+                self.onaddstream && self.onaddstream({stream: stream});
-            }).then(function(offer) {
-                return pc.setLocalDescription(offer).then(function(){ return offer; });
-            }).then(function(offer) {
-                return new Promise(function(resolve, reject) {
-                    var port = urlObject.port || 1985;
-
-                    // @see https://github.com/rtcdn/rtcdn-draft
-                    var api = urlObject.user_query.publish || '/rtc/v1/publish/';
-                    if (api.lastIndexOf('/') != api.length - 1) {
-                        api += '/';
-                    }
-
-                    var url = schema + '//' + urlObject.server + ':' + port + api;
-                    for (var key in urlObject.user_query) {
-                        if (key != 'api' && key != 'publish') {
-                            url += '&' + key + '=' + urlObject.user_query[key];
-                        }
-                    }
-                    // Replace /rtc/v1/publish/&k=v to /rtc/v1/publish/?k=v
-                    url = url.replace(api + '&', api + '?');
 
+                var offer = await self.pc.createOffer();
+                await self.pc.setLocalDescription(offer);
+                var session = await new Promise(function(resolve, reject) {
                     // @see https://github.com/rtcdn/rtcdn-draft
                     var data = {
-                        api: url, streamurl: urlObject.url, clientip: null, sdp: offer.sdp
+                        api: conf.apiUrl, streamurl: conf.streamUrl, clientip: null, sdp: offer.sdp
                     };
                     console.log("Generated offer: ", data);
 
                     $.ajax({
-                        type: "POST", url: url, data: JSON.stringify(data),
+                        type: "POST", url: conf.apiUrl, data: JSON.stringify(data),
                         contentType:'application/json', dataType: 'json'
                     }).done(function(data) {
                         console.log("Got answer: ", data);
@@ -135,24 +122,194 @@
                             reject(data); return;
                         }
 
-                        var simulator = schema + '//' + urlObject.server + ':' + port + '/rtc/v1/nack/';
+                        resolve(data);
-                        $('#sessionid').html(data.sessionid);
-                        $('#simulator-drop').attr('href', simulator + '?drop=1&username=' + data.sessionid);
-                        resolve(data.sdp);
                     }).fail(function(reason){
                         reject(reason);
                     });
                 });
-            }).then(function(answer) {
+                await self.pc.setRemoteDescription(
-                return pc.setRemoteDescription(new RTCSessionDescription({type: 'answer', sdp: answer}));
+                    new RTCSessionDescription({type: 'answer', sdp: session.sdp})
+                );
+                session.simulator = conf.schema + '//' + conf.urlObject.server + ':' + conf.port + '/rtc/v1/nack/';
+                return session;
+            };
+
+            // Close the publisher.
+            self.close = function() {
+                    self.pc.close();
+        };
+
+            // The callback when got local stream.
+            self.onaddstream = function (event) {};
+
+            // Internal APIs.
+            self.__internal = {
+                defaultPath: '/rtc/v1/publish/',
+                parse: function (url) {
+                    // @see: http://stackoverflow.com/questions/10469575/how-to-use-location-object-to-parse-url-without-redirecting-the-page-in-javascri
+                    var a = document.createElement("a");
+                    a.href = url.replace("rtmp://", "http://")
+                        .replace("webrtc://", "http://")
+                        .replace("rtc://", "http://");
+
+                    var vhost = a.hostname;
+                    var app = a.pathname.substr(1, a.pathname.lastIndexOf("/") - 1);
+                    var stream = a.pathname.substr(a.pathname.lastIndexOf("/") + 1);
+
+                    // parse the vhost in the params of app, that srs supports.
+                    app = app.replace("...vhost...", "?vhost=");
+                    if (app.indexOf("?") >= 0) {
+                        var params = app.substr(app.indexOf("?"));
+                        app = app.substr(0, app.indexOf("?"));
+
+                        if (params.indexOf("vhost=") > 0) {
+                            vhost = params.substr(params.indexOf("vhost=") + "vhost=".length);
+                            if (vhost.indexOf("&") > 0) {
+                                vhost = vhost.substr(0, vhost.indexOf("&"));
+                            }
+                        }
+                    }
+
+                    // when vhost equals to server, and server is ip,
+                    // the vhost is __defaultVhost__
+                    if (a.hostname === vhost) {
+                        var re = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;
+                        if (re.test(a.hostname)) {
+                            vhost = "__defaultVhost__";
+                        }
+                    }
+
+                    // parse the schema
+                    var schema = "rtmp";
+                    if (url.indexOf("://") > 0) {
+                        schema = url.substr(0, url.indexOf("://"));
+                    }
+
+                    var port = a.port;
+                    if (!port) {
+                        if (schema === 'http') {
+                            port = 80;
+                        } else if (schema === 'https') {
+                            port = 443;
+                        } else if (schema === 'rtmp') {
+                            port = 1935;
+                        }
+                    }
+
+                    var ret = {
+                        url: url,
+                        schema: schema,
+                        server: a.hostname, port: port,
+                        vhost: vhost, app: app, stream: stream
+                    };
+                    self.__internal.fill_query(a.search, ret);
+
+                    // For webrtc API, we use 443 if page is https, or schema specified it.
+                    if (!ret.port) {
+                        if (schema === 'webrtc' || schema === 'rtc') {
+                            if (ret.user_query.schema === 'https') {
+                                ret.port = 443;
+                            } else if (window.location.href.indexOf('https://') === 0) {
+                                ret.port = 443;
+                            } else {
+                                // For WebRTC, SRS use 1985 as default API port.
+                                ret.port = 1985;
+                            }
+                        }
+                    }
+
+                    return ret;
+                },
+                prepareUrl: function (webrtcUrl) {
+                    var urlObject = self.__internal.parse(webrtcUrl);
+
+                    // If user specifies the schema, use it as API schema.
+                    var schema = urlObject.user_query.schema;
+                    schema = schema ? schema + ':' : window.location.protocol;
+
+                    var port = urlObject.port || 1985;
+                    if (schema === 'https:') {
+                        port = urlObject.port || 443;
+                    }
+
+                    // @see https://github.com/rtcdn/rtcdn-draft
+                    var api = urlObject.user_query.play || self.__internal.defaultPath;
+                    if (api.lastIndexOf('/') !== api.length - 1) {
+                        api += '/';
+                    }
+
+                    apiUrl = schema + '//' + urlObject.server + ':' + port + api;
+                    for (var key in urlObject.user_query) {
+                        if (key !== 'api' && key !== 'play') {
+                            apiUrl += '&' + key + '=' + urlObject.user_query[key];
+                        }
+                    }
+                    // Replace /rtc/v1/play/&k=v to /rtc/v1/play/?k=v
+                    var apiUrl = apiUrl.replace(api + '&', api + '?');
+
+                    var streamUrl = urlObject.url;
+
+                    return {apiUrl: apiUrl, streamUrl: streamUrl, schema: schema, urlObject: urlObject, port: port};
+                },
+                fill_query: function (query_string, obj) {
+                    // pure user query object.
+                    obj.user_query = {};
+
+                    if (query_string.length === 0) {
+                        return;
+                    }
+
+                    // split again for angularjs.
+                    if (query_string.indexOf("?") >= 0) {
+                        query_string = query_string.split("?")[1];
+                    }
+
+                    var queries = query_string.split("&");
+                    for (var i = 0; i < queries.length; i++) {
+                        var elem = queries[i];
+
+                        var query = elem.split("=");
+                        obj[query[0]] = query[1];
+                        obj.user_query[query[0]] = query[1];
+                    }
+
+                    // alias domain for vhost.
+                    if (obj.domain) {
+                        obj.vhost = obj.domain;
+                    }
+                }
+            };
+
+            self.pc = new RTCPeerConnection(null);
+
+            return self;
+        }
+
+        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();
+            sdk.onaddstream = function (event) {
+                console.log('Start publish, event: ', event);
+                $('#rtc_media_player').prop('srcObject', event.stream);
+            };
+
+            // For example:
+            //      webrtc://r.ossrs.net/live/livestream
+            var url = $("#txt_url").val();
+            sdk.publish(url).then(function(session){
+                $('#sessionid').html(session.sessionid);
+                $('#simulator-drop').attr('href', session.simulator + '?drop=1&username=' + session.sessionid);
             }).catch(function (reason) {
-                pc.getLocalStreams().forEach(function(stream){
+                sdk.close();
-                    stream.getTracks().forEach(function(track) {
+                $('#rtc_media_player').hide();
-                        track.stop();
+                console.error(reason);
-                    });
-                });
-                pc.close(); $('#rtc_media_player').hide();
-                throw reason;
             });
         };
 

trunk/research/players/srs_publisher.html

@@ -24,11 +24,6 @@
                     <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_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">SRS-GB28181</a></li>
                 </ul>
             </div>
         </div>
@@ -40,8 +35,8 @@
         <button type="button" class="close" data-dismiss="alert">×</button>
         <strong><span id="txt_log_title">Warning:</span></strong>
         <span id="txt_log_msg">
-            Flash推流已经很少用，建议用<a href="https://obsproject.com/" target="_blank">OBS</a>或<a href="http://ffmpeg.org/" target="_blank">FFMPEG</a>推流，
+            Flash推流已经很少用，建议用<a href="rtc_publisher.html">RTC推流</a>，<a href="https://obsproject.com/" target="_blank">OBS</a>或<a href="http://ffmpeg.org/" target="_blank">FFMPEG</a>推流，
-            如果一定要使用Flash推流请点<a id="https_publisher" href="srs_publisher2.html">这里</a>。
+            如果一定要使用Flash推流请点<a id="https_publisher" href="srs_publisher_flash.html">这里</a>。
         </span>
     </div>
     <hr/>
@@ -56,12 +51,12 @@
     $(function(){
         var l = window.location;
         var url = window.location.href;
-        if (l.hostname !== 'localhost' && l.hostname !== '127.0.0.1' && l.protocol == 'http:') {
+        if (l.hostname !== 'localhost' && l.hostname !== '127.0.0.1' && l.protocol === 'http:') {
             // For flash publisher, must use HTTPS.
             url = window.location.href.replace('http:', 'https:');
         }
 
-        url = url.substr(0, url.lastIndexOf('/')) + '/srs_publisher2.html';
+        url = url.substr(0, url.lastIndexOf('/')) + '/srs_publisher_flash.html';
         $('#https_publisher').attr('href', url);
     });
 </script>

trunk/research/players/srs_publisher_flash.html

@@ -19,11 +19,6 @@
             <div class="nav-collapse collapse">
                 <ul class="nav">
                     <li><a id="nav_srs_player" href="srs_player.html">SRS播放器</a></li>
-                    <li class="active"><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">SRS-GB28181</a></li>
                 </ul>
             </div>
         </div>