Allow HLS playback on iOS

- You may disable JPEG API/JPEG Mode if you use HLS as your Stream Type, this method has been tested to work on iOS 13.1.3

web/libs/js/dash2.config.js

@@ -3,7 +3,8 @@ $.ccio={
     mon:{},
     useUTC: <%- config.useUTC || false %>,
     definitions: <%-JSON.stringify(define)%>,
-    libURL: '<%-window.libURL%>'
+    libURL: '<%-window.libURL%>',
+    isAppleDevice: navigator.userAgent.match(/(iPod|iPhone|iPad)/)||(navigator.userAgent.match(/(Safari)/)&&!navigator.userAgent.match('Chrome'))
 };
 <% if(config.DropboxAppKey){ %>
     $.ccio.DropboxAppKey = '<%-window.DropboxAppKey%>'

web/libs/js/dash2.elementbuilder.js

@@ -252,7 +252,7 @@ $.ccio.tm=function(x,d,z,user){
             }else{
                 switch(k.d.stream_type){
                     case'hls':case'flv':case'mp4':
-                        tmp+='<video class="stream-element" autoplay></video>';
+                        tmp+=`<video class="stream-element" ${$.ccio.isAppleDevice ? 'muted autoplay playsinline' : ''} ></video>`;
                     break;
                     case'mjpeg':
                         tmp+='<iframe class="stream-element"></iframe>';

web/libs/js/dash2.socketio.js

@@ -433,11 +433,13 @@ $.ccio.globalWebsocket=function(d,user){
                                     },2000)
                                 }else{
                                     var video = $('#monitor_live_'+d.id+user.auth_token+' .stream-element')[0];
-                                    if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)||(navigator.userAgent.match(/(Safari)/)&&!navigator.userAgent.match('Chrome'))) {
+                                    if ($.ccio.isAppleDevice) {
                                         video.src=d.url;
-                                        if (video.paused) {
+                                        video.addEventListener('loadedmetadata', function() {
+                                          setTimeout(function(){
                                             video.play();
-                                        }
+                                          },3000)
+                                        }, false);
                                     }else{
                                         $.ccio.mon[d.ke+d.id+user.auth_token].hlsGarbageCollector=function(){
                                             if($.ccio.mon[d.ke+d.id+user.auth_token].hls){$.ccio.mon[d.ke+d.id+user.auth_token].hls.destroy();URL.revokeObjectURL(video.src)}