@flashphoner/websdk 2.0.209 → 2.0.210

package/docTemplate/README.md

@@ -1,4 +1,4 @@
-Web SDK - 2.0.209
+Web SDK - 2.0.210
 
 [Download builds](https://docs.flashphoner.com/display/WEBSDK2EN/Web+SDK+release+notes)
 

package/examples/demo/streaming/2players/2players.js

@@ -112,11 +112,6 @@ function playBtnClick(index) {
 
         if (Flashphoner.getMediaProviders()[0] === "WSPlayer") {
             Flashphoner.playFirstSound();
-        } else if (Browser.isSafariWebRTC()) {
-            Flashphoner.playFirstVideo(display, false, PRELOADER_URL).then(function () {
-                playStream(index, display);
-            });
-            return;
         }
         playStream(index, display);
     }

package/examples/demo/streaming/canvas_streaming/canvas_streaming.js

@@ -39,12 +39,6 @@ function connect() {
     console.log("Create new session with url " + url);
     Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function (session) {
         setStatus("#connectStatus", session.status());
-        if (Browser.isSafariWebRTC()) {
-            Flashphoner.playFirstVideo(localVideo, true, PRELOADER_URL).then(function() {
-                startStreaming();
-            });
-            return;
-        }
         startStreaming();
     }).on(SESSION_STATUS.DISCONNECTED, function () {
         setStatus("#connectStatus", SESSION_STATUS.DISCONNECTED);
@@ -107,12 +101,6 @@ function startStreaming() {
         setStatus("#publishStatus", STREAM_STATUS.PUBLISHING);
         if (Flashphoner.getMediaProviders()[0] === "WSPlayer") {
             Flashphoner.playFirstSound();
-        } else if (Browser.isSafariWebRTC() || Flashphoner.getMediaProviders()[0] === "MSE") {
-            Flashphoner.playFirstVideo(remoteVideo, false, PRELOADER_URL).then(function() {
-                playStream();
-                onPublishing(stream);
-            });
-            return;
         }
         playStream();
         onPublishing(stream);

package/examples/demo/streaming/embed_player/player.js

@@ -12,6 +12,12 @@ var resolution = getUrlParam("resolution");
 var mediaProviders = getUrlParam("mediaProviders") || "";
 var streamName = getUrlParam("streamName") || "streamName";
 var urlServer = getUrlParam("urlServer") || setURL();
+const HTML_VOLUME_MUTE='<svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%"><defs><clipPath><path d="m 14.35,-0.14 -5.86,5.86 20.73,20.78 5.86,-5.91 z"></path><path d="M 7.07,6.87 -1.11,15.33 19.61,36.11 27.80,27.60 z"></path><path d="M 9.09,5.20 6.47,7.88 26.82,28.77 29.66,25.99 z" transform="translate(0, 0)"></path></clipPath><clipPath><path d="m -11.45,-15.55 -4.44,4.51 20.45,20.94 4.55,-4.66 z" transform="translate(0, 0)"></path></clipPath></defs><path style="fill: #fff;" clip-path="url(#ytp-svg-volume-animation-mask)" d="M8,21 L12,21 L17,26 L17,10 L12,15 L8,15 L8,21 Z M19,14 L19,22 C20.48,21.32 21.5,19.77 21.5,18 C21.5,16.26 20.48,14.74 19,14 ZM19,11.29 C21.89,12.15 24,14.83 24,18 C24,21.17 21.89,23.85 19,24.71 L19,26.77 C23.01,25.86 26,22.28 26,18 C26,13.72 23.01,10.14 19,9.23 L19,11.29 Z" fill="#fff" id="ytp-svg-12"></path><path clip-path="url(#ytp-svg-volume-animation-slash-mask)" d="M 9.25,9 7.98,10.27 24.71,27 l 1.27,-1.27 Z" fill="#fff" style="fill:#fff;"></path></svg>';
+const HTML_VOLUME_ZERO='<svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%"><defs><clipPath><path d="m 14.35,-0.14 -5.86,5.86 20.73,20.78 5.86,-5.91 z"></path><path d="M 7.07,6.87 -1.11,15.33 19.61,36.11 27.80,27.60 z"></path><path d="M 9.09,5.20 6.47,7.88 26.82,28.77 29.66,25.99 z" transform="translate(0, 0)"></path></clipPath><clipPath><path d="m -11.45,-15.55 -4.44,4.51 20.45,20.94 4.55,-4.66 z" transform="translate(0, 0)"></path></clipPath></defs><path style="fill: #fff;" clip-path="url(#ytp-svg-volume-animation-mask)" d="M8,21 L12,21 L17,26 L17,10 L12,15 L8,15 L8,21 Z M19,14 L19,22 C20.48,21.32 21.5,19.77 21.5,18 C21.5,16.26 20.48,14.74 19,14 ZM19,11.29 C21.89,12.15 24,14.83 24,18 C24,21.17 21.89,23.85 19,24.71 L19,26.77 C23.01,25.86 26,22.28 26,18 C26,13.72 23.01,10.14 19,9.23 L19,11.29 Z" fill="#fff" id="ytp-svg-12"></path><path clip-path="url(#ytp-svg-volume-animation-slash-mask)" d="M 9.25,9 7.98,10.27 24.71,27 l 1.27,-1.27 Z" fill="#fff" style="fill:#fff;"></path></svg>';
+const HTML_VOLUME_LOW='<svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%"><defs><clipPath><path d="m 14.35,-0.14 -5.86,5.86 20.73,20.78 5.86,-5.91 z"></path><path d="M 7.07,6.87 -1.11,15.33 19.61,36.11 27.80,27.60 z"></path><path d="M 9.09,5.20 6.47,7.88 26.82,28.77 29.66,25.99 z" transform="translate(0, 0)"></path></clipPath><clipPath><path d="m -11.45,-15.55 -4.44,4.51 20.45,20.94 4.55,-4.66 z" transform="translate(0, 0)"></path></clipPath></defs><path style="fill: #fff;" clip-path="url(#ytp-svg-volume-animation-mask)" d="M8,21 L12,21 L17,26 L17,10 L12,15 L8,15 L8,21 Z M19,14 L19,22 C20.48,21.32 21.5,19.77 21.5,18 C21.5,16.26 20.48,14.74 19,14 Z" fill="#fff" id="ytp-svg-12"></path></svg>';
+const HTML_VOLUME_HIGH='<svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%"<defs><clipPath><path d="m 14.35,-0.14 -5.86,5.86 20.73,20.78 5.86,-5.91 z"></path><path d="M 7.07,6.87 -1.11,15.33 19.61,36.11 27.80,27.60 z"></path><path d="M 9.09,5.20 6.47,7.88 26.82,28.77 29.66,25.99 z" transform="translate(0, 0)"></path></clipPath><clipPath><path d="m -11.45,-15.55 -4.44,4.51 20.45,20.94 4.55,-4.66 z" transform="translate(0, 0)"></path></clipPath></defs><path style="fill: #fff;" clip-path="url(#ytp-svg-volume-animation-mask)" d="M8,21 L12,21 L17,26 L17,10 L12,15 L8,15 L8,21 Z M19,14 L19,22 C20.48,21.32 21.5,19.77 21.5,18 C21.5,16.26 20.48,14.74 19,14 ZM19,11.29 C21.89,12.15 24,14.83 24,18 C24,21.17 21.89,23.85 19,24.71 L19,26.77 C23.01,25.86 26,22.28 26,18 C26,13.72 23.01,10.14 19,9.23 L19,11.29 Z" fill="#fff" id="ytp-svg-12"></path></svg>';
+const HTML_FULLSCREEN_EXIT='<svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%"><g class="ytp-fullscreen-button-corner-2"><path style="fill: #fff;" d="m 14,14 -4,0 0,2 6,0 0,-6 -2,0 0,4 0,0 z"></path></g><g><path style="fill: #fff;" d="m 22,14 0,-4 -2,0 0,6 6,0 0,-2 -4,0 0,0 z"></path></g><g><path style="fill: #fff;" d="m 20,26 2,0 0,-4 4,0 0,-2 -6,0 0,6 0,0 z"></path></g><g><path style="fill: #fff;" d="m 10,22 4,0 0,4 2,0 0,-6 -6,0 0,2 0,0 z"></path></g></svg>';
+let firstUnmuted = true;
 
 function init_page() {
     //video display
@@ -44,6 +50,11 @@ function init_page() {
         $('.volume-range-block').hide();
     }
     if (autoplay ) {
+        // Autoplay will start for muted video tag only, adjust mute button and slider view
+        firstUnmuted = false;
+        $('.volume').addClass('volume-none');
+        $('.volume').html(HTML_VOLUME_MUTE);
+        $('#slider').slider( "value", 1 );
         $(".play-pause").click();
     }
 }
@@ -56,12 +67,6 @@ function onStarted(stream) {
     stream.setVolume(currentVolumeValue);
 }
 
-function volumeEvent(event) {
-    stream.unmuteRemoteAudio();
-    $('.volume').unbind('click',volumeEvent);
-    $('.volume-range-block').unbind('mousedown',volumeEvent);
-}
-
 function onStopped() {
     stopped = true;
     $('#play').css('display', 'block');
@@ -137,22 +142,15 @@ function playStream(session) {
         options.playWidth = resolution.split("x")[0];
         options.playHeight = resolution.split("x")[1];
     }
+    if (autoplay) {
+        options.unmutePlayOnStart = false;
+    }
     stream = session.createStream(options).on(STREAM_STATUS.PENDING, function(stream) {
         var video = document.getElementById(stream.id());
         if (!video.hasListeners) {
             video.hasListeners = true;
             video.addEventListener('playing', function () {
                 $("#preloader").hide();
-                if (autoplay && stream.isRemoteAudioMuted()) {
-                    //WCS-1698. if autoplay = true, then set the volume slider to 0. When you first click on the slider or icon, sound turn on. https://goo.gl/7K7WLu
-                    //WCS-2870. The code below was commented out because it break autoplay in latest iOS and macOS Safari
-                    //$('.volume').click();
-                    $('.volume').bind('click', volumeEvent);
-                    $('.volume-range-block').bind('mousedown', volumeEvent);
-                }
-                if ($('.volume').hasClass('volume-none') && !stream.isRemoteAudioMuted()) {
-                	$('.volume').click();
-                }
             });
             video.addEventListener('resize', function (event) {
                 var streamResolution = stream.videoResolution();
@@ -218,6 +216,53 @@ function validateForm() {
     }
 }
 
+function setVolume(volume, slider) {
+    if (volume < 0) {
+        console.error("Bad volume: " + volume);
+        return(false);
+    }
+    if (stream) {
+        if (volume > 0) {
+            if (!firstUnmuted && slider && Browser.isAndroid()) {
+                console.error("User should click volume unmute button to enable audio");
+                return(false);
+            } else if (stream.isRemoteAudioMuted()) {
+                stream.unmuteRemoteAudio();
+                firstUnmuted = true;
+            }
+        }
+        stream.setVolume(volume);
+    }
+    // Save current volume in page element to restore it when mute/unmute
+    $('#volume-range').val(volume);
+
+    //chnage volume control icon
+    if ( currentVolumeValue > 0) {
+        //volume in range 0-50
+        if ( currentVolumeValue <= 50 ) {
+            $('.volume').html(HTML_VOLUME_LOW);
+        }
+
+        //volume greater than 50
+        if ( currentVolumeValue > 50 ) {
+            $('.volume').html(HTML_VOLUME_HIGH);
+        }
+
+        if ($('.volume').hasClass('volume-none')) {
+            $('.volume').removeClass('volume-none');
+        }
+
+    } else if ( currentVolumeValue == 0 ) {
+        // Zero volume is equal to audio mute
+        $('.volume').html(HTML_VOLUME_ZERO);
+        if (!$('.volume').hasClass('volume-none')) {
+            $('.volume').addClass('volume-none');
+        }
+    }
+
+    return(true);
+}
+
 (function ($) {
     $.fn.videoPlayer = function (options) {
         var settings = {
@@ -261,7 +306,6 @@ function validateForm() {
                         }
                         $(this).addClass('play').removeClass('pause').prop('disabled', true);
                         $("#preloader").hide();
-                        autoplay = false;
                     }
                 }
             });
@@ -278,91 +322,20 @@ function validateForm() {
                 };
             });
 
-
-            $that.find('.volume-bar-holder').bind('mousedown', function (e) {
-                $vclicking = true;
-                y = $that.find('.volume-bar-holder').height() - (e.pageY - $that.find('.volume-bar-holder').offset().top);
-                if (y < 0 || y > $(this).height()) {
-                    $vclicking = false;
-                    return false;
-                }
-                $that.find('.volume-bar').css({'height': y + 'px'});
-                currentVolumeValue = $that.find('.volume-bar').height() * 100 / $(this).height();
-                volanim();
-
-            });
-
-            var volanim = function () {
-                $that.find('.volume-bar').css({'height': (currentVolumeValue) + '%'});
-                if (stream) {
-                    stream.setVolume(currentVolumeValue);
-                }
-                for (var i = 0; i < 1; i += 0.1) {
-                    var fi = parseInt(Math.floor(i * 10)) / 10;
-                    var volid = (fi * 10) + 1;
-                    var $v = currentVolumeValue / 100;
-                    if ($v === 1) {
-                        if ($volhover) {
-                            $that.find('.volume-icon').removeClass().addClass('volume-icon volume-icon-hover v-change-11');
-                        } else {
-                            $that.find('.volume-icon').removeClass().addClass('volume-icon v-change-11');
-                        }
-                    }
-                    else if ($v === 0) {
-                        if ($volhover) {
-                            $that.find('.volume-icon').removeClass().addClass('volume-icon volume-icon-hover v-change-1');
-                        } else {
-                            $that.find('.volume-icon').removeClass().addClass('volume-icon v-change-1');
-                        }
-                    }
-                    else if ($v > (fi - 0.1) && !$that.find('.volume-icon').hasClass('v-change-' + volid)) {
-                        if ($volhover) {
-                            $that.find('.volume-icon').removeClass().addClass('volume-icon volume-icon-hover v-change-' + volid);
-                        } else {
-                            $that.find('.volume-icon').removeClass().addClass('volume-icon v-change-' + volid);
-                        }
-                    }
-
-                }
-            };
-            volanim();
             $that.find('.volume').hover(function () {
                 $volhover = true;
             }, function () {
                 $volhover = false;
             });
+
             $('body, html').bind('mousemove', function (e) {
-            				if ( !stopped ) {
-                				$that.hover(function () {
-                    				$that.find('.player').stop(true, false).animate({'opacity': '1'}, 0.5);
-                				}, function () {
-                    				$that.find('.player').stop(true, false).animate({'opacity': '0'}, 0.5);
-                				});
-																};
-                if ($vclicking) {
-                    y = $that.find('.volume-bar-holder').height() - (e.pageY - $that.find('.volume-bar-holder').offset().top);
-                    var volMove = 0;
-                    if ($that.find('.volume-holder').css('display') === 'none') {
-                        $vclicking = false;
-                        return false;
-                    }
-                    if (!$that.find('.volume-icon').hasClass('volume-icon-hover')) {
-                        $that.find('.volume-icon').addClass('volume-icon-hover');
-                    }
-                    if (y < 0 || y === 0) { // If y is less than 0 or equal to 0 then volMove is 0.
-                        currentVolumeValue = 0;
-                        volMove = 0;
-                        $that.find('.volume-icon').removeClass().addClass('volume-icon volume-icon-hover v-change-11');
-                    } else if (y > $(this).find('.volume-bar-holder').height() || (y / $that.find('.volume-bar-holder').height()) === 1) { // If y is more than the height then volMove is equal to the height
-                        currentVolumeValue = 100;
-                        volMove = $that.find('.volume-bar-holder').height();
-                        $that.find('.volume-icon').removeClass().addClass('volume-icon volume-icon-hover v-change-1');
-                    } else { // Otherwise volMove is just y
-                        currentVolumeValue = $that.find('.volume-bar').height() * 100 / $that.find('.volume-bar-holder').height();
-                        volMove = y;
-                    }
-                    volanim();
-                }
+   				if ( !stopped ) {
+       				$that.hover(function () {
+           				$that.find('.player').stop(true, false).animate({'opacity': '1'}, 0.5);
+       				}, function () {
+           				$that.find('.player').stop(true, false).animate({'opacity': '0'}, 0.5);
+       				});
+   	            }
                 if (!$volhover) {
                     $that.find('.volume-holder').stop(true, false).fadeOut(100);
                     $that.find('.volume-icon').removeClass('volume-icon-hover');
@@ -372,30 +345,13 @@ function validateForm() {
                     $that.find('.volume-holder').fadeIn(100);
                 }
             });
-
-            $that.find('.volume-icon').bind('mousedown', function () {
-                if (storedVolume) {
-                    currentVolumeValue = storedVolume;
-                    storedVolume = undefined;
-                } else {
-                    storedVolume = currentVolumeValue;
-                    currentVolumeValue = 0;
-                }
-                volanim();
-            });
-
-            $('body, html').bind('mouseup', function (e) {
-                $mclicking = false;
-                $vclicking = false;
-            });
-
+ 
             // Requests fullscreen based on browser.
             $('.fullscreenBtn').click(function () {
                 if ( stream ) {
                     stream.fullScreen();
                 };
             });
-            var elem = document.querySelector('#volume-range');
             var init = $( "#slider" ).slider({
               value: 50,
               orientation: "horizontal",
@@ -408,52 +364,31 @@ function validateForm() {
               }
             });
             valueRange();
+            
+            var prevVol=1;
             function valueRange() {
-               if (stream) {
-                   currentVolumeValue = $( "#slider" ).slider( "value" );
-                   stream.setVolume(currentVolumeValue);
+               currentVolumeValue = $( "#slider" ).slider( "value" );
+               if (setVolume(currentVolumeValue, true)) {
+                   // Save previous volume state to set when stream is unmuted by button
+                   prevVol = currentVolumeValue ? currentVolumeValue : 1;
+                   
                }
-
-              //chnage volume control icon
-              currentVolumeValue = $( "#slider" ).slider( "value" );
-              //volume in range 0-50
-               if ( currentVolumeValue > 0 && currentVolumeValue <= 50 ) {
-                   $('.volume').html('<svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%"><defs><clipPath><path d="m 14.35,-0.14 -5.86,5.86 20.73,20.78 5.86,-5.91 z"></path><path d="M 7.07,6.87 -1.11,15.33 19.61,36.11 27.80,27.60 z"></path><path d="M 9.09,5.20 6.47,7.88 26.82,28.77 29.66,25.99 z" transform="translate(0, 0)"></path></clipPath><clipPath><path d="m -11.45,-15.55 -4.44,4.51 20.45,20.94 4.55,-4.66 z" transform="translate(0, 0)"></path></clipPath></defs><path style="fill: #fff;" clip-path="url(#ytp-svg-volume-animation-mask)" d="M8,21 L12,21 L17,26 L17,10 L12,15 L8,15 L8,21 Z M19,14 L19,22 C20.48,21.32 21.5,19.77 21.5,18 C21.5,16.26 20.48,14.74 19,14 Z" fill="#fff" id="ytp-svg-12"></path></svg>');
-               };
-
-               //volume greater than 50
-               if ( currentVolumeValue > 50 ) {
-                   $('.volume').html('<svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%"<defs><clipPath><path d="m 14.35,-0.14 -5.86,5.86 20.73,20.78 5.86,-5.91 z"></path><path d="M 7.07,6.87 -1.11,15.33 19.61,36.11 27.80,27.60 z"></path><path d="M 9.09,5.20 6.47,7.88 26.82,28.77 29.66,25.99 z" transform="translate(0, 0)"></path></clipPath><clipPath><path d="m -11.45,-15.55 -4.44,4.51 20.45,20.94 4.55,-4.66 z" transform="translate(0, 0)"></path></clipPath></defs><path style="fill: #fff;" clip-path="url(#ytp-svg-volume-animation-mask)" d="M8,21 L12,21 L17,26 L17,10 L12,15 L8,15 L8,21 Z M19,14 L19,22 C20.48,21.32 21.5,19.77 21.5,18 C21.5,16.26 20.48,14.74 19,14 ZM19,11.29 C21.89,12.15 24,14.83 24,18 C24,21.17 21.89,23.85 19,24.71 L19,26.77 C23.01,25.86 26,22.28 26,18 C26,13.72 23.01,10.14 19,9.23 L19,11.29 Z" fill="#fff" id="ytp-svg-12"></path></svg>');
-               };
-
-               //volume zero
-               if ( currentVolumeValue == 0 ) {
-                   $('.volume').html('<svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%"><defs><clipPath><path d="m 14.35,-0.14 -5.86,5.86 20.73,20.78 5.86,-5.91 z"></path><path d="M 7.07,6.87 -1.11,15.33 19.61,36.11 27.80,27.60 z"></path><path d="M 9.09,5.20 6.47,7.88 26.82,28.77 29.66,25.99 z" transform="translate(0, 0)"></path></clipPath><clipPath><path d="m -11.45,-15.55 -4.44,4.51 20.45,20.94 4.55,-4.66 z" transform="translate(0, 0)"></path></clipPath></defs><path style="fill: #fff;" clip-path="url(#ytp-svg-volume-animation-mask)" d="M8,21 L12,21 L17,26 L17,10 L12,15 L8,15 L8,21 Z M19,14 L19,22 C20.48,21.32 21.5,19.77 21.5,18 C21.5,16.26 20.48,14.74 19,14 ZM19,11.29 C21.89,12.15 24,14.83 24,18 C24,21.17 21.89,23.85 19,24.71 L19,26.77 C23.01,25.86 26,22.28 26,18 C26,13.72 23.01,10.14 19,9.23 L19,11.29 Z" fill="#fff" id="ytp-svg-12"></path><path clip-path="url(#ytp-svg-volume-animation-slash-mask)" d="M 9.25,9 7.98,10.27 24.71,27 l 1.27,-1.27 Z" fill="#fff" style="fill:#fff;"></path></svg>');
-               };
             }
 
-
             //mute unmute volume on click
-            var prevVol, prevLeft, prevHtml;
             $('.volume').on('click', function () {
                 if ($('.volume').hasClass('volume-none')) {
+                    // Restore previous volume state
                     $('#slider').slider( "value", prevVol );
-                    $('#volume-range').val(prevVol);
-                    $('.volume').html(prevHtml);
                     currentVolumeValue = prevVol;
-                    if (stream) {
-                        stream.setVolume(currentVolumeValue);
-                    }
+                    setVolume(currentVolumeValue, false);
                     $('.volume').removeClass('volume-none');
                 } else {
+                    // Save previous volume state and mute audio
                     prevVol = $('#volume-range').val();
-                    prevHtml = $('.volume').html();
-                    $('.volume').html('<svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%"><defs><clipPath><path d="m 14.35,-0.14 -5.86,5.86 20.73,20.78 5.86,-5.91 z"></path><path d="M 7.07,6.87 -1.11,15.33 19.61,36.11 27.80,27.60 z"></path><path d="M 9.09,5.20 6.47,7.88 26.82,28.77 29.66,25.99 z" transform="translate(0, 0)"></path></clipPath><clipPath><path d="m -11.45,-15.55 -4.44,4.51 20.45,20.94 4.55,-4.66 z" transform="translate(0, 0)"></path></clipPath></defs><path style="fill: #fff;" clip-path="url(#ytp-svg-volume-animation-mask)" d="M8,21 L12,21 L17,26 L17,10 L12,15 L8,15 L8,21 Z M19,14 L19,22 C20.48,21.32 21.5,19.77 21.5,18 C21.5,16.26 20.48,14.74 19,14 ZM19,11.29 C21.89,12.15 24,14.83 24,18 C24,21.17 21.89,23.85 19,24.71 L19,26.77 C23.01,25.86 26,22.28 26,18 C26,13.72 23.01,10.14 19,9.23 L19,11.29 Z" fill="#fff" id="ytp-svg-12"></path><path clip-path="url(https://www.youtube.com/watch?v=FA044r-szpM#ytp-svg-volume-animation-slash-mask)" d="M 9.25,9 7.98,10.27 24.71,27 l 1.27,-1.27 Z" fill="#fff" style="fill:#fff;"></path></svg>');
-                    $('#volume-range').val(0);
                     $('#slider').slider( "value", 0);
-                    if (stream) {
-                        stream.setVolume(0);
-                    };
+                    currentVolumeValue = 0;
+                    setVolume(currentVolumeValue, false);
                     $('.volume').addClass('volume-none');
                 };
             });
@@ -469,38 +404,32 @@ function validateForm() {
 
 
             isMobile = {
-                    Android: function() {
-                        return navigator.userAgent.match(/Android/i);
-                    },
-                    BlackBerry: function() {
-                        return navigator.userAgent.match(/BlackBerry/i);
-                    },
-                    iOS: function() {
-                        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
-                    },
-                    Opera: function() {
-                        return navigator.userAgent.match(/Opera Mini/i);
-                    },
-                    Windows: function() {
-                        return navigator.userAgent.match(/IEMobile/i);
-                    },
-                    any: function() {
-                        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
-                    }
-                };
-                if (isMobile.any()) {
-                  $('.volume-range-block').addClass('open-width-full')
+                Android: function() {
+                    return navigator.userAgent.match(/Android/i);
+                },
+                BlackBerry: function() {
+                    return navigator.userAgent.match(/BlackBerry/i);
+                },
+                iOS: function() {
+                    return navigator.userAgent.match(/iPhone|iPad|iPod/i);
+                },
+                Opera: function() {
+                    return navigator.userAgent.match(/Opera Mini/i);
+                },
+                Windows: function() {
+                    return navigator.userAgent.match(/IEMobile/i);
+                },
+                any: function() {
+                    return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
                 }
+            };
+            if (isMobile.any()) {
+              $('.volume-range-block').addClass('open-width-full')
+            }
             var prevFull;
 
             $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
                 if (stream) {
-                    if ($("#"+stream.id()).prop("muted")) {
-                        currentVolumeValue = 0;
-                    } else {
-                        currentVolumeValue = stream.getVolume();
-                    }
-                    volanim();
 
                     $('.player').toggleClass('fullscreenon');  //Add class for all controls in full screen mode
                     $('.volume-range-block').toggleClass('fullscreen-vol'); //Add class to volume control for full screen mode
@@ -508,30 +437,30 @@ function validateForm() {
                     if ( $('.player').hasClass('fullscreenon') ) {
                         prevFull = $('.fullscreenBtn').html();
 
-                                    //change full screen button to full screen exit button
-                                    $('.fullscreenBtn').html('<svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%"><g class="ytp-fullscreen-button-corner-2"><path style="fill: #fff;" d="m 14,14 -4,0 0,2 6,0 0,-6 -2,0 0,4 0,0 z"></path></g><g><path style="fill: #fff;" d="m 22,14 0,-4 -2,0 0,6 6,0 0,-2 -4,0 0,0 z"></path></g><g><path style="fill: #fff;" d="m 20,26 2,0 0,-4 4,0 0,-2 -6,0 0,6 0,0 z"></path></g><g><path style="fill: #fff;" d="m 10,22 4,0 0,4 2,0 0,-6 -6,0 0,2 0,0 z"></path></g></svg>');
-
-                                    //activate controls on mouse moving
-                                    $that.bind('mousemove touchmove', function () {
-                                        if ($clearTimeout) {
-                                            clearTimeout($clearTimeout);
-                                        }
-                                        $that.find('.player').stop(true, false).animate({'opacity': '1'}, 0.1);
-                                        $clearTimeout = setTimeout(function() {
-                                            $that.find('.player').stop(true, false).animate({'opacity': '0'}, 0.5);
-                                        }, 15000);
-                                    });
-                                } else {
-
-                                                $('.fullscreenBtn').html(prevFull);
-                                                $('.fullscreenBtn').click(function () {
-                                                    if ( stream ) {
-                                                        stream.fullScreen();
-                                                    };
-                                                });
-                                            };
-                                        };
-                                    });
+                        //change full screen button to full screen exit button
+                        $('.fullscreenBtn').html(HTML_FULLSCREEN_EXIT);
+
+                        //activate controls on mouse moving
+                        $that.bind('mousemove touchmove', function () {
+                            if ($clearTimeout) {
+                                clearTimeout($clearTimeout);
+                            }
+                            $that.find('.player').stop(true, false).animate({'opacity': '1'}, 0.1);
+                            $clearTimeout = setTimeout(function() {
+                                $that.find('.player').stop(true, false).animate({'opacity': '0'}, 0.5);
+                            }, 15000);
+                        });
+                    } else {
+
+                        $('.fullscreenBtn').html(prevFull);
+                        $('.fullscreenBtn').click(function () {
+                            if ( stream ) {
+                                stream.fullScreen();
+                            };
+                        });
+                    };
+                };
+            });
         });
 }
 })(jQuery);

package/examples/demo/streaming/firewall-traversal-streaming/firewall-traversal-streaming.js

@@ -107,12 +107,6 @@ function publishBtnClick() {
     if (validateForm("streamerForm")) {
         $('#publishStream').prop('disabled', true);
         $(this).prop('disabled', true);
-        if (Browser.isSafariWebRTC()) {
-            Flashphoner.playFirstVideo(localVideo, true, PRELOADER_URL).then(function() {
-                publishStream();
-            });
-            return;
-        }
         publishStream();
     }
 }
@@ -139,12 +133,6 @@ function playBtnClick() {
     if (validateForm("playerForm")) {
         $('#playStream').prop('disabled', true);
         $(this).prop('disabled', true);
-        if (Browser.isSafariWebRTC()) {
-            Flashphoner.playFirstVideo(remoteVideo, false, PRELOADER_URL).then(function() {
-                playStream();
-            });
-            return;
-        }
         playStream();
     }
 }

package/examples/demo/streaming/mcu_client/mcu_client.js

@@ -77,14 +77,6 @@ function joinBtnClick() {
         $('#url').prop('disabled', true);
         $("#room").prop('disabled', true);
         $("#login").prop('disabled', true);
-        if (Browser.isSafariWebRTC() || Flashphoner.getMediaProviders()[0] === "MSE") {
-            Flashphoner.playFirstVideo(localDisplay, true, PRELOADER_URL).then(function () {
-                Flashphoner.playFirstVideo(remoteVideo, false, PRELOADER_URL).then(function () {
-                    start();
-                });
-            });
-            return;
-        }
         start();
     }
 }

package/examples/demo/streaming/media_devices_manager/manager.js

@@ -173,12 +173,6 @@ function playBtnClick() {
     if (validateForm("play")) {
         muteInputs("play");
         $(this).prop('disabled', true);
-        if (Browser.isSafariWebRTC()) {
-            Flashphoner.playFirstVideo(remoteVideo, false, preloaderUrl).then(function() {
-                play();
-            });
-            return;
-        }
         play();
     }
 }
@@ -207,12 +201,6 @@ function publishBtnClick() {
     if (validateForm("send")) {
         muteInputs("send");
         $(this).prop('disabled', true);
-        if (Browser.isSafariWebRTC()) {
-            Flashphoner.playFirstVideo(localVideo, true, preloaderUrl).then(function() {
-                publish();
-            });
-            return;
-        }
         publish();
     }
 }

package/examples/demo/streaming/player/player.js

@@ -41,14 +41,19 @@ function init_page() {
         animate: true,
         slide: function(event, ui) {
             //WCS-2375. fixed autoplay in ios safari
-            stream.unmuteRemoteAudio();
+            if (stream.isRemoteAudioMuted()) {
+                stream.unmuteRemoteAudio();
+            }
             currentVolumeValue = ui.value;
             stream.setVolume(currentVolumeValue);
         }
     }).slider("disable");
     onStopped();
-    if (autoplay)
+    if (autoplay) {
+        // We can start autoplay with muted audio only, so set volume slider to 0 #WCS-2425
+        $("#volumeControl").slider('value', 0);
         $("#playBtn").click();
+    }
 }
 
 function onStarted(stream) {
@@ -141,6 +146,9 @@ function playStream(session) {
         options.playWidth = resolution.split("x")[0];
         options.playHeight = resolution.split("x")[1];
     }
+    if (autoplay) {
+        options.unmutePlayOnStart = false;
+    }
     stream = session.createStream(options).on(STREAM_STATUS.PENDING, function (stream) {
         $("#preloader").show();
         var video = document.getElementById(stream.id());
@@ -160,13 +168,6 @@ function playStream(session) {
                         resizeVideo(event.target, options.playWidth, newHeight);
                     }
                 });
-            } else {
-                //WCS-2375. fixed autoplay in ios safari
-                video.addEventListener('playing', function () {
-                    if (autoplay && stream.isRemoteAudioMuted()) {
-                        $("#volumeControl").slider('value', 0);
-                    }
-                });
             }
         }
     }).on(STREAM_STATUS.PLAYING, function (stream) {

package/examples/demo/streaming/stream-diagnostic/stream-diagnostic.js

@@ -45,14 +45,6 @@ function onStopped() {
 
 function publishBtnClick() {
     $(this).prop('disabled', true);
-    if (Browser.isSafariWebRTC()) {
-        Flashphoner.playFirstVideo(localVideo, true, PRELOADER_URL).then(function () {
-            Flashphoner.playFirstVideo(remoteVideo, false, PRELOADER_URL).then(function () {
-                start();
-            });
-        });
-        return;
-    }
     start();
 }
 

package/examples/demo/streaming/stream-local-snapshot/stream-local-snapshot.js

@@ -113,12 +113,6 @@ function onUnpublished() {
 
 function publishBtnClick() {
     $(this).prop('disabled', true);
-    if (Browser.isSafariWebRTC()) {
-        Flashphoner.playFirstVideo(localVideo, true, PRELOADER_URL).then(function() {
-            start()
-        });
-        return;
-    }
     start()
 }
 

package/examples/demo/streaming/stream-snapshot/stream-snapshot.js

@@ -64,12 +64,6 @@ function onUnpublished() {
 
 function publishBtnClick() {
     $(this).prop('disabled', true);
-    if (Browser.isSafariWebRTC()) {
-        Flashphoner.playFirstVideo(localVideo, true, PRELOADER_URL).then(function() {
-            start()
-        });
-        return;
-    }
     start()
 }