{"id":12278,"date":"2020-05-08T23:39:14","date_gmt":"2020-05-08T23:39:14","guid":{"rendered":"https:\/\/www.olevels.com\/?page_id=12278"},"modified":"2020-05-08T23:39:14","modified_gmt":"2020-05-08T23:39:14","slug":"broadcast","status":"publish","type":"page","link":"https:\/\/www.olevels.com\/index.php\/broadcast\/","title":{"rendered":"BroadCast"},"content":{"rendered":"<p><div id=\"agora-root\" class=\"agora agora-broadcast agora-audience\">\n  <section class=\"agora-container no-footer\">\n    <div class=\"agora-header only-desktop\">\n\t<i id=\"fullscreen-expand\" class=\"fas fa-expand-arrows-alt\"><\/i>\n<\/div>\n    <div class=\"agora-content\">\n      <div class=\"buttons-top\">\n  <div class=\"left-button\">\n    <div class= \"room-title\">\n       | <span id=\"count-users\">1<\/span> <i id=\"count-users-icon\" class=\"fas fa-users\"><\/i>\n    <\/div>\n  <\/div>\n  <div class=\"right-buttons\">\n\n    <button id=\"exit-btn\" class= \"leave-meeting btn-danger only-desktop\">\n      Leave Meeting    <\/button>\n    <i class=\"icon-cog\"><\/i>\n  <\/div>\n<\/div>\n      <div id=\"screen-zone\" class=\"screen\" >\n        <div id=\"screen-users\" class=\"screen-users screen-users-1\">\n          <div id=\"full-screen-video\" class=\"user\" style=\"display: none; \"><\/div>\n\n          <div id=\"watch-live-overlay\" class=\"overlay user\">\n            <div id=\"overlay-container\">\n              <button id=\"watch-live-btn\" type=\"button\" class=\"room-title\">\n                                <span>Watch the Live Stream<\/span>\n              <\/button>\n            <\/div>\n          <\/div>\n          <div id=\"watch-live-closed\" class=\"overlay user\" style=\"display: none\">\n            <div id=\"overlay-container\">\n              <div id=\"finished-btn\" class=\"room-title\">\n                                <span id=\"txt-finished\" style=\"display:none\">The Live Stream has finished<\/span>\n                <span id=\"txt-waiting\">Waiting for broadcast connection...<\/span>\n              <\/div>\n            <\/div>\n          <\/div>\n\n        <\/div>\n      <\/div>\n    <\/div>\n\n    \n  <\/section>\n\n  \n<script type=\"text\/javascript\">\n  window.agora_base_url = 'https:\/\/www.olevels.com\/wp-content\/plugins\/wp-agora-io\/public\/';\n\t\/\/ video profile settings\n  window.cameraVideoProfile = '480p_9'; \/\/ 640x480 @ 30fps & 750kbs\n  window.screenVideoProfile = '720p_1';\n  window.agoraAppId = '6c739f2d058d4022b0d85a7afe345707'; \/\/ set app id\n  window.channelName = 'Class start'; \/\/ set channel name\n  window.channelId = '12038'; \/\/ set channel name\n  window.userID = parseInt(`${0}`, 10);\n  \n\n\n\t\/\/ use tokens for added security\n    window.AGORA_TOKEN_UTILS = {\n      agoraGenerateToken: function() {\n        return \"0066c739f2d058d4022b0d85a7afe345707IABMHgHKAFWk2UFRQemW\/krgXHv9LhKUei2QB1fIsAk8J3pERgUAAAAAIgBLOAEAQyj1aQQAAQAAAAAAAwAAAAAAAgAAAAAABAAAAAAA\";\n      }\n    };\n<\/script>  <script>\n    window.agoraCurrentRole = 'audience';\n    window.agoraMode = 'audience';\n    window.remoteStreams = {};\n    var WAIT_FOR_RECONNECT_TIMEOUT = 15000; \/\/ 10 Seconds!\n\n\n    window.addEventListener('load', function() {\n      \/\/ set log level:\n      \/\/ -- .DEBUG for dev \n      \/\/ -- .NONE for prod\n      AgoraRTC.Logger.enableLogUpload();\n      window.agoraLogLevel = window.location.href.indexOf('local')>0 ? AgoraRTC.Logger.ERROR : AgoraRTC.Logger.ERROR;\n      AgoraRTC.Logger.setLogLevel(window.agoraLogLevel);\n      \n      \/\/ create client, vp8 to work across mobile devices\n      window.agoraClient = AgoraRTC.createClient({mode: 'live', codec: 'vp8'});\n\n      window.AGORA_RTM_UTILS.setupRTM(window.agoraAppId, window.channelName);\n\n      jQuery('#fullscreen-expand').click(window.AGORA_UTILS.toggleFullscreen);\n\n      const exitBtn = jQuery('#exit-btn')\n      exitBtn.hide();\n      exitBtn.click(function() {\n        Object.values(window.remoteStreams).forEach(stream => stream.close());\n        window.remoteStreams = {};\n        finishVideoScreen();\n      })\n\n      function finishVideoScreen() {\n        jQuery(\".remote-stream-container\").hide();\n        jQuery(\"#full-screen-video\").hide();\n        jQuery(\"#watch-live-closed\").show();\n\n        function waitUntilClose() {\n          jQuery('#txt-waiting').hide();\n          jQuery('#txt-finished').show();\n\n          agoraLeaveChannel();\n        }\n        exitBtn.hide();\n        window.waitingClose = setTimeout(waitUntilClose, WAIT_FOR_RECONNECT_TIMEOUT)\n      }\n      \n      \/\/ Due to broswer restrictions on auto-playing video, \n      \/\/ user must click to init and join channel\n      jQuery(\"#watch-live-btn\").click(function(){\n        AgoraRTC.Logger.info(\"user clicked to watch broadcast\");\n\n        \/\/ init Agora SDK\n        window.agoraClient.init(agoraAppId, function () {\n          jQuery(\"#watch-live-overlay\").remove();\n          jQuery(\"#screen-zone\").css('background', 'none')\n          jQuery(\"#full-screen-video\").fadeIn();\n          AgoraRTC.Logger.info('AgoraRTC client initialized');\n          agoraJoinChannel(); \/\/ join channel upon successfull init\n        }, function (err) {\n          AgoraRTC.Logger.error('[ERROR] : AgoraRTC client init failed', err);\n        });\n      });\n\n      window.agoraClient.on('stream-published', function (evt) {\n        AgoraRTC.Logger.info('Publish local stream successfully');\n      });\n\n      \/\/ connect remote streams\n      window.agoraClient.on('stream-added', function addStream(evt) {\n        const stream = evt.stream;\n        const streamId = stream.getId();\n        window.remoteStreams[streamId] = stream;\n        if (window.waitingClose) {\n          clearTimeout(window.waitingClose)\n          window.waitingClose = null;\n        }\n\n        AgoraRTC.Logger.info('New stream added: ' + streamId);\n        AgoraRTC.Logger.info('Subscribing to remote stream:' + streamId);\n\n        const chatBtn = document.querySelector('#chatToggleBtn');\n        if (chatBtn) {\n          chatBtn.style.display = \"block\";\n        }\n\n        jQuery(\"#watch-live-closed\").hide();\n        jQuery(\"#watch-live-overlay\").hide();\n        jQuery(\"#full-screen-video\").css('background', 'none').fadeIn();\n        exitBtn.show();\n\n        \/\/ Subscribe to the stream.\n        window.agoraClient.subscribe(stream, function (err) {\n          AgoraRTC.Logger.error('[ERROR] : subscribe stream failed', err);\n        });\n      });\n\n      window.agoraClient.on('stream-removed', function closeStream(evt) {\n        const stream = evt.stream;\n        const streamId = stream.getId();\n        stream.stop(); \/\/ stop the stream\n        stream.close(); \/\/ clean up and close the camera stream\n\n        window.remoteStreams[streamId] = null;\n        delete window.remoteStreams[streamId];\n\n        AgoraRTC.Logger.warning(\"Remote stream is removed \" + stream.getId());\n      });\n\n      window.agoraClient.on('stream-subscribed', function (evt) {\n        const remoteStream = evt.stream;\n        const streamId = remoteStream.getId();\n        AgoraRTC.Logger.info('Successfully subscribed to remote stream: ' + streamId);\n\n        jQuery('#full-screen-video').hide();\n\n        if (window.screenshareClients[streamId]) {\n          \/\/ this is a screen share stream:\n          console.log('Screen stream arrived:');\n          window.AGORA_SCREENSHARE_UTILS.addRemoteScreenshare(remoteStream);\n        } else {\n          \/\/ show new stream on screen:\n          window.AGORA_UTILS.addRemoteStreamView(remoteStream);\n\n          const usersCount = Object.keys(window.remoteStreams).length;\n          window.AGORA_UTILS.updateUsersCounter(usersCount);\n        }\n      });\n\n      \/\/ remove the remote-container when a user leaves the channel\n      window.agoraClient.on('peer-leave', function(evt) {\n        AgoraRTC.Logger.info('Remote stream has left the channel: ' + evt.uid);\n        \n        if (!evt || !evt.stream) {\n          console.error('Stream undefined cannot be removed', evt);\n          return false;\n        }\n\n        const streamId = evt.stream.getId(); \/\/ the the stream id\n        evt.stream.isPlaying() && evt.stream.stop(); \/\/ stop the stream\n  \n        if(window.remoteStreams[streamId] !== undefined) {\n          window.remoteStreams[streamId].isPlaying() && window.remoteStreams[streamId].stop(); \/\/stop playing the feed\n\n          delete window.remoteStreams[streamId]; \/\/ remove stream from list\n          const remoteContainerID = '#' + streamId + '_container';\n          jQuery(remoteContainerID).empty().remove();\n\n          const usersCount = Object.keys(window.remoteStreams).length;\n          window.AGORA_UTILS.updateUsersCounter(usersCount);\n        }\n\n        if (window.screenshareClients[streamId]) {\n          if (typeof window.screenshareClients[streamId].stop==='function') {\n            window.screenshareClients[streamId].isPlaying() && window.screenshareClients[streamId].stop();\n          }\n          const remoteContainerID = '#' + streamId + '_container';\n          jQuery(remoteContainerID).empty().remove();\n          const streamsContainer = jQuery('#screen-zone');\n          streamsContainer.toggleClass('sharescreen');\n          delete window.screenshareClients[streamId];\n        } else {\n          const usersCount = Object.keys(window.remoteStreams).length;\n          if (usersCount===0) {\n            const chatBtn = document.querySelector('#chatToggleBtn');\n            if (chatBtn) {\n              chatBtn.style.display = \"none\";\n            }\n\n            finishVideoScreen();\n          }\n        }\n      });\n\n\n      \/\/ show mute icon whenever a remote has muted their mic\n      window.agoraClient.on(\"mute-audio\", function (evt) {\n        window.AGORA_UTILS.toggleVisibility('#' + evt.uid + '_mute', true);\n      });\n\n      window.agoraClient.on(\"unmute-audio\", function (evt) {\n        window.AGORA_UTILS.toggleVisibility('#' + evt.uid + '_mute', false);\n      });\n\n      \/\/ show user icon whenever a remote has disabled their video\n      window.agoraClient.on(\"mute-video\", function (evt) {\n        window.AGORA_UTILS.toggleVisibility('#' + evt.uid + '_no-video', true);\n      });\n\n      window.agoraClient.on(\"unmute-video\", function (evt) {\n        window.AGORA_UTILS.toggleVisibility('#' + evt.uid + '_no-video', false);\n      });\n\n      \/\/ ingested live stream \n      window.agoraClient.on('streamInjectedStatus', function (evt) {\n        AgoraRTC.Logger.info(\"Injected Steram Status Updated\");\n        \/\/ evt.stream.play('full-screen-video');\n        AgoraRTC.Logger.info(JSON.stringify(evt));\n      }); \n    });\n\n    \/\/ join a channel\n    function agoraJoinChannel() {\n      const token = window.AGORA_TOKEN_UTILS.agoraGenerateToken();\n\n      \/\/ set the role\n      window.agoraClient.setClientRole('audience', function() {\n        AgoraRTC.Logger.info('Client role set to audience');\n      }, function(e) {\n        AgoraRTC.Logger.error('setClientRole failed', e);\n      });\n      \n      window.agoraClient.join(token, window.channelName, window.userID, function(uid) {\n          AgoraRTC.Logger.info('User ' + uid + ' join channel successfully');\n          window.AGORA_RTM_UTILS.joinChannel(uid, function(err){\n            if (err) {\n              console.error(err)\n            }\n          });\n      }, function(err) {\n          AgoraRTC.Logger.error('[ERROR] : join channel failed', err);\n      });\n    }\n\n    function agoraLeaveChannel() {\n      window.dispatchEvent(new CustomEvent(\"agora.leavingChannel\"));\n      window.agoraClient.leave(function() {\n        AgoraRTC.Logger.info('client leaves channel');\n        window.AGORA_RTM_UTILS.leaveChannel();\n\n        window.dispatchEvent(new CustomEvent(\"agora.leavedChannel\"));\n      }, function(err) {\n        AgoraRTC.Logger.error('client leave failed ', err); \/\/error handling\n      });\n    }\n  <\/script>\n<\/div><strong class=\"shortcode-handle\"><div class=\"rumbletalk-handle\"><div id=\"rt-9aa5447516d9f7940b0231a6d5ed94ac\"><\/div><script src=\"https:\/\/www.rumbletalk.com\/client\/?DYNM5OBy&1\"><\/script><\/div><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"...","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"pmpro_default_level":0},"acf":[],"_links":{"self":[{"href":"https:\/\/www.olevels.com\/index.php\/wp-json\/wp\/v2\/pages\/12278"}],"collection":[{"href":"https:\/\/www.olevels.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.olevels.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.olevels.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.olevels.com\/index.php\/wp-json\/wp\/v2\/comments?post=12278"}],"version-history":[{"count":1,"href":"https:\/\/www.olevels.com\/index.php\/wp-json\/wp\/v2\/pages\/12278\/revisions"}],"predecessor-version":[{"id":12279,"href":"https:\/\/www.olevels.com\/index.php\/wp-json\/wp\/v2\/pages\/12278\/revisions\/12279"}],"wp:attachment":[{"href":"https:\/\/www.olevels.com\/index.php\/wp-json\/wp\/v2\/media?parent=12278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}