videojs-contrib-hls embed<\/title>\r\n \r\n \r\n\r\n <link href=\"https:\/\/unpkg.com\/video.js\/dist\/video-js.css\" rel=\"stylesheet\">\r\n<\/head>\r\n<body>\r\n <h1>Video.js Example Embed<\/h1>\r\n\r\n <video-js id=\"my_video_1\" class=\"vjs-default-skin\" controls preload=\"auto\" width=\"720\" height=\"480\">\r\n <source src=\"https:\/\/Peertube-Playlists1.b-cdn.net\/hls\/41c0081f-8f15-4373-b26c-04affb20fed6\/877aabad-4088-4b98-9947-896a8794eaee-master.m3u8 \" type=\"application\/x-mpegURL\">\r\n <\/video-js>\r\n \r\n <script src=\"https:\/\/unpkg.com\/video.js\/dist\/video.js\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/@videojs\/http-streaming\/dist\/videojs-http-streaming.js\"><\/script>\r\n \r\n <script>\r\n var player = videojs('my_video_1');\r\n <\/script>\r\n \r\n<\/body>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3f4a4f4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3f4a4f4\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7ba5e14\" data-id=\"7ba5e14\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-667976c elementor-widget elementor-widget-html\" data-id=\"667976c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\r\n <meta http-equiv=\"content-type\" content=\"text\/html; charset=utf-8\" \/>\r\n\r\n <title>OvenPlayer<\/title>\r\n <link rel=\"icon\" href=\".\/assets\/images\/00_OvenPlayer_Favicon.svg\">\r\n\r\n \r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.15.1\/css\/all.min.css\" rel=\"stylesheet\" \/>\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css?family=Roboto:300,400,500,700&display=swap\" rel=\"stylesheet\" \/>\r\n \r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/mdb-ui-kit\/3.10.0\/mdb.min.css\" rel=\"stylesheet\" \/>\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/highlight.js@11.3.1\/styles\/github.css\">\r\n <style>\r\n .navbar-toggler-icon {\r\n background-image: url(\"data:image\/svg+xml;charset=utf-8,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(0, 0, 0, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'\/%3E%3C\/svg%3E\") !important;\r\n }\r\n\r\n .btn {\r\n min-width: 0 !important;\r\n }\r\n\r\n fieldset {\r\n padding-left: 0.5rem;\r\n padding-bottom: 0.5rem;\r\n font-size: 0.85rem;\r\n }\r\n\r\n .list-group-item {\r\n padding: 0.5rem 1rem;\r\n }\r\n\r\n .list-group-item h6 {\r\n margin-top: 0.5rem;\r\n }\r\n\r\n .dummyPlayer {\r\n padding-bottom: 56.25%;\r\n background: #000;\r\n }\r\n\r\n .source-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .source-protocol {}\r\n\r\n .source-url {\r\n margin-top: 0.25rem;\r\n word-break: break-all;\r\n }\r\n\r\n .source-control {}\r\n\r\n .player-area {\r\n position: relative;\r\n }\r\n\r\n .player-wrapper {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n footer {\r\n font-size: 0.85rem;\r\n }\r\n <\/style>\r\n\r\n \r\n <script async src=\"https:\/\/www.googletagmanager.com\/gtag\/js?id=UA-40491361-8\"><\/script>\r\n\r\n <script>\r\n window.dataLayer = window.dataLayer || [];\r\n\r\n function gtag() {\r\n dataLayer.push(arguments);\r\n }\r\n\r\n gtag('js', new Date());\r\n\r\n gtag('config', 'UA-40491361-8');\r\n <\/script>\r\n\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue@3.2.23\/dist\/vue.global.prod.min.js\"><\/script>\r\n\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/underscore@1.13.1\/underscore-umd-min.js\"><\/script>\r\n\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/gh\/highlightjs\/cdn-release@11.3.1\/build\/highlight.min.js\"><\/script>\r\n\r\n \r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/js-beautify\/1.14.0\/beautify.min.js\"><\/script>\r\n\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/clipboard@2.0.8\/dist\/clipboard.min.js\"><\/script>\r\n\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@popperjs\/core@2.10.2\/dist\/umd\/popper.min.js\"><\/script>\r\n\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/hls.js\/dist\/hls.min.js\"><\/script>\r\n\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/ovenplayer@0.10.22\/dist\/ovenplayer.js?20220630\"><\/script>\r\n<\/head>\r\n\r\n<body>\r\n <div id=\"app\">\r\n <nav class=\"navbar navbar-expand-md navbar-light bg-light\">\r\n <div class=\"container-lg\">\r\n <a class=\"navbar-brand\" href=\"\/\">OVENPLAYER Low Latency Demo Player<\/a>\r\n <button class=\"navbar-toggler\" type=\"button\" data-mdb-toggle=\"collapse\" data-mdb-target=\"#navbarNav\"\r\n aria-controls=\"navbarNav\">\r\n <span class=\"navbar-toggler-icon\"><\/span>\r\n <\/button>\r\n <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\r\n\r\n <ul class=\"navbar-nav ms-auto\">\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link active\" href=\".\/demo.html\">Player Demo<\/a>\r\n <\/li>\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link\" href=\".\/ome_demo.html\">Sub-Second Latency Demo<\/a>\r\n <\/li>\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link\" href=\"https:\/\/github.com\/AirenSoft\/OvenPlayer\"\r\n target=\"_blank\">GitHub<\/a>\r\n <\/li>\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link\" href=\"https:\/\/airensoft.gitbook.io\/ovenplayer\/\" target=\"_blank\">Docs<\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n <div class=\"container-lg mt-4\">\r\n \r\n <\/ul>\r\n <div class=\"row g-3 mb-3\">\r\n <div class=\"col-12\">\r\n <div class=\"input-group\">\r\n <div class=\"form-outline flex-grow-1\">\r\n <input type=\"text\" id=\"playbackUrl\" class=\"form-control bg-white\" v-model=\"source\"\r\n @keyup.enter=\"addSource\" \/>\r\n <label class=\"form-label\" for=\"playbackUrl\">Playback URL<\/label>\r\n <\/div>\r\n <button class=\"btn btn-primary px-2 px-md-4\" type=\"button\" @click=\"addSource\">\r\n ADD SOURCE\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"col-12\">\r\n <div class=\"player-area rounded shadow overflow-hidden mb-2\">\r\n <div class=\"dummyPlayer d-flex justify-content-center text-center\">\r\n <span v-if=\"playerMessage\" class=\"text-white position-absolute\"\r\n style=\"left: 1rem; right: 1rem; bottom: 28.125%\">\r\n <i class=\"fas fa-info-circle me-1 text-info\"><\/i>\r\n {{playerMessage}}\r\n <\/span>\r\n <\/div>\r\n <div class=\"player-wrapper\">\r\n <div id=\"player\">\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <button class=\"btn btn-primary w-100\" type=\"button\" @click=\"reloadPlayer\">\r\n <i class=\"fas me-2\" :class=\"loadButtonIcon\"><\/i>\r\n {{loadButtonMsg}}\r\n <\/button>\r\n <\/div>\r\n <div class=\"col-12\">\r\n\r\n <ul class=\"list-group\">\r\n <li class=\"list-group-item bg-light d-flex justify-content-between align-items-center\">\r\n <h5 class=\"mb-0 fs-6\">Sources<\/h5>\r\n <small v-if=\"playerVersion\">OvenPlayer\r\n <span class=\"badge badge-info ms-1 align-middle\">{{playerVersion}}<\/span>\r\n <\/small>\r\n <\/li>\r\n <div class=\"list-group-item\" v-if=\"playerOption.sources.length === 0\">\r\n <p class=\"lead\">Test streams with OvenPlayer<\/p>\r\n\r\n <ul>\r\n <li>\r\n <strong>Sub-Second Latency<\/strong>: WebRTC (Signalling Protocol Conforms to the OME\r\n Specification)\r\n <\/li>\r\n <li>\r\n Low-Latency HLS\r\n <\/li>\r\n <\/ul>\r\n <p class=\"mt-4\">To play the stream of OvenMediaEngine, please refer to the following\r\n documents.<\/p>\r\n <ul class=\"mb-2\">\r\n <li>\r\n WebRTC <a\r\n href=\"https:\/\/airensoft.gitbook.io\/ovenmediaengine\/streaming\/webrtc-publishing#playback\"\r\n class=\"ms-1\" target=\"_blank\">\r\n <i class=\"fas fa-external-link-alt\"><\/i>\r\n <\/a>\r\n <\/li>\r\n <li>\r\n Low-Latency HLS <a\r\n href=\"https:\/\/airensoft.gitbook.io\/ovenmediaengine\/streaming\/low-latency-hls\"\r\n class=\"ms-1\" target=\"_blank\">\r\n <i class=\"fas fa-external-link-alt\"><\/i>\r\n <\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <source-item v-for=\"(source, index) in playerOption.sources\" :source=\"source\" :index=\"index\"\r\n @remove-source=\"removeSource(index)\">\r\n <\/source-item>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"row row-cols-1 g-3\">\r\n <div class=\"col\">\r\n <ul class=\"list-group\">\r\n <li class=\"list-group-item bg-light\">\r\n <h5 class=\"mb-0 fs-6\">Player Options<\/h5>\r\n <\/li>\r\n <li class=\"list-group-item\">\r\n\r\n <div class=\"row\">\r\n <div class=\"col-lg-4 border-start border-2 mb-3 mb-lg-0\">\r\n \r\n <h6>General Options<\/h6>\r\n <fieldset>\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"autoStart\"\r\n v-model=\"playerOption.autoStart\" @change=\"changeOptions\" \/>\r\n <label class=\"form-check-label\" for=\"autoStart\">\r\n autoStart\r\n <\/label>\r\n <a href=\"https:\/\/airensoft.gitbook.io\/ovenplayer\/initialization#autostart\"\r\n class=\"ms-1\" target=\"_blank\">\r\n <i class=\"fas fa-external-link-alt\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"autoFallback\"\r\n v-model=\"playerOption.autoFallback\" @change=\"changeOptions\" \/>\r\n <label class=\"form-check-label\" for=\"autoFallback\">\r\n autoFallback\r\n <\/label>\r\n <a href=\"https:\/\/airensoft.gitbook.io\/ovenplayer\/initialization#autofallback\"\r\n class=\"ms-1\" target=\"_blank\">\r\n <i class=\"fas fa-external-link-alt\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"mute\"\r\n v-model=\"playerOption.mute\" @change=\"changeOptions\" \/>\r\n <label class=\"form-check-label\" for=\"mute\">\r\n mute\r\n <\/label>\r\n <a href=\"https:\/\/airensoft.gitbook.io\/ovenplayer\/initialization#mute\"\r\n class=\"ms-1\" target=\"_blank\">\r\n <i class=\"fas fa-external-link-alt\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/fieldset>\r\n <\/div>\r\n <div class=\"col-lg-4 border-start border-2 mb-3 mb-lg-0\">\r\n \r\n <h6>WebRTC Options<\/h6>\r\n <fieldset>\r\n <div class=\"form-check mb-2\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\"\r\n id=\"reloadOnConnectionTimeoutCheck\"\r\n v-model=\"reloadOnConnectionTimeoutCheck\" \/>\r\n <label class=\"form-check-label\" for=\"reloadOnConnectionTimeoutCheck\">\r\n Reload On Connection Timeout\r\n <\/label>\r\n <a href=\"https:\/\/airensoft.gitbook.io\/ovenplayer\/initialization#webrtcconfig.timeoutmaxretry-and-webrtcconfig.connectiontimeout\"\r\n class=\"ms-1\" target=\"_blank\">\r\n <i class=\"fas fa-external-link-alt\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <div class=\"form-outline ms-4 mb-3\">\r\n <input :disabled=\"!reloadOnConnectionTimeoutCheck\" type=\"number\"\r\n id=\"webrtcLoadingTimeout\" class=\"form-control active\"\r\n v-model=\"webrtcLoadingTimeout\">\r\n <label class=\"form-label\" for=\"webrtcLoadingTimeout\">Timeout\r\n (Millisecond)<\/label>\r\n <\/div>\r\n <div class=\"form-outline ms-4\">\r\n <input :disabled=\"!reloadOnConnectionTimeoutCheck\" type=\"number\"\r\n id=\"webrtcLoadingRetryCount\" class=\"form-control active\"\r\n v-model=\"webrtcLoadingRetryCount\">\r\n <label class=\"form-label\" for=\"webrtcLoadingRetryCount\">Retry count<\/label>\r\n <\/div>\r\n <\/fieldset>\r\n <fieldset>\r\n <div class=\"form-check mb-2\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\"\r\n id=\"playoutDelayHintCheck\" v-model=\"playoutDelayHintCheck\" \/>\r\n <label class=\"form-check-label\" for=\"playoutDelayHintCheck\">\r\n Enable Playout Delay Hint\r\n <\/label>\r\n <a href=\"https:\/\/airensoft.gitbook.io\/ovenplayer\/initialization#webrtcconfig.playoutdelayhint\"\r\n class=\"ms-1\" target=\"_blank\">\r\n <i class=\"fas fa-external-link-alt\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <div class=\"form-outline ms-4\">\r\n <input :disabled=\"!playoutDelayHintCheck\" type=\"number\"\r\n id=\"playoutDelayHintInput\" class=\"form-control active\"\r\n v-model=\"playoutDelayHintInput\">\r\n <label class=\"form-label\" for=\"playoutDelayHintInput\">Delay (Second)<\/label>\r\n <\/div>\r\n <\/fieldset>\r\n <\/div>\r\n <div class=\"col-lg-4 border-start border-2 mb-3 mb-lg-0\">\r\n \r\n <h6>HLS Options<\/h6>\r\n <div class=\"form-check mb-2\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\"\r\n id=\"hlsManageLatencyCheck\" v-model=\"hlsManageLatencyCheck\" \/>\r\n <label class=\"form-check-label\" for=\"hlsManageLatencyCheck\">\r\n Manage Latency\r\n <\/label>\r\n <\/div>\r\n <div class=\"form-outline ms-4 mb-3\">\r\n <input :disabled=\"!hlsManageLatencyCheck\" type=\"number\" id=\"hlsTargetLatency\"\r\n class=\"form-control active\" v-model=\"hlsTargetLatency\">\r\n <label class=\"form-label\" for=\"hlsTargetLatency\">Target latency\r\n (Second)<\/label>\r\n <\/div>\r\n <div class=\"form-outline ms-4 mb-3\">\r\n <input :disabled=\"!hlsManageLatencyCheck\" type=\"number\" id=\"hlsMaxLatency\"\r\n class=\"form-control active\" v-model=\"hlsMaxLatency\">\r\n <label class=\"form-label\" for=\"hlsMaxLatency\">Max latency (Second)<\/label>\r\n <\/div>\r\n <div class=\"form-outline ms-4\">\r\n <input :disabled=\"!hlsManageLatencyCheck\" type=\"number\"\r\n id=\"hlsLiveSyncCatchupRate\" class=\"form-control active\" min=\"1\" max=\"2\"\r\n step=\"0.1\" v-model=\"hlsLiveSyncCatchupRate\">\r\n <label class=\"form-label\" for=\"hlsLiveSyncCatchupRate\">Sync catch up rate\r\n (min:1, max:2)<\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/li>\r\n <li class=\"list-group-item bg-light\">\r\n <h5 class=\"mb-0 fs-6\">Demo Options<\/h5>\r\n <\/li>\r\n <li class=\"list-group-item\">\r\n <div class=\"row\">\r\n <div class=\"col border-start border-2\">\r\n <h6>Reload the player when error occurred<\/h6>\r\n <fieldset>\r\n <div class=\"form-check mb-2\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"autoReload\"\r\n v-model=\"demoOption.autoReload\" @change=\"changeOptions\" \/>\r\n <label class=\"form-check-label\" for=\"autoReload\">\r\n Enable auto reload\r\n <\/label>\r\n <\/div>\r\n <div class=\"form-outline ms-4\">\r\n <input type=\"text\" id=\"playerReloadInterval\" class=\"form-control\"\r\n :class=\"demoOption.autoReloadInterval ? 'active': ''\"\r\n v-model=\"demoOption.autoReloadInterval\" @change=\"changeOptions\">\r\n <label class=\"form-label\" for=\"playerReloadInterval\">\r\n Reload interval (millisecond)\r\n <\/label>\r\n <\/div>\r\n <\/fieldset>\r\n <\/div>\r\n <\/div>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <div v-show=\"createScriptHTML\" class=\"col\">\r\n <ul class=\"list-group\">\r\n <li class=\"list-group-item bg-light\">\r\n <h5 class=\"mb-0 fs-6\">Usage<\/h5>\r\n <\/li>\r\n <li class=\"list-group-item position-relative\">\r\n <div v-html=\"createScriptHTML\" class=\"my-2 small font-monospace w-100 overflow-auto\"\r\n style=\"white-space: pre;\">\r\n <\/div>\r\n <button ref=\"copyCodeButton\" class=\"btn btn-light text-dark position-absolute px-2 px-md-4\"\r\n style=\"top: 0.5rem; right: 1rem\" :data-clipboard-text=\"createScript\">\r\n <i class=\"far fa-copy me-1\"><\/i>COPY\r\n <\/button>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"col\">\r\n <ul class=\"list-group\">\r\n <li class=\"list-group-item bg-light\">\r\n <h5 class=\"mb-0 fs-6\">Export permanent link<\/h5>\r\n <\/li>\r\n <li class=\"list-group-item\">\r\n\r\n <div class=\"input-group\">\r\n <div class=\"form-outline flex-grow-1\">\r\n <input type=\"text\" id=\"permanentLinkInput\" readonly class=\"form-control bg-white\"\r\n v-model=\"permanentLink\" \/>\r\n <\/div>\r\n <button id=\"exportButton\" ref=\"exportButton\" data-clipboard-target=\"#permanentLinkInput\"\r\n class=\"btn btn-primary px-2 px-md-4\" type=\"button\">\r\n <i class=\"far fa-copy me-1\"><\/i>COPY\r\n <\/button>\r\n <\/div>\r\n\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n <script id=\"source-item\" type=\"text\/template\">\r\n <li class=\"list-group-item\">\r\n <div class=\"source-item\">\r\n <div class=\"source-header\">\r\n <div class=\"source-protocol\">\r\n <span class=\"badge bg-warning text-dark\">{{source.type}}<\/span>\r\n <\/div>\r\n <div class=\"source-control\">\r\n <button\r\n ref=\"copyButton\"\r\n class=\"btn btn-light btn-floating btn-sm text-dark\"\r\n :data-clipboard-text=\"source.file\">\r\n <i class=\"far fa-copy\"><\/i>\r\n <\/button>\r\n <button class=\"btn btn-light btn-floating btn-sm text-dark ms-2\"\r\n @click=\"$emit('removeSource')\">\r\n <i class=\"fas fa-trash-alt\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"source-url\">\r\n {{source.file}}\r\n <\/div>\r\n <\/div>\r\n <\/li>\r\n<\/script>\r\n\r\n \r\n <script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/mdb-ui-kit\/3.10.0\/mdb.min.js\"><\/script>\r\n\r\n <script>\r\n\r\n const hash = location.hash;\r\n\r\n let urlOption = null;\r\n\r\n if (hash) {\r\n urlOption = JSON.parse(decodeURIComponent(hash.replace('#', '')));\r\n }\r\n\r\n let playerOption = {\r\n autoStart: true,\r\n autoFallback: true,\r\n mute: false,\r\n sources: []\r\n };\r\n\r\n if (urlOption && urlOption.playerOption) {\r\n\r\n playerOption = _.extend(playerOption, urlOption.playerOption);\r\n }\r\n\r\n let demoOption = {\r\n autoReload: true,\r\n autoReloadInterval: 2000\r\n };\r\n\r\n if (urlOption && urlOption.demoOption) {\r\n\r\n demoOption = _.extend(demoOption, urlOption.demoOption);\r\n }\r\n\r\n function makeCopyButton(element) {\r\n\r\n const tooltip = new mdb.Tooltip(element, {\r\n placement: 'bottom',\r\n title: 'copied!',\r\n trigger: 'manual'\r\n });\r\n\r\n tooltip.timer = null;\r\n\r\n const clipboard = new ClipboardJS(element);\r\n\r\n clipboard.on('success', function () {\r\n\r\n if (tooltip.timer) {\r\n clearTimeout(tooltip.timer);\r\n }\r\n\r\n tooltip.show();\r\n\r\n tooltip.timer = setTimeout(function () {\r\n tooltip.hide();\r\n }, 1000);\r\n });\r\n }\r\n\r\n const app = {\r\n data: function () {\r\n return {\r\n reloadTimer: null,\r\n player: null,\r\n source: null,\r\n loadButtonMsg: 'LOAD PLAYER',\r\n loadButtonColor: 'btn-primary',\r\n loadButtonIcon: 'fa-play',\r\n playerMessage: null,\r\n playerOption: playerOption,\r\n demoOption: demoOption,\r\n permanentLink: location.href,\r\n createScript: null,\r\n createScriptHTML: null,\r\n playerVersion: null\r\n }\r\n },\r\n methods: {\r\n addSource: function () {\r\n\r\n if (!this.source) {\r\n return;\r\n }\r\n\r\n const url = this.source.trim();\r\n\r\n let protocol = null;\r\n\r\n if (url.indexOf('ws:') === 0 || url.indexOf('wss:') === 0) {\r\n\r\n protocol = \"webrtc\";\r\n } else if (url.indexOf('http:') === 0 || url.indexOf('https:') === 0) {\r\n\r\n if (url.indexOf('.m3u8') > 0) {\r\n\r\n protocol = \"hls\";\r\n } else if (url.indexOf('.mpd') > 0) {\r\n\r\n protocol = \"dash\";\r\n } else if (url.indexOf('.mp4') > 0) {\r\n\r\n protocol = \"http\";\r\n }\r\n }\r\n\r\n if (!protocol) {\r\n\r\n this.unLoadPlayer();\r\n this.playerMessage = \"Invalid playback url\";\r\n\r\n return;\r\n }\r\n\r\n const source = {\r\n type: protocol,\r\n file: url\r\n };\r\n\r\n this.playerOption.sources.push(source);\r\n this.source = null;\r\n\r\n this.unLoadPlayer(true);\r\n this.makePermanentLink();\r\n },\r\n removeSource: function (index) {\r\n\r\n this.playerOption.sources.splice(index, 1);\r\n\r\n this.unLoadPlayer(true);\r\n this.makePermanentLink();\r\n },\r\n loadPlayer: function () {\r\n\r\n if (this.player) {\r\n this.player.remove();\r\n this.player = null;\r\n }\r\n\r\n if (this.playerOption.sources.length === 0) {\r\n this.playerMessage = 'Please add the playback sources.';\r\n return;\r\n }\r\n\r\n const playerOption = JSON.parse(JSON.stringify(this.playerOption));\r\n\r\n this.player = OvenPlayer.create('player', playerOption);\r\n\r\n this.playerVersion = this.player.getVersion();\r\n\r\n this.player.on('ready', function () {\r\n vm.loadButtonMsg = 'UNLOAD PLAYER';\r\n vm.loadButtonColor = 'btn-success';\r\n vm.loadButtonIcon = 'fa-stop';\r\n vm.playerMessage = null;\r\n });\r\n\r\n this.player.on('hlsPrepared', function (hls) {\r\n hls.on(Hls.Events.FRAG_PARSING_METADATA, function (data, meta) {\r\n console.log(data, meta);\r\n if (meta && meta.samples) {\r\n meta.samples.forEach(function (sample) {\r\n console.log(new TextDecoder(\"utf-8\").decode(sample.data))\r\n })\r\n }\r\n\r\n });\r\n });\r\n\r\n if (this.demoOption.autoReload && this.demoOption.autoReloadInterval > 0) {\r\n\r\n this.player.once('error', function (e) {\r\n\r\n console.log(e);\r\n\r\n if (this.reloadTimer) {\r\n clearInterval(this.reloadTimer);\r\n this.reloadTimer = null;\r\n }\r\n\r\n vm.reloadTimer = setTimeout(function () {\r\n\r\n vm.unLoadPlayer();\r\n vm.loadPlayer();\r\n }, vm.demoOption.autoReloadInterval);\r\n });\r\n }\r\n },\r\n unLoadPlayer: function (optionChanged) {\r\n\r\n if (this.reloadTimer) {\r\n clearInterval(this.reloadTimer);\r\n this.reloadTimer = null;\r\n }\r\n\r\n if (this.player) {\r\n\r\n this.player.remove();\r\n this.player = null;\r\n this.loadButtonMsg = 'LOAD PLAYER';\r\n this.loadButtonColor = 'btn-primary';\r\n this.loadButtonIcon = 'fa-play';\r\n }\r\n\r\n if (optionChanged) {\r\n this.playerMessage = 'The options have changed. Please reload the player.';\r\n }\r\n },\r\n reloadPlayer: function () {\r\n\r\n if (this.player) {\r\n\r\n this.unLoadPlayer();\r\n } else {\r\n\r\n this.loadPlayer();\r\n }\r\n },\r\n makePermanentLink: function () {\r\n\r\n const link = {};\r\n link.playerOption = this.playerOption;\r\n link.demoOption = this.demoOption;\r\n\r\n location.hash = encodeURIComponent(JSON.stringify(link));\r\n this.permanentLink = location.href;\r\n\r\n let script = 'const player = OvenPlayer.create(\"player_el_id\", '\r\n + JSON.stringify(this.playerOption) + ');';\r\n this.createScript = js_beautify(script);\r\n this.createScriptHTML = hljs.highlight(this.createScript, {\r\n language: 'javascript'\r\n }).value;\r\n },\r\n changeOptions: function () {\r\n\r\n this.unLoadPlayer(true);\r\n this.makePermanentLink();\r\n }\r\n },\r\n computed: {\r\n playoutDelayHintCheck: {\r\n get: function () {\r\n\r\n if (this.playerOption.webrtcConfig &&\r\n this.playerOption.webrtcConfig.playoutDelayHint > -1) {\r\n\r\n return true;\r\n } else {\r\n return false;\r\n }\r\n },\r\n set: function (value) {\r\n\r\n if (value) {\r\n if (!this.playerOption.webrtcConfig) {\r\n this.playerOption.webrtcConfig = {};\r\n }\r\n this.playerOption.webrtcConfig.playoutDelayHint = 3;\r\n } else {\r\n delete this.playerOption.webrtcConfig.playoutDelayHint;\r\n\r\n if (_.isEmpty(this.playerOption.webrtcConfig)) {\r\n\r\n delete this.playerOption.webrtcConfig;\r\n }\r\n }\r\n\r\n this.unLoadPlayer(true);\r\n this.makePermanentLink();\r\n }\r\n },\r\n playoutDelayHintInput: {\r\n get: function () {\r\n\r\n if (this.playoutDelayHintCheck) {\r\n\r\n return this.playerOption.webrtcConfig.playoutDelayHint;\r\n }\r\n },\r\n set: function (value) {\r\n if (value > 0) {\r\n\r\n this.playerOption.webrtcConfig.playoutDelayHint = value;\r\n this.unLoadPlayer(true);\r\n this.makePermanentLink();\r\n }\r\n }\r\n },\r\n reloadOnConnectionTimeoutCheck: {\r\n get: function () {\r\n\r\n if (this.playerOption.webrtcConfig &&\r\n (_.isNumber(this.playerOption.webrtcConfig.connectionTimeout)\r\n || _.isNumber(this.playerOption.webrtcConfig.timeoutMaxRetry))) {\r\n\r\n return true;\r\n } else {\r\n return false;\r\n }\r\n },\r\n set: function (value) {\r\n\r\n if (value) {\r\n if (!this.playerOption.webrtcConfig) {\r\n this.playerOption.webrtcConfig = {};\r\n }\r\n this.playerOption.webrtcConfig.timeoutMaxRetry = 4;\r\n this.playerOption.webrtcConfig.connectionTimeout = 10000;\r\n } else {\r\n\r\n delete this.playerOption.webrtcConfig.timeoutMaxRetry;\r\n delete this.playerOption.webrtcConfig.connectionTimeout;\r\n\r\n if (_.isEmpty(this.playerOption.webrtcConfig)) {\r\n\r\n delete this.playerOption.webrtcConfig;\r\n }\r\n }\r\n\r\n this.unLoadPlayer(true);\r\n this.makePermanentLink();\r\n }\r\n },\r\n webrtcLoadingRetryCount: {\r\n get: function () {\r\n\r\n if (this.playerOption.webrtcConfig &&\r\n _.isNumber(this.playerOption.webrtcConfig.timeoutMaxRetry)) {\r\n\r\n return this.playerOption.webrtcConfig.timeoutMaxRetry;\r\n }\r\n },\r\n set: function (value) {\r\n if (!this.playerOption.webrtcConfig) {\r\n this.playerOption.webrtcConfig = {};\r\n }\r\n\r\n this.playerOption.webrtcConfig.timeoutMaxRetry = value;\r\n this.unLoadPlayer(true);\r\n this.makePermanentLink();\r\n }\r\n },\r\n webrtcLoadingTimeout: {\r\n get: function () {\r\n\r\n if (this.playerOption.webrtcConfig &&\r\n _.isNumber(this.playerOption.webrtcConfig.connectionTimeout)) {\r\n\r\n return this.playerOption.webrtcConfig.connectionTimeout;\r\n }\r\n },\r\n set: function (value) {\r\n if (!this.playerOption.webrtcConfig) {\r\n this.playerOption.webrtcConfig = {};\r\n }\r\n\r\n this.playerOption.webrtcConfig.connectionTimeout = value;\r\n this.unLoadPlayer(true);\r\n this.makePermanentLink();\r\n }\r\n },\r\n llDashCheck: {\r\n get: function () {\r\n\r\n let value = false;\r\n\r\n if (this.playerOption &&\r\n this.playerOption.sources) {\r\n\r\n _.each(this.playerOption.sources, function (source) {\r\n\r\n if (source.type === 'dash' && source.lowLatency === true) {\r\n\r\n value = true;\r\n return;\r\n }\r\n });\r\n }\r\n\r\n return value;\r\n },\r\n set: function (value) {\r\n\r\n if (this.playerOption &&\r\n this.playerOption.sources) {\r\n\r\n _.each(this.playerOption.sources, function (source) {\r\n\r\n if (source.type === 'dash') {\r\n\r\n if (value) {\r\n source.lowLatency = true;\r\n } else {\r\n delete source.lowLatency;\r\n }\r\n }\r\n });\r\n\r\n if (!value) {\r\n\r\n if (this.playerOption.lowLatencyMpdLiveDelay) {\r\n\r\n delete this.playerOption.lowLatencyMpdLiveDelay;\r\n }\r\n }\r\n\r\n this.unLoadPlayer(true);\r\n this.makePermanentLink();\r\n }\r\n }\r\n },\r\n llDashLiveDelay: {\r\n get: function () {\r\n\r\n if (this.playerOption.lowLatencyMpdLiveDelay &&\r\n _.isNumber(this.playerOption.lowLatencyMpdLiveDelay)) {\r\n\r\n return this.playerOption.lowLatencyMpdLiveDelay;\r\n }\r\n },\r\n set: function (value) {\r\n\r\n if (value) {\r\n\r\n this.playerOption.lowLatencyMpdLiveDelay = value;\r\n\r\n } else {\r\n\r\n delete this.playerOption.lowLatencyMpdLiveDelay;\r\n }\r\n\r\n this.unLoadPlayer(true);\r\n this.makePermanentLink();\r\n }\r\n },\r\n hlsManageLatencyCheck: {\r\n get: function () {\r\n\r\n if (this.playerOption.hlsConfig &&\r\n (_.isNumber(this.playerOption.hlsConfig.liveSyncDuration)\r\n || _.isNumber(this.playerOption.hlsConfig.liveMaxLatencyDuration)\r\n || _.isNumber(this.playerOption.hlsConfig.maxLiveSyncPlaybackRate))) {\r\n\r\n return true;\r\n } else {\r\n return false;\r\n }\r\n },\r\n set: function (value) {\r\n\r\n if (value) {\r\n if (!this.playerOption.hlsConfig) {\r\n this.playerOption.hlsConfig = {};\r\n }\r\n this.playerOption.hlsConfig.liveSyncDuration = 1.5;\r\n this.playerOption.hlsConfig.liveMaxLatencyDuration = 3;\r\n this.playerOption.hlsConfig.maxLiveSyncPlaybackRate = 1.5;\r\n } else {\r\n\r\n delete this.playerOption.hlsConfig.liveSyncDuration;\r\n delete this.playerOption.hlsConfig.liveMaxLatencyDuration;\r\n delete this.playerOption.hlsConfig.maxLiveSyncPlaybackRate;\r\n\r\n if (_.isEmpty(this.playerOption.hlsConfig)) {\r\n\r\n delete this.playerOption.hlsConfig;\r\n }\r\n }\r\n\r\n this.unLoadPlayer(true);\r\n this.makePermanentLink();\r\n }\r\n },\r\n hlsTargetLatency: {\r\n get: function () {\r\n\r\n if (this.playerOption.hlsConfig &&\r\n _.isNumber(this.playerOption.hlsConfig.liveSyncDuration)) {\r\n\r\n return this.playerOption.hlsConfig.liveSyncDuration;\r\n }\r\n },\r\n set: function (value) {\r\n if (!this.playerOption.hlsConfig) {\r\n this.playerOption.hlsConfig = {};\r\n }\r\n\r\n this.playerOption.hlsConfig.liveSyncDuration = value;\r\n this.unLoadPlayer(true);\r\n this.makePermanentLink();\r\n }\r\n },\r\n hlsMaxLatency: {\r\n get: function () {\r\n\r\n if (this.playerOption.hlsConfig &&\r\n _.isNumber(this.playerOption.hlsConfig.liveMaxLatencyDuration)) {\r\n\r\n return this.playerOption.hlsConfig.liveMaxLatencyDuration;\r\n }\r\n },\r\n set: function (value) {\r\n if (!this.playerOption.hlsConfig) {\r\n this.playerOption.hlsConfig = {};\r\n }\r\n\r\n this.playerOption.hlsConfig.liveMaxLatencyDuration = value;\r\n this.unLoadPlayer(true);\r\n this.makePermanentLink();\r\n }\r\n },\r\n hlsLiveSyncCatchupRate: {\r\n get: function () {\r\n\r\n if (this.playerOption.hlsConfig &&\r\n _.isNumber(this.playerOption.hlsConfig.maxLiveSyncPlaybackRate)) {\r\n\r\n return this.playerOption.hlsConfig.maxLiveSyncPlaybackRate;\r\n }\r\n },\r\n set: function (value) {\r\n if (!this.playerOption.hlsConfig) {\r\n this.playerOption.hlsConfig = {};\r\n }\r\n\r\n this.playerOption.hlsConfig.maxLiveSyncPlaybackRate = value;\r\n this.unLoadPlayer(true);\r\n this.makePermanentLink();\r\n }\r\n }\r\n\r\n },\r\n mounted: function () {\r\n\r\n this.loadPlayer();\r\n\r\n if (urlOption) {\r\n this.makePermanentLink();\r\n }\r\n\r\n makeCopyButton(this.$refs.copyCodeButton);\r\n makeCopyButton(this.$refs.exportButton);\r\n }\r\n };\r\n\r\n const demo = Vue.createApp(app);\r\n\r\n demo.component('source-item', {\r\n props: ['source', 'index'],\r\n emits: ['removeSource'],\r\n template: document.getElementById('source-item').innerText,\r\n mounted: function () {\r\n makeCopyButton(this.$refs.copyButton);\r\n }\r\n });\r\n\r\n const vm = demo.mount('#app');\r\n\r\n\r\n <\/script>\r\n\r\n<\/body>\r\n\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ba3ee60 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ba3ee60\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ab0e7f2\" data-id=\"ab0e7f2\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2e7e10f elementor-widget elementor-widget-html\" data-id=\"2e7e10f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\r\n <meta http-equiv=\"content-type\" content=\"text\/html; charset=utf-8\"\/>\r\n\r\n <title>OvenPlayer<\/title>\r\n <link rel=\"icon\" href=\".\/assets\/images\/00_OvenPlayer_Favicon.svg\">\r\n\r\n \r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.15.1\/css\/all.min.css\" rel=\"stylesheet\"\/>\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css?family=Roboto:300,400,500,700&display=swap\" rel=\"stylesheet\"\/>\r\n \r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/mdb-ui-kit\/3.10.0\/mdb.min.css\" rel=\"stylesheet\"\/>\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/highlight.js@11.3.1\/styles\/github.css\">\r\n\r\n <style>\r\n\r\n .navbar-toggler-icon {\r\n background-image: url(\"data:image\/svg+xml;charset=utf-8,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(0, 0, 0, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'\/%3E%3C\/svg%3E\") !important;\r\n }\r\n\r\n .playerWrapper {\r\n position: relative;\r\n width: 100%;\r\n height: 0;\r\n padding-bottom: 56.25%;\r\n background-color: #000;\r\n }\r\n\r\n .previewPlayer {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n fieldset {\r\n padding-left: 0.5rem;\r\n padding-bottom: 0.5rem;\r\n font-size: 0.85rem;\r\n }\r\n\r\n .list-group-item {\r\n padding: 0.5rem 1rem;\r\n }\r\n\r\n .list-group-item h6 {\r\n margin-top: 0.5rem;\r\n }\r\n\r\n footer {\r\n font-size: 0.85rem;\r\n }\r\n\r\n <\/style>\r\n\r\n <script>\r\n if (window.location.href.indexOf('localhost') < 0 && window.location.protocol !== 'https:') {\r\n location.href = location.href.replace('http:\/\/', 'https:\/\/');\r\n }\r\n <\/script>\r\n\r\n \r\n <script async src=\"https:\/\/www.googletagmanager.com\/gtag\/js?id=UA-40491361-8\"><\/script>\r\n\r\n <script>\r\n window.dataLayer = window.dataLayer || [];\r\n\r\n function gtag() {\r\n dataLayer.push(arguments);\r\n }\r\n\r\n gtag('js', new Date());\r\n\r\n gtag('config', 'UA-40491361-8');\r\n <\/script>\r\n\r\n<\/head>\r\n<body>\r\n<nav class=\"navbar navbar-expand-md navbar-light bg-light\">\r\n <div class=\"container-lg\">\r\n <a class=\"navbar-brand\" href=\"\/\">OVENPLAYER WEBRTC input<\/a>\r\n <button class=\"navbar-toggler\" type=\"button\" data-mdb-toggle=\"collapse\" data-mdb-target=\"#navbarNav\" aria-controls=\"navbarNav\">\r\n <span class=\"navbar-toggler-icon\"><\/span>\r\n <\/button>\r\n <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\r\n\r\n <ul class=\"navbar-nav ms-auto\">\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link active\" href=\".\/demo.html\">Player Demo<\/a>\r\n <\/li>\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link\" href=\".\/ome_demo.html\">Sub-Second Latency Demo<\/a>\r\n <\/li>\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link\" href=\"https:\/\/github.com\/AirenSoft\/OvenPlayer\" target=\"_blank\">GitHub<\/a>\r\n <\/li>\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link\" href=\"https:\/\/airensoft.gitbook.io\/ovenplayer\/\" target=\"_blank\">Docs<\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n<\/nav>\r\n\r\n\r\n <div class=\"row g-3 mb-3\">\r\n <div class=\"col-12\">\r\n <div class=\"input-group\">\r\n <div class=\"form-outline flex-grow-1\">\r\n <input type=\"text\" id=\"webRtcUrlInput\" class=\"form-control bg-white\"\/>\r\n <label class=\"form-label\" for=\"webRtcUrlInput\">WebRTC input URL<\/label>\r\n <\/div>\r\n <button id=\"streamingButton\" class=\"btn btn-primary px-2 px-md-4\" type=\"button\">\r\n Start\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"col-12\">\r\n Don't have OvenMediaEngine installed? Try our OvenMediaEngine for demo.\r\n <a id=\"useDemoOME\" href=\"#\">Try it out<\/a>\r\n <\/div>\r\n\r\n <div class=\"col-lg-6\">\r\n <div class=\"playerWrapper rounded overflow-hidden\">\r\n <video controls id=\"previewPlayer\" class=\"previewPlayer\"><\/video>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"col-lg-6\">\r\n <ul class=\"list-group\">\r\n <li class=\"list-group-item bg-light hstack\">\r\n <h5 class=\"mb-0 fs-6\">Stream information<\/h5>\r\n <small class=\"ms-auto\">\r\n OvenLiveKit\r\n <span class=\"badge badge-info align-middle ms-1\">1.0.2<\/span>\r\n <\/small>\r\n <\/li>\r\n <li class=\"list-group-item\">\r\n <div class=\"row\">\r\n <div class=\"col\">\r\n <h6>Video<\/h6>\r\n <fieldset>\r\n <div class=\"mb-2\">\r\n <span>Resolution\r\n <span class=\"badge badge-pill badge-info mr-1\" data-mdb-toggle=\"tooltip\" title=\"This may be different from the resolution you set. Because the browser will get the ideal resolution from the input device.\">i<\/span>:\r\n <\/span>\r\n <span id=\"videoResolutionSpan\" class=\"mr-2 align-middle\">-<\/span>\r\n <\/div>\r\n <div class=\"mb-2\">\r\n <span>Framerate: <\/span>\r\n <span id=\"videoFrameRateSpan\" class=\"mr-2\">-<\/span>\r\n <\/div>\r\n <div class=\"mb-2\">\r\n <span>Bitrate: <\/span>\r\n <span id=\"bitrateSpan\" class=\"mr-2\">-<\/span>\r\n <\/div>\r\n\r\n <\/fieldset>\r\n\r\n <h6>Connection<\/h6>\r\n <fieldset>\r\n <div class=\"mb-2\">\r\n <span>ICE state: <\/span>\r\n <span id=\"iceStateSpan\" class=\"mr-2\">-<\/span>\r\n <\/div>\r\n <\/fieldset>\r\n\r\n <div class=\"col-12\">\r\n <small id=\"errorText\" class=\"text-danger\"><\/small>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/li>\r\n <\/ul>\r\n\r\n <div id=\"testPlaybackButtonArea\" class=\"mt-2\" style=\"display: none;\">\r\n <button id=\"playStreamButton\" class=\"btn btn-info w-100\">Play stream with test player<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"col-12\">\r\n <ul class=\"list-group\">\r\n <li class=\"list-group-item bg-light\">\r\n <h5 class=\"mb-0 fs-6\">Input stream settings<\/h5>\r\n <\/li>\r\n <li class=\"list-group-item\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-6 border-start border-2 mb-3 mb-lg-0\">\r\n <h6>Video settings<\/h6>\r\n <fieldset>\r\n <label for=\"videoSourceSelect\">Device<\/label>\r\n <select name=\"\" id=\"videoSourceSelect\" class=\"form-control constraintSelect mb-2\">\r\n <\/select>\r\n\r\n <label for=\"videoResolutionSelect\">Resolution<\/label>\r\n <select id=\"videoResolutionSelect\" class=\"form-control constraintSelect mb-2\">\r\n <option selected value=\"\">Not Set<\/option>\r\n <option value=\"fhd\">Full HD (1920x1080)<\/option>\r\n <option value=\"hd\">HD (1280x720)<\/option>\r\n <option value=\"vga\">VGA (640x480)<\/option>\r\n <\/select>\r\n\r\n <label for=\"videoBitrateInput\">Bitrate limit (kbps)<\/label>\r\n <input id=\"videoBitrateInput\" type=\"number\" class=\"form-control constraintSelect mb-2\" placeholder=\"Unlimited\">\r\n\r\n <label for=\"videoFrameInput\">Frame rate<\/label>\r\n <input id=\"videoFrameInput\" type=\"number\" class=\"form-control constraintSelect\" placeholder=\"Not Set\">\r\n <\/fieldset>\r\n <\/div>\r\n <div class=\"col-lg-6 border-start border-2 mb-3 mb-lg-0\">\r\n <h6>Audio settings<\/h6>\r\n <fieldset>\r\n <div id=\"audioSourceSelectArea\">\r\n <label for=\"audioSourceSelect\">Device<\/label>\r\n <select class=\"form-control constraintSelect\" id=\"audioSourceSelect\">\r\n <option selected>Choose...<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/fieldset>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n<\/div>\r\n<div class=\"bg-light border-top mt-5\">\r\n <div class=\"container-lg mt-3\">\r\n \r\n\r\n <\/div>\r\n<\/div>\r\n\r\n<script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/mdb-ui-kit\/3.10.0\/mdb.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/underscore@1.12.0\/underscore-min.js\"><\/script>\r\n<script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.slim.min.js\" integrity=\"sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=\" crossorigin=\"anonymous\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/ovenlivekit\/dist\/OvenLiveKit.min.js\"><\/script>\r\n\r\n<script>\r\n\r\n let allDevices = null;\r\n\r\n let input = null;\r\n\r\n const userResolutions = {\r\n vga: {\r\n \/\/ width: {exact: 640}, height: {exact: 480}\r\n \/\/ width: { min: 0, ideal: 640}, height: { min: 0, ideal: 480 }\r\n width: {ideal: 640}, height: {ideal: 480}\r\n },\r\n hd: {\r\n \/\/ width: {exact: 1280}, height: {exact: 720}\r\n \/\/ width: { min: 640, ideal: 1280}, height: { min: 480, ideal: 720 }\r\n width: {ideal: 1280}, height: {ideal: 720}\r\n },\r\n fhd: {\r\n \/\/ width: {exact: 1920}, height: {exact: 1080}\r\n \/\/ width: { min: 1280, ideal: 1920}, height: { min: 720, ideal: 1080 }\r\n width: {ideal: 1920}, height: {ideal: 1080}\r\n }\r\n };\r\n\r\n const displayResolutions = {\r\n vga: {\r\n width: 640, height: 480\r\n },\r\n hd: {\r\n width: 1280, height: 720\r\n },\r\n fhd: {\r\n width: 1920, height: 1080\r\n }\r\n };\r\n\r\n let streamingStarted = false;\r\n\r\n let videoElement = document.getElementById('previewPlayer');\r\n\r\n let streamingButton = $('#streamingButton');\r\n\r\n let errorTextSpan = $('#errorText');\r\n\r\n let webRtcUrlInput = $('#webRtcUrlInput');\r\n let videoSourceSelect = $('#videoSourceSelect');\r\n let videoResolutionSelect = $('#videoResolutionSelect');\r\n let videoBitrateInput = $('#videoBitrateInput');\r\n let videoFrameInput = $('#videoFrameInput');\r\n let audioSourceSelect = $('#audioSourceSelect');\r\n let audioSourceSelectArea = $('#audioSourceSelectArea');\r\n\r\n let videoResolutionSpan = $('#videoResolutionSpan');\r\n let videoFrameRateSpan = $('#videoFrameRateSpan');\r\n let iceStateSpan = $('#iceStateSpan');\r\n let bitrateSpan = $('#bitrateSpan');\r\n\r\n let testPlaybackButtonArea = $('#testPlaybackButtonArea');\r\n let playStreamButton = $('#playStreamButton');\r\n\r\n let savedWebRtcUrl = localStorage.getItem('savedWebRtcUrl');\r\n let savedVideoSource = localStorage.getItem('savedVideoSource');\r\n let savedVideoResolution = localStorage.getItem('savedVideoResolution');\r\n let savedVideoBitrate = localStorage.getItem('savedVideoBitrate');\r\n let savedVideoFrame = localStorage.getItem('savedVideoFrame');\r\n let savedAudioSource = localStorage.getItem('savedAudioSource');\r\n\r\n if (savedWebRtcUrl) {\r\n webRtcUrlInput.val(savedWebRtcUrl);\r\n }\r\n\r\n webRtcUrlInput.on('change', function () {\r\n localStorage.setItem('savedWebRtcUrl', $(this).val());\r\n });\r\n\r\n videoSourceSelect.on('change', function () {\r\n localStorage.setItem('savedVideoSource', $(this).val());\r\n\r\n if ($(this).val() === 'displayCapture') {\r\n audioSourceSelectArea.hide();\r\n } else {\r\n audioSourceSelectArea.show();\r\n }\r\n\r\n if ($(this).val() === 'no') {\r\n\r\n enableVideoContrll(false);\r\n } else {\r\n\r\n enableVideoContrll(true);\r\n }\r\n });\r\n\r\n videoResolutionSelect.on('change', function () {\r\n localStorage.setItem('savedVideoResolution', $(this).val());\r\n });\r\n\r\n videoBitrateInput.on('change', function () {\r\n localStorage.setItem('savedVideoBitrate', $(this).val());\r\n });\r\n\r\n videoFrameInput.on('change', function () {\r\n localStorage.setItem('savedVideoFrame', $(this).val());\r\n });\r\n\r\n audioSourceSelect.on('change', function () {\r\n localStorage.setItem('savedAudioSource', $(this).val());\r\n });\r\n\r\n $('.constraintSelect').on('change', function () {\r\n stopStreaming();\r\n });\r\n\r\n $('#useDemoOME').on('click', function (e) {\r\n e.preventDefault();\r\n webRtcUrlInput.val('wss:\/\/demo.ovenplayer.com:3333\/app\/test-input-stream?direction=send&transport=tcp');\r\n webRtcUrlInput.focus();\r\n webRtcUrlInput.change();\r\n });\r\n\r\n function enableVideoContrll(enable) {\r\n videoResolutionSelect.prop('disabled', !enable);\r\n videoBitrateInput.prop('disabled', !enable);\r\n videoFrameInput.prop('disabled', !enable);\r\n }\r\n\r\n\r\n let frameCalculatorTimer = null;\r\n let totalVideoFrames = 0;\r\n\r\n function getResolutionAndCalculateFrame(videoElement) {\r\n\r\n if (frameCalculatorTimer) {\r\n\r\n clearInterval(frameCalculatorTimer);\r\n videoResolutionSpan.text('-');\r\n videoFrameRateSpan.empty('-');\r\n frameCalculatorTimer = null;\r\n totalVideoFrames = 0;\r\n }\r\n\r\n frameCalculatorTimer = setInterval(function () {\r\n\r\n videoResolutionSpan.text(videoElement.videoWidth + 'x' + videoElement.videoHeight);\r\n\r\n if (totalVideoFrames === 0) {\r\n\r\n totalVideoFrames = videoElement.getVideoPlaybackQuality().totalVideoFrames;\r\n } else {\r\n\r\n let currentTotalFrame = videoElement.getVideoPlaybackQuality().totalVideoFrames;\r\n let frameRate = currentTotalFrame - totalVideoFrames;\r\n\r\n videoFrameRateSpan.text(frameRate + 'fps');\r\n\r\n totalVideoFrames = currentTotalFrame;\r\n }\r\n\r\n }, 1000);\r\n }\r\n\r\n function getUserConstraints() {\r\n\r\n let videoDeviceId = videoSourceSelect.val();\r\n let videoResolution = videoResolutionSelect.val();\r\n let videoFrame = videoFrameInput.val();\r\n let audioDeviceId = audioSourceSelect.val();\r\n\r\n let newConstraint = {};\r\n\r\n if (videoDeviceId !== 'no') {\r\n if (videoDeviceId) {\r\n newConstraint.video = {\r\n deviceId: {\r\n exact: videoDeviceId\r\n }\r\n };\r\n }\r\n\r\n if (videoResolution) {\r\n\r\n const resolution = userResolutions[videoResolution];\r\n\r\n newConstraint.video.width = resolution.width;\r\n newConstraint.video.height = resolution.height;\r\n }\r\n\r\n if (videoFrame) {\r\n newConstraint.video.frameRate = {exact: parseInt(videoFrame)};\r\n }\r\n }\r\n\r\n if (audioDeviceId !== 'no') {\r\n if (audioDeviceId) {\r\n newConstraint.audio = {\r\n deviceId: {\r\n exact: audioDeviceId\r\n }\r\n };\r\n }\r\n }\r\n\r\n return newConstraint;\r\n }\r\n\r\n function getDisplayConstraints() {\r\n\r\n let videoResolution = videoResolutionSelect.val();\r\n let videoFrame = videoFrameInput.val();\r\n\r\n let newConstraint = {};\r\n\r\n newConstraint.video = {};\r\n\r\n if (videoResolution) {\r\n\r\n const resolution = displayResolutions[videoResolution];\r\n\r\n newConstraint.video.width = resolution.width;\r\n newConstraint.video.height = resolution.height;\r\n } else {\r\n\r\n newConstraint.video = true;\r\n }\r\n\r\n if (videoFrame) {\r\n\r\n if (!newConstraint.video) {\r\n\r\n newConstraint.video = {};\r\n }\r\n\r\n newConstraint.video.frameRate = parseInt(videoFrame);\r\n }\r\n\r\n newConstraint.audio = true;\r\n\r\n return newConstraint;\r\n }\r\n\r\n function setDevice(type, select, devices) {\r\n\r\n select.empty();\r\n\r\n if (type === 'audio' && devices.length === 0) {\r\n\r\n select.append('<option value=\"\">No Source Available<\/option>')\r\n } else {\r\n\r\n _.each(devices, function (device) {\r\n\r\n let option = $('<option><\/option>');\r\n\r\n option.text(device.label);\r\n option.val(device.deviceId);\r\n\r\n select.append(option);\r\n });\r\n\r\n \/\/ if (type === 'video') {\r\n \/\/\r\n \/\/ let option = $('<option><\/option>');\r\n \/\/\r\n \/\/ option.text('Display capture');\r\n \/\/ option.val('displayCapture');\r\n \/\/\r\n \/\/ if (!navigator.mediaDevices.getDisplayMedia) {\r\n \/\/\r\n \/\/ option.text('Display capture (Not supported)');\r\n \/\/ option.attr('disabled', 'disabled');\r\n \/\/ }\r\n \/\/\r\n \/\/\r\n \/\/ select.append(option);\r\n \/\/ }\r\n }\r\n\r\n if (type === 'video') {\r\n\r\n let option = $('<option><\/option>');\r\n\r\n option.text('Without video');\r\n option.val('no');\r\n\r\n select.append(option);\r\n }\r\n\r\n if (type === 'audio') {\r\n\r\n let option = $('<option><\/option>');\r\n\r\n option.text('Without audio');\r\n option.val('no');\r\n\r\n select.append(option);\r\n }\r\n\r\n select.find('option').eq(0).prop('selected', true);\r\n }\r\n\r\n function checkDevice(devices, deviceId) {\r\n\r\n if (deviceId === 'displayCapture') {\r\n return true;\r\n }\r\n\r\n let filtered = _.filter(devices, function (device) {\r\n\r\n return device.deviceId === deviceId;\r\n });\r\n\r\n return filtered.length > 0;\r\n }\r\n\r\n function resetMessages() {\r\n\r\n errorTextSpan.empty();\r\n\r\n clearInterval(frameCalculatorTimer);\r\n frameCalculatorTimer = null;\r\n\r\n\r\n videoResolutionSpan.text('-');\r\n videoFrameRateSpan.text('-');\r\n bitrateSpan.text('-');\r\n iceStateSpan.text('-');\r\n\r\n }\r\n\r\n\r\n function createInput() {\r\n\r\n testPlaybackButtonArea.hide();\r\n streamingButton.prop('disabled', true);\r\n\r\n if (input) {\r\n input.remove();\r\n input = null;\r\n }\r\n\r\n resetMessages();\r\n\r\n input = OvenLiveKit.create({\r\n callbacks: {\r\n error: function (error) {\r\n\r\n let errorMessage = '';\r\n\r\n if (error.message) {\r\n\r\n errorMessage = error.message;\r\n } else if (error.name) {\r\n\r\n errorMessage = error.name;\r\n } else {\r\n\r\n errorMessage = error.toString();\r\n }\r\n\r\n if (errorMessage === 'OverconstrainedError') {\r\n\r\n errorMessage = 'The input device does not support the specified resolution or frame rate.';\r\n }\r\n\r\n resetMessages();\r\n\r\n errorTextSpan.text(errorMessage);\r\n },\r\n connectionClosed: function (type, event) {\r\n if (type === 'websocket') {\r\n let reason;\r\n \/\/ See http:\/\/tools.ietf.org\/html\/rfc6455#section-7.4.1\r\n if (event.code === 1000)\r\n reason = \"Normal closure, meaning that the purpose for which the connection was established has been fulfilled.\";\r\n else if (event.code === 1001)\r\n reason = \"An endpoint is \\\"going away\\\", such as a server going down or a browser having navigated away from a page.\";\r\n else if (event.code === 1002)\r\n reason = \"An endpoint is terminating the connection due to a protocol error\";\r\n else if (event.code === 1003)\r\n reason = \"An endpoint is terminating the connection because it has received a type of data it cannot accept (e.g., an endpoint that understands only text data MAY send this if it receives a binary message).\";\r\n else if (event.code === 1004)\r\n reason = \"Reserved. The specific meaning might be defined in the future.\";\r\n else if (event.code === 1005)\r\n reason = \"No status code was actually present.\";\r\n else if (event.code === 1006)\r\n reason = \"The connection was closed abnormally, e.g., without sending or receiving a Close control frame\";\r\n else if (event.code === 1007)\r\n reason = \"An endpoint is terminating the connection because it has received data within a message that was not consistent with the type of the message (e.g., non-UTF-8 [http:\/\/tools.ietf.org\/html\/rfc3629] data within a text message).\";\r\n else if (event.code === 1008)\r\n reason = \"An endpoint is terminating the connection because it has received a message that \\\"violates its policy\\\". This reason is given either if there is no other sutible reason, or if there is a need to hide specific details about the policy.\";\r\n else if (event.code === 1009)\r\n reason = \"An endpoint is terminating the connection because it has received a message that is too big for it to process.\";\r\n else if (event.code === 1010) \/\/ Note that this status code is not used by the server, because it can fail the WebSocket handshake instead.\r\n reason = \"An endpoint (client) is terminating the connection because it has expected the server to negotiate one or more extension, but the server didn't return them in the response message of the WebSocket handshake. <br \/> Specifically, the extensions that are needed are: \" + event.reason;\r\n else if (event.code === 1011)\r\n reason = \"A server is terminating the connection because it encountered an unexpected condition that prevented it from fulfilling the request.\";\r\n else if (event.code === 1015)\r\n reason = \"The connection was closed due to a failure to perform a TLS handshake (e.g., the server certificate can't be verified).\";\r\n else\r\n reason = \"Unknown reason\";\r\n $('#errorText').html('Web Socket is closed. ' + reason);\r\n }\r\n if (type === 'ice') {\r\n $('#errorText').html('Peer Connection is closed. State: ' + input.peerConnection.iceConnectionState);\r\n }\r\n },\r\n iceStateChange: function (state) {\r\n iceStateSpan.text(state);\r\n if (state === 'connected') {\r\n testPlaybackButtonArea.show();\r\n }\r\n }\r\n }\r\n });\r\n\r\n input.attachMedia(videoElement);\r\n\r\n if (videoSourceSelect.val()) {\r\n\r\n if (videoSourceSelect.val() === 'displayCapture') {\r\n\r\n\r\n input.getDisplayMedia(getDisplayConstraints()).then(function (stream) {\r\n\r\n streamingButton.prop('disabled', false);\r\n getResolutionAndCalculateFrame(videoElement);\r\n });\r\n } else {\r\n\r\n const userConstraints = getUserConstraints();\r\n\r\n input.getUserMedia(userConstraints).then(function (stream) {\r\n\r\n streamingButton.prop('disabled', false);\r\n getResolutionAndCalculateFrame(videoElement);\r\n });\r\n }\r\n }\r\n }\r\n\r\n function startStreaming() {\r\n\r\n streamingStarted = true;\r\n streamingButton.removeClass('btn-primary').addClass('btn-danger');\r\n streamingButton.text('STOP');\r\n\r\n if (input) {\r\n\r\n let connectionConfig = {};\r\n\r\n if (videoBitrateInput.val()) {\r\n connectionConfig.maxVideoBitrate = parseInt(videoBitrateInput.val());\r\n }\r\n\r\n input.startStreaming(webRtcUrlInput.val(), connectionConfig);\r\n }\r\n }\r\n\r\n function stopStreaming() {\r\n\r\n streamingStarted = false;\r\n streamingButton.removeClass('btn-danger').addClass('btn-primary');\r\n streamingButton.text('START');\r\n\r\n if (input) {\r\n createInput();\r\n }\r\n\r\n }\r\n\r\n streamingButton.on('click', function () {\r\n\r\n if (!streamingStarted) {\r\n startStreaming();\r\n } else {\r\n stopStreaming();\r\n }\r\n });\r\n\r\n playStreamButton.on('click', function () {\r\n const link = {};\r\n\r\n const inputUrl = webRtcUrlInput.val();\r\n\r\n const url = new URL(inputUrl);\r\n\r\n let playbackUrl = url.protocol + url.host + url.pathname;\r\n\r\n if (url.searchParams.get('transport')) {\r\n\r\n playbackUrl += '?transport=' + url.searchParams.get('transport');\r\n }\r\n\r\n link.playerOption = {\r\n autoStart: true,\r\n sources: [\r\n {\r\n type: 'webrtc',\r\n file: playbackUrl\r\n }\r\n ]\r\n };\r\n\r\n window.open('https:\/\/demo.ovenplayer.com#' + encodeURIComponent(JSON.stringify(link)));\r\n\r\n });\r\n\r\n \/\/ videoBitrateInput.on('change', function () {\r\n \/\/\r\n \/\/ if (!input || !input.peerConnection) {\r\n \/\/ return;\r\n \/\/ }\r\n \/\/\r\n \/\/ const bandwidth = videoBitrateInput.val();\r\n \/\/\r\n \/\/ const senders = input.peerConnection.getSenders();\r\n \/\/\r\n \/\/ _.each(senders, function (sender) {\r\n \/\/\r\n \/\/ if (sender.track.kind === 'video') {\r\n \/\/\r\n \/\/ const parameters = sender.getParameters();\r\n \/\/ if (!parameters.encodings) {\r\n \/\/ parameters.encodings = [{}];\r\n \/\/ }\r\n \/\/ if (bandwidth === '') {\r\n \/\/ delete parameters.encodings[0].maxBitrate;\r\n \/\/ } else {\r\n \/\/ parameters.encodings[0].maxBitrate = bandwidth * 1000;\r\n \/\/ }\r\n \/\/ sender.setParameters(parameters)\r\n \/\/ .then(() => {\r\n \/\/\r\n \/\/ })\r\n \/\/ .catch(e => console.error(e));\r\n \/\/ }\r\n \/\/ });\r\n \/\/ });\r\n\r\n let lastResult;\r\n\r\n setInterval(function () {\r\n\r\n if (!input || !input.peerConnection) {\r\n bitrateSpan.text('-');\r\n return;\r\n }\r\n\r\n let sender = null;\r\n\r\n input.peerConnection.getSenders().forEach(function (s) {\r\n\r\n if (s.track && s.track.kind === 'video') {\r\n sender = s;\r\n }\r\n });\r\n\r\n if (!sender) {\r\n bitrateSpan.text('-');\r\n return;\r\n }\r\n\r\n sender.getStats().then(res => {\r\n res.forEach(report => {\r\n let bytes;\r\n let headerBytes;\r\n let packets;\r\n\r\n if (report.type === 'outbound-rtp') {\r\n if (report.isRemote) {\r\n return;\r\n }\r\n\r\n const now = report.timestamp;\r\n bytes = report.bytesSent;\r\n headerBytes = report.headerBytesSent;\r\n\r\n packets = report.packetsSent;\r\n if (lastResult && lastResult.has(report.id)) {\r\n \/\/ calculate bitrate\r\n const bitrate = 8 * (bytes - lastResult.get(report.id).bytesSent) \/\r\n (now - lastResult.get(report.id).timestamp);\r\n const headerrate = 8 * (headerBytes - lastResult.get(report.id).headerBytesSent) \/\r\n (now - lastResult.get(report.id).timestamp);\r\n\r\n const packetsSent = packets - lastResult.get(report.id).packetsSent;\r\n\r\n bitrateSpan.text(bitrate.toFixed(2) + 'kbps');\r\n }\r\n\r\n \/\/ console.log('framesEncoded', report.framesEncoded, 'keyFramesEncoded', report.keyFramesEncoded, report.framesEncoded \/ report.keyFramesEncoded + '(' + report.framesPerSecond + 'fps)')\r\n }\r\n\r\n if (report.type === 'track') {\r\n \/\/ console.log(report)\r\n }\r\n\r\n });\r\n lastResult = res;\r\n });\r\n }, 2000);\r\n\r\n\r\n \/\/ get all devices at the first time\r\n OvenLiveKit.getDevices().then(function (devices) {\r\n\r\n allDevices = devices;\r\n initDemo();\r\n }).catch(function (error) {\r\n\r\n let errorMessage = '';\r\n\r\n if (error.message) {\r\n\r\n errorMessage = error.message;\r\n } else if (error.name) {\r\n\r\n errorMessage = error.name;\r\n } else {\r\n\r\n errorMessage = error.toString();\r\n }\r\n\r\n $('#errorText').text(errorMessage);\r\n });\r\n\r\n function initDemo() {\r\n\r\n if (allDevices) {\r\n\r\n setDevice('video', videoSourceSelect, allDevices.videoinput,);\r\n setDevice('audio', audioSourceSelect, allDevices.audioinput);\r\n\r\n if (savedVideoSource && checkDevice(allDevices.videoinput, savedVideoSource)) {\r\n videoSourceSelect.val(savedVideoSource);\r\n }\r\n\r\n if (savedVideoSource === 'no') {\r\n enableVideoContrll(false);\r\n }\r\n\r\n if (savedVideoSource === 'displayCapture') {\r\n audioSourceSelectArea.hide();\r\n }\r\n\r\n if (savedVideoResolution) {\r\n videoResolutionSelect.val(savedVideoResolution);\r\n }\r\n\r\n if (savedVideoBitrate) {\r\n videoBitrateInput.val(savedVideoBitrate);\r\n }\r\n\r\n if (savedVideoFrame) {\r\n videoFrameInput.val(savedVideoFrame);\r\n }\r\n\r\n if (savedAudioSource && checkDevice(allDevices.audioinput, savedAudioSource)) {\r\n audioSourceSelect.val(savedAudioSource);\r\n }\r\n }\r\n\r\n createInput();\r\n }\r\n\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t<div class=\"elementor-element elementor-element-eb3f9d3 e-flex e-con-boxed e-con e-parent\" data-id=\"eb3f9d3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3467a2d elementor-widget elementor-widget-shortcode\" data-id=\"3467a2d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div class=\"pt-video-grid\">\n<article class=\"pt-video-card\" data-video-id=\"7a26248b-f89e-4e27-aed5-3a11fbfbf05f\" data-video-embed=\"https:\/\/video3.shadow-technologies.com\/videos\/embed\/g5QPG3Xi5SaUhjDZ2qwENc\">\n\t<div class=\"pt-video-thumbnail\">\n\t\t<a href=\"#\" class=\"pt-video-play\" data-video-id=\"7a26248b-f89e-4e27-aed5-3a11fbfbf05f\" data-video-number=\"\">\n\t\t\t\t\t\t\t\t\t\t\t<img src=\"https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/bb39a4d4-5463-4afc-b225-628170ab55c1.jpg\" \n\t\t\t\t\t \t\t\t\t\t srcset=\"https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/8987ac77-3090-4dfe-8d1a-532e46b710a4.jpg 128w, https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/bb39a4d4-5463-4afc-b225-628170ab55c1.jpg 640w\"\n\t\t\t\t\t sizes=\"(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw\"\n\t\t\t\t\t \t\t\t\t\t alt=\"Mother's Day Video 2026\"\n\t\t\t\t\t loading=\"lazy\"\n\t\t\t\t\t decoding=\"async\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"pt-duration\">3:59<\/span>\n\t\t\t\t\t\t<span class=\"pt-play-button\"><\/span>\n\t\t<\/a>\n\t<\/div>\n\t\n\t<div class=\"pt-video-info\">\n\t\t<h3 class=\"pt-video-title\">\n\t\t\t<a href=\"https:\/\/shadow-technologies.com\/?page_id=10749&pt_video_id=7a26248b-f89e-4e27-aed5-3a11fbfbf05f&pt_channel=gwcbs\">\n\t\t\t\tMother's Day Video 2026\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\n\t\t<div class=\"pt-video-meta\">\n\t\t\t<span class=\"pt-meta-line\">\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\n\t\t\t<span class=\"pt-meta-line\">\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-duration\" title=\"Length\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-clock\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"><\/path><\/svg>\t\t\t\t\t\t3:59\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-date\" title=\"Published\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-calendar\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z\"><\/path><\/svg>\t\t\t\t\t\t1 weeks ago\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-category\" title=\"Category\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-folder\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776\"><\/path><\/svg>\t\t\t\t\t\tEducation\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-views\" title=\"Views\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-eye\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z\"><\/path><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"><\/path><\/svg>\t\t\t\t\t\t14 Views\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\n\t\t\t\t\t<\/div>\n\t<\/div>\n<\/article>\n\n\n<article class=\"pt-video-card\" data-video-id=\"acdc3bd8-42b5-4dfa-9eff-4bf1460f026b\" data-video-embed=\"https:\/\/video3.shadow-technologies.com\/videos\/embed\/nm3m8Xs2DfuH5Ayirz9SVR\">\n\t<div class=\"pt-video-thumbnail\">\n\t\t<a href=\"#\" class=\"pt-video-play\" data-video-id=\"acdc3bd8-42b5-4dfa-9eff-4bf1460f026b\" data-video-number=\"\">\n\t\t\t\t\t\t\t\t\t\t\t<img src=\"https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/77d49245-7f5e-4a34-a129-c094f9ebe4db.png\" \n\t\t\t\t\t \t\t\t\t\t srcset=\"https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/b6c9be99-e6ec-4b8a-8081-569b8e40870f.png 128w, https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/77d49245-7f5e-4a34-a129-c094f9ebe4db.png 640w\"\n\t\t\t\t\t sizes=\"(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw\"\n\t\t\t\t\t \t\t\t\t\t alt=\"Gateway Sunday Service - 4\/12\/2026, 12:31:32 PM\"\n\t\t\t\t\t loading=\"lazy\"\n\t\t\t\t\t decoding=\"async\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"pt-duration\">13:51<\/span>\n\t\t\t\t\t\t<span class=\"pt-play-button\"><\/span>\n\t\t<\/a>\n\t<\/div>\n\t\n\t<div class=\"pt-video-info\">\n\t\t<h3 class=\"pt-video-title\">\n\t\t\t<a href=\"https:\/\/shadow-technologies.com\/?page_id=10749&pt_video_id=acdc3bd8-42b5-4dfa-9eff-4bf1460f026b&pt_channel=gwcbs\">\n\t\t\t\tGateway Sunday Service - 4\/12\/2026, 12:31:32 PM\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\n\t\t<div class=\"pt-video-meta\">\n\t\t\t<span class=\"pt-meta-line\">\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\n\t\t\t<span class=\"pt-meta-line\">\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-duration\" title=\"Length\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-clock\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"><\/path><\/svg>\t\t\t\t\t\t13:51\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-date\" title=\"Published\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-calendar\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z\"><\/path><\/svg>\t\t\t\t\t\t1 months ago\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-category\" title=\"Category\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-folder\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776\"><\/path><\/svg>\t\t\t\t\t\tEducation\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-views\" title=\"Views\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-eye\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z\"><\/path><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"><\/path><\/svg>\t\t\t\t\t\t0 Views\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\n\t\t\t\t\t<\/div>\n\t<\/div>\n<\/article>\n\n\n<article class=\"pt-video-card\" data-video-id=\"6441a57e-614c-4de6-b068-159b26e0e2be\" data-video-embed=\"https:\/\/video3.shadow-technologies.com\/videos\/embed\/do3CqN8r9JZ998s2ip7h6u\">\n\t<div class=\"pt-video-thumbnail\">\n\t\t<a href=\"#\" class=\"pt-video-play\" data-video-id=\"6441a57e-614c-4de6-b068-159b26e0e2be\" data-video-number=\"\">\n\t\t\t\t\t\t\t\t\t\t\t<img src=\"https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/bd7fb149-cc83-44b1-9c4e-31ed81a29495.png\" \n\t\t\t\t\t \t\t\t\t\t srcset=\"https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/d1bd46a1-65c4-4750-83a1-4210a53a59ab.png 128w, https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/bd7fb149-cc83-44b1-9c4e-31ed81a29495.png 640w\"\n\t\t\t\t\t sizes=\"(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw\"\n\t\t\t\t\t \t\t\t\t\t alt=\"Gateway Sunday Service - 4\/12\/2026, 3:21:14 AM\"\n\t\t\t\t\t loading=\"lazy\"\n\t\t\t\t\t decoding=\"async\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"pt-duration\">0:09<\/span>\n\t\t\t\t\t\t<span class=\"pt-play-button\"><\/span>\n\t\t<\/a>\n\t<\/div>\n\t\n\t<div class=\"pt-video-info\">\n\t\t<h3 class=\"pt-video-title\">\n\t\t\t<a href=\"https:\/\/shadow-technologies.com\/?page_id=10749&pt_video_id=6441a57e-614c-4de6-b068-159b26e0e2be&pt_channel=gwcbs\">\n\t\t\t\tGateway Sunday Service - 4\/12\/2026, 3:21:14 AM\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\n\t\t<div class=\"pt-video-meta\">\n\t\t\t<span class=\"pt-meta-line\">\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\n\t\t\t<span class=\"pt-meta-line\">\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-duration\" title=\"Length\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-clock\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"><\/path><\/svg>\t\t\t\t\t\t0:09\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-date\" title=\"Published\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-calendar\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z\"><\/path><\/svg>\t\t\t\t\t\t1 months ago\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-category\" title=\"Category\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-folder\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776\"><\/path><\/svg>\t\t\t\t\t\tEducation\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-views\" title=\"Views\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-eye\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z\"><\/path><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"><\/path><\/svg>\t\t\t\t\t\t0 Views\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\n\t\t\t\t\t<\/div>\n\t<\/div>\n<\/article>\n\n\n<article class=\"pt-video-card\" data-video-id=\"486d2cfa-8e2a-438d-9fde-4fa6c85a72ea\" data-video-embed=\"https:\/\/video3.shadow-technologies.com\/videos\/embed\/9WJ2PZWF3hedw2cKPEH9Sf\">\n\t<div class=\"pt-video-thumbnail\">\n\t\t<a href=\"#\" class=\"pt-video-play\" data-video-id=\"486d2cfa-8e2a-438d-9fde-4fa6c85a72ea\" data-video-number=\"\">\n\t\t\t\t\t\t\t\t\t\t\t<img src=\"https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/2c8e6ae3-8380-49f5-a9eb-d0e783dcf6f8.png\" \n\t\t\t\t\t \t\t\t\t\t srcset=\"https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/0ba5582c-26ef-44b0-a6a3-8f81adfe17f5.png 128w, https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/2c8e6ae3-8380-49f5-a9eb-d0e783dcf6f8.png 640w\"\n\t\t\t\t\t sizes=\"(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw\"\n\t\t\t\t\t \t\t\t\t\t alt=\"Gateway Sunday Service - 4\/12\/2026, 3:10:48 AM\"\n\t\t\t\t\t loading=\"lazy\"\n\t\t\t\t\t decoding=\"async\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"pt-duration\">10:11<\/span>\n\t\t\t\t\t\t<span class=\"pt-play-button\"><\/span>\n\t\t<\/a>\n\t<\/div>\n\t\n\t<div class=\"pt-video-info\">\n\t\t<h3 class=\"pt-video-title\">\n\t\t\t<a href=\"https:\/\/shadow-technologies.com\/?page_id=10749&pt_video_id=486d2cfa-8e2a-438d-9fde-4fa6c85a72ea&pt_channel=gwcbs\">\n\t\t\t\tGateway Sunday Service - 4\/12\/2026, 3:10:48 AM\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\n\t\t<div class=\"pt-video-meta\">\n\t\t\t<span class=\"pt-meta-line\">\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\n\t\t\t<span class=\"pt-meta-line\">\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-duration\" title=\"Length\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-clock\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"><\/path><\/svg>\t\t\t\t\t\t10:11\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-date\" title=\"Published\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-calendar\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z\"><\/path><\/svg>\t\t\t\t\t\t1 months ago\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-category\" title=\"Category\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-folder\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776\"><\/path><\/svg>\t\t\t\t\t\tEducation\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-views\" title=\"Views\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-eye\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z\"><\/path><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"><\/path><\/svg>\t\t\t\t\t\t0 Views\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\n\t\t\t\t\t<\/div>\n\t<\/div>\n<\/article>\n\n\n<article class=\"pt-video-card\" data-video-id=\"dff8a7b7-6fe5-44ea-ac71-8ca39794a90e\" data-video-embed=\"https:\/\/video3.shadow-technologies.com\/videos\/embed\/tE6VkqDFuLnDcocCyTbPxL\">\n\t<div class=\"pt-video-thumbnail\">\n\t\t<a href=\"#\" class=\"pt-video-play\" data-video-id=\"dff8a7b7-6fe5-44ea-ac71-8ca39794a90e\" data-video-number=\"\">\n\t\t\t\t\t\t\t\t\t\t\t<img src=\"https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/889979fa-f1e2-4f1f-87b2-94433dc93b70.png\" \n\t\t\t\t\t \t\t\t\t\t srcset=\"https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/d3c59d46-0534-4862-8ac8-41215ad70eef.png 128w, https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/889979fa-f1e2-4f1f-87b2-94433dc93b70.png 640w\"\n\t\t\t\t\t sizes=\"(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw\"\n\t\t\t\t\t \t\t\t\t\t alt=\"Gateway Sunday Service - 4\/12\/2026, 2:45:45 AM\"\n\t\t\t\t\t loading=\"lazy\"\n\t\t\t\t\t decoding=\"async\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"pt-duration\">23:54<\/span>\n\t\t\t\t\t\t<span class=\"pt-play-button\"><\/span>\n\t\t<\/a>\n\t<\/div>\n\t\n\t<div class=\"pt-video-info\">\n\t\t<h3 class=\"pt-video-title\">\n\t\t\t<a href=\"https:\/\/shadow-technologies.com\/?page_id=10749&pt_video_id=dff8a7b7-6fe5-44ea-ac71-8ca39794a90e&pt_channel=gwcbs\">\n\t\t\t\tGateway Sunday Service - 4\/12\/2026, 2:45:45 AM\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\n\t\t<div class=\"pt-video-meta\">\n\t\t\t<span class=\"pt-meta-line\">\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\n\t\t\t<span class=\"pt-meta-line\">\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-duration\" title=\"Length\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-clock\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"><\/path><\/svg>\t\t\t\t\t\t23:54\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-date\" title=\"Published\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-calendar\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z\"><\/path><\/svg>\t\t\t\t\t\t1 months ago\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-category\" title=\"Category\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-folder\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776\"><\/path><\/svg>\t\t\t\t\t\tEducation\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-views\" title=\"Views\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-eye\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z\"><\/path><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"><\/path><\/svg>\t\t\t\t\t\t0 Views\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\n\t\t\t\t\t<\/div>\n\t<\/div>\n<\/article>\n\n\n<article class=\"pt-video-card\" data-video-id=\"291312e7-0464-4d6f-8471-4145395da669\" data-video-embed=\"https:\/\/video3.shadow-technologies.com\/videos\/embed\/65boR2bc8Evj8va2K6Zr1e\">\n\t<div class=\"pt-video-thumbnail\">\n\t\t<a href=\"#\" class=\"pt-video-play\" data-video-id=\"291312e7-0464-4d6f-8471-4145395da669\" data-video-number=\"\">\n\t\t\t\t\t\t\t\t\t\t\t<img src=\"https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/51d6213f-31ad-4ed8-97bf-75aa39028c2d.png\" \n\t\t\t\t\t \t\t\t\t\t srcset=\"https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/50a804ed-3fcc-41f9-8aba-ea2e09a1ac94.png 128w, https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/51d6213f-31ad-4ed8-97bf-75aa39028c2d.png 640w\"\n\t\t\t\t\t sizes=\"(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw\"\n\t\t\t\t\t \t\t\t\t\t alt=\"Gateway Sunday Service - 4\/12\/2026, 1:50:56 AM\"\n\t\t\t\t\t loading=\"lazy\"\n\t\t\t\t\t decoding=\"async\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"pt-duration\">42:19<\/span>\n\t\t\t\t\t\t<span class=\"pt-play-button\"><\/span>\n\t\t<\/a>\n\t<\/div>\n\t\n\t<div class=\"pt-video-info\">\n\t\t<h3 class=\"pt-video-title\">\n\t\t\t<a href=\"https:\/\/shadow-technologies.com\/?page_id=10749&pt_video_id=291312e7-0464-4d6f-8471-4145395da669&pt_channel=gwcbs\">\n\t\t\t\tGateway Sunday Service - 4\/12\/2026, 1:50:56 AM\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\n\t\t<div class=\"pt-video-meta\">\n\t\t\t<span class=\"pt-meta-line\">\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\n\t\t\t<span class=\"pt-meta-line\">\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-duration\" title=\"Length\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-clock\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"><\/path><\/svg>\t\t\t\t\t\t42:19\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-date\" title=\"Published\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-calendar\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z\"><\/path><\/svg>\t\t\t\t\t\t1 months ago\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-category\" title=\"Category\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-folder\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776\"><\/path><\/svg>\t\t\t\t\t\tEducation\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-views\" title=\"Views\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-eye\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z\"><\/path><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"><\/path><\/svg>\t\t\t\t\t\t0 Views\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\n\t\t\t\t\t<\/div>\n\t<\/div>\n<\/article>\n\n\n<article class=\"pt-video-card\" data-video-id=\"4639970a-5fcf-448e-8a48-642233af1942\" data-video-embed=\"https:\/\/video3.shadow-technologies.com\/videos\/embed\/9EXwms9sbMc5MxshxJRXi5\">\n\t<div class=\"pt-video-thumbnail\">\n\t\t<a href=\"#\" class=\"pt-video-play\" data-video-id=\"4639970a-5fcf-448e-8a48-642233af1942\" data-video-number=\"\">\n\t\t\t\t\t\t\t\t\t\t\t<img src=\"https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/ccee4f0f-2b19-4461-92f7-b1632ba8660b.png\" \n\t\t\t\t\t \t\t\t\t\t srcset=\"https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/88ee202d-350a-4dc7-b1b2-191b32de9b56.png 128w, https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/ccee4f0f-2b19-4461-92f7-b1632ba8660b.png 640w\"\n\t\t\t\t\t sizes=\"(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw\"\n\t\t\t\t\t \t\t\t\t\t alt=\"Gateway Sunday Service - 4\/12\/2026, 1:45:40 AM\"\n\t\t\t\t\t loading=\"lazy\"\n\t\t\t\t\t decoding=\"async\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"pt-duration\">4:52<\/span>\n\t\t\t\t\t\t<span class=\"pt-play-button\"><\/span>\n\t\t<\/a>\n\t<\/div>\n\t\n\t<div class=\"pt-video-info\">\n\t\t<h3 class=\"pt-video-title\">\n\t\t\t<a href=\"https:\/\/shadow-technologies.com\/?page_id=10749&pt_video_id=4639970a-5fcf-448e-8a48-642233af1942&pt_channel=gwcbs\">\n\t\t\t\tGateway Sunday Service - 4\/12\/2026, 1:45:40 AM\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\n\t\t<div class=\"pt-video-meta\">\n\t\t\t<span class=\"pt-meta-line\">\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\n\t\t\t<span class=\"pt-meta-line\">\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-duration\" title=\"Length\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-clock\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"><\/path><\/svg>\t\t\t\t\t\t4:52\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-date\" title=\"Published\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-calendar\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z\"><\/path><\/svg>\t\t\t\t\t\t1 months ago\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-category\" title=\"Category\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-folder\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776\"><\/path><\/svg>\t\t\t\t\t\tEducation\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-views\" title=\"Views\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-eye\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z\"><\/path><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"><\/path><\/svg>\t\t\t\t\t\t0 Views\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\n\t\t\t\t\t<\/div>\n\t<\/div>\n<\/article>\n\n\n<article class=\"pt-video-card\" data-video-id=\"f8ce080f-cc3e-4bbb-bf6b-d8fcc7467b3d\" data-video-embed=\"https:\/\/video3.shadow-technologies.com\/videos\/embed\/wHXMnYm1io2pwNqBzmEwSz\">\n\t<div class=\"pt-video-thumbnail\">\n\t\t<a href=\"#\" class=\"pt-video-play\" data-video-id=\"f8ce080f-cc3e-4bbb-bf6b-d8fcc7467b3d\" data-video-number=\"\">\n\t\t\t\t\t\t\t\t\t\t\t<img src=\"https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/a6c97dfa-55da-45ed-94e7-7f3c9ffbe076.png\" \n\t\t\t\t\t \t\t\t\t\t srcset=\"https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/63dc324f-9222-4feb-90bc-0aa044ec74c7.png 128w, https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/a6c97dfa-55da-45ed-94e7-7f3c9ffbe076.png 640w\"\n\t\t\t\t\t sizes=\"(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw\"\n\t\t\t\t\t \t\t\t\t\t alt=\"Gateway Sunday Service - 4\/10\/2026, 3:22:47 PM\"\n\t\t\t\t\t loading=\"lazy\"\n\t\t\t\t\t decoding=\"async\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"pt-duration\">6:03<\/span>\n\t\t\t\t\t\t<span class=\"pt-play-button\"><\/span>\n\t\t<\/a>\n\t<\/div>\n\t\n\t<div class=\"pt-video-info\">\n\t\t<h3 class=\"pt-video-title\">\n\t\t\t<a href=\"https:\/\/shadow-technologies.com\/?page_id=10749&pt_video_id=f8ce080f-cc3e-4bbb-bf6b-d8fcc7467b3d&pt_channel=gwcbs\">\n\t\t\t\tGateway Sunday Service - 4\/10\/2026, 3:22:47 PM\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\n\t\t<div class=\"pt-video-meta\">\n\t\t\t<span class=\"pt-meta-line\">\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\n\t\t\t<span class=\"pt-meta-line\">\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-duration\" title=\"Length\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-clock\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"><\/path><\/svg>\t\t\t\t\t\t6:03\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-date\" title=\"Published\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-calendar\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z\"><\/path><\/svg>\t\t\t\t\t\t1 months ago\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-category\" title=\"Category\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-folder\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776\"><\/path><\/svg>\t\t\t\t\t\tEducation\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-views\" title=\"Views\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-eye\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z\"><\/path><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"><\/path><\/svg>\t\t\t\t\t\t1 Views\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\n\t\t\t\t\t<\/div>\n\t<\/div>\n<\/article>\n\n<\/div> - Latest videos from this instance\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4921fe9 e-flex e-con-boxed e-con e-parent\" data-id=\"4921fe9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t\t\t\t<p class=\"e-paragraph-base\" data-interaction-id=\"f58e534\" data-e-type=\"widget\" data-id=\"f58e534\">\n\t\t\t\t\t\t\t\tType your paragraph Search in Media Library\n\n\n<form method=\"get\" action=\"https:\/\/shadow-technologies.com\/?page_id=10748\" class=\"pt-search-form\">\n\t<div class=\"pt-search-input-wrapper\">\n\t\t<input type=\"search\" \n\t\t\t name=\"pt_search\" \n\t\t\t value=\"\" \n\t\t\t placeholder=\"Search...\" \n\t\t\t class=\"pt-search-input\"\n\t\t\t required>\n\t\t<button type=\"submit\" class=\"pt-search-button\">\n\t\t\t<span class=\"pt-search-icon\">\ud83d\udd0d<\/span>\n\t\t\t<span class=\"pt-search-text\">Search<\/span>\n\t\t<\/button>\n\t<\/div>\n<\/form>\n\n\n\n<p class=\"pt-no-results\">Please enter a search term.<\/p>\n\t\t\t\t\t<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Click here videojs-contrib-hls embed Video.js Example Embed OvenPlayer OVENPLAYER Low Latency Demo Player Player Demo Sub-Second Latency Demo GitHub Docs Playback URL ADD SOURCE {{playerMessage}} {{loadButtonMsg}} Sources OvenPlayer {{playerVersion}} Test streams with OvenPlayer Sub-Second Latency: WebRTC (Signalling Protocol Conforms to the OME Specification) Low-Latency HLS To play the stream of OvenMediaEngine, please refer to the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-10487","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/shadow-technologies.com\/index.php?rest_route=\/wp\/v2\/pages\/10487","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shadow-technologies.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shadow-technologies.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shadow-technologies.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shadow-technologies.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10487"}],"version-history":[{"count":44,"href":"https:\/\/shadow-technologies.com\/index.php?rest_route=\/wp\/v2\/pages\/10487\/revisions"}],"predecessor-version":[{"id":10819,"href":"https:\/\/shadow-technologies.com\/index.php?rest_route=\/wp\/v2\/pages\/10487\/revisions\/10819"}],"wp:attachment":[{"href":"https:\/\/shadow-technologies.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\nvideojs-contrib-hls embed<\/title>\r\n \r\n \r\n\r\n <link href=\"https:\/\/unpkg.com\/video.js\/dist\/video-js.css\" rel=\"stylesheet\">\r\n<\/head>\r\n<body>\r\n <h1>Video.js Example Embed<\/h1>\r\n\r\n <video-js id=\"my_video_1\" class=\"vjs-default-skin\" controls preload=\"auto\" width=\"720\" height=\"480\">\r\n <source src=\"https:\/\/Peertube-Playlists1.b-cdn.net\/hls\/41c0081f-8f15-4373-b26c-04affb20fed6\/877aabad-4088-4b98-9947-896a8794eaee-master.m3u8 \" type=\"application\/x-mpegURL\">\r\n <\/video-js>\r\n \r\n <script src=\"https:\/\/unpkg.com\/video.js\/dist\/video.js\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/@videojs\/http-streaming\/dist\/videojs-http-streaming.js\"><\/script>\r\n \r\n <script>\r\n var player = videojs('my_video_1');\r\n <\/script>\r\n \r\n<\/body>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3f4a4f4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3f4a4f4\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7ba5e14\" data-id=\"7ba5e14\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-667976c elementor-widget elementor-widget-html\" data-id=\"667976c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\r\n <meta http-equiv=\"content-type\" content=\"text\/html; charset=utf-8\" \/>\r\n\r\n <title>OvenPlayer<\/title>\r\n <link rel=\"icon\" href=\".\/assets\/images\/00_OvenPlayer_Favicon.svg\">\r\n\r\n \r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.15.1\/css\/all.min.css\" rel=\"stylesheet\" \/>\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css?family=Roboto:300,400,500,700&display=swap\" rel=\"stylesheet\" \/>\r\n \r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/mdb-ui-kit\/3.10.0\/mdb.min.css\" rel=\"stylesheet\" \/>\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/highlight.js@11.3.1\/styles\/github.css\">\r\n <style>\r\n .navbar-toggler-icon {\r\n background-image: url(\"data:image\/svg+xml;charset=utf-8,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(0, 0, 0, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'\/%3E%3C\/svg%3E\") !important;\r\n }\r\n\r\n .btn {\r\n min-width: 0 !important;\r\n }\r\n\r\n fieldset {\r\n padding-left: 0.5rem;\r\n padding-bottom: 0.5rem;\r\n font-size: 0.85rem;\r\n }\r\n\r\n .list-group-item {\r\n padding: 0.5rem 1rem;\r\n }\r\n\r\n .list-group-item h6 {\r\n margin-top: 0.5rem;\r\n }\r\n\r\n .dummyPlayer {\r\n padding-bottom: 56.25%;\r\n background: #000;\r\n }\r\n\r\n .source-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .source-protocol {}\r\n\r\n .source-url {\r\n margin-top: 0.25rem;\r\n word-break: break-all;\r\n }\r\n\r\n .source-control {}\r\n\r\n .player-area {\r\n position: relative;\r\n }\r\n\r\n .player-wrapper {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n footer {\r\n font-size: 0.85rem;\r\n }\r\n <\/style>\r\n\r\n \r\n <script async src=\"https:\/\/www.googletagmanager.com\/gtag\/js?id=UA-40491361-8\"><\/script>\r\n\r\n <script>\r\n window.dataLayer = window.dataLayer || [];\r\n\r\n function gtag() {\r\n dataLayer.push(arguments);\r\n }\r\n\r\n gtag('js', new Date());\r\n\r\n gtag('config', 'UA-40491361-8');\r\n <\/script>\r\n\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue@3.2.23\/dist\/vue.global.prod.min.js\"><\/script>\r\n\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/underscore@1.13.1\/underscore-umd-min.js\"><\/script>\r\n\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/gh\/highlightjs\/cdn-release@11.3.1\/build\/highlight.min.js\"><\/script>\r\n\r\n \r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/js-beautify\/1.14.0\/beautify.min.js\"><\/script>\r\n\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/clipboard@2.0.8\/dist\/clipboard.min.js\"><\/script>\r\n\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@popperjs\/core@2.10.2\/dist\/umd\/popper.min.js\"><\/script>\r\n\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/hls.js\/dist\/hls.min.js\"><\/script>\r\n\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/ovenplayer@0.10.22\/dist\/ovenplayer.js?20220630\"><\/script>\r\n<\/head>\r\n\r\n<body>\r\n <div id=\"app\">\r\n <nav class=\"navbar navbar-expand-md navbar-light bg-light\">\r\n <div class=\"container-lg\">\r\n <a class=\"navbar-brand\" href=\"\/\">OVENPLAYER Low Latency Demo Player<\/a>\r\n <button class=\"navbar-toggler\" type=\"button\" data-mdb-toggle=\"collapse\" data-mdb-target=\"#navbarNav\"\r\n aria-controls=\"navbarNav\">\r\n <span class=\"navbar-toggler-icon\"><\/span>\r\n <\/button>\r\n <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\r\n\r\n <ul class=\"navbar-nav ms-auto\">\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link active\" href=\".\/demo.html\">Player Demo<\/a>\r\n <\/li>\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link\" href=\".\/ome_demo.html\">Sub-Second Latency Demo<\/a>\r\n <\/li>\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link\" href=\"https:\/\/github.com\/AirenSoft\/OvenPlayer\"\r\n target=\"_blank\">GitHub<\/a>\r\n <\/li>\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link\" href=\"https:\/\/airensoft.gitbook.io\/ovenplayer\/\" target=\"_blank\">Docs<\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n <div class=\"container-lg mt-4\">\r\n \r\n <\/ul>\r\n <div class=\"row g-3 mb-3\">\r\n <div class=\"col-12\">\r\n <div class=\"input-group\">\r\n <div class=\"form-outline flex-grow-1\">\r\n <input type=\"text\" id=\"playbackUrl\" class=\"form-control bg-white\" v-model=\"source\"\r\n @keyup.enter=\"addSource\" \/>\r\n <label class=\"form-label\" for=\"playbackUrl\">Playback URL<\/label>\r\n <\/div>\r\n <button class=\"btn btn-primary px-2 px-md-4\" type=\"button\" @click=\"addSource\">\r\n ADD SOURCE\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"col-12\">\r\n <div class=\"player-area rounded shadow overflow-hidden mb-2\">\r\n <div class=\"dummyPlayer d-flex justify-content-center text-center\">\r\n <span v-if=\"playerMessage\" class=\"text-white position-absolute\"\r\n style=\"left: 1rem; right: 1rem; bottom: 28.125%\">\r\n <i class=\"fas fa-info-circle me-1 text-info\"><\/i>\r\n {{playerMessage}}\r\n <\/span>\r\n <\/div>\r\n <div class=\"player-wrapper\">\r\n <div id=\"player\">\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <button class=\"btn btn-primary w-100\" type=\"button\" @click=\"reloadPlayer\">\r\n <i class=\"fas me-2\" :class=\"loadButtonIcon\"><\/i>\r\n {{loadButtonMsg}}\r\n <\/button>\r\n <\/div>\r\n <div class=\"col-12\">\r\n\r\n <ul class=\"list-group\">\r\n <li class=\"list-group-item bg-light d-flex justify-content-between align-items-center\">\r\n <h5 class=\"mb-0 fs-6\">Sources<\/h5>\r\n <small v-if=\"playerVersion\">OvenPlayer\r\n <span class=\"badge badge-info ms-1 align-middle\">{{playerVersion}}<\/span>\r\n <\/small>\r\n <\/li>\r\n <div class=\"list-group-item\" v-if=\"playerOption.sources.length === 0\">\r\n <p class=\"lead\">Test streams with OvenPlayer<\/p>\r\n\r\n <ul>\r\n <li>\r\n <strong>Sub-Second Latency<\/strong>: WebRTC (Signalling Protocol Conforms to the OME\r\n Specification)\r\n <\/li>\r\n <li>\r\n Low-Latency HLS\r\n <\/li>\r\n <\/ul>\r\n <p class=\"mt-4\">To play the stream of OvenMediaEngine, please refer to the following\r\n documents.<\/p>\r\n <ul class=\"mb-2\">\r\n <li>\r\n WebRTC <a\r\n href=\"https:\/\/airensoft.gitbook.io\/ovenmediaengine\/streaming\/webrtc-publishing#playback\"\r\n class=\"ms-1\" target=\"_blank\">\r\n <i class=\"fas fa-external-link-alt\"><\/i>\r\n <\/a>\r\n <\/li>\r\n <li>\r\n Low-Latency HLS <a\r\n href=\"https:\/\/airensoft.gitbook.io\/ovenmediaengine\/streaming\/low-latency-hls\"\r\n class=\"ms-1\" target=\"_blank\">\r\n <i class=\"fas fa-external-link-alt\"><\/i>\r\n <\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <source-item v-for=\"(source, index) in playerOption.sources\" :source=\"source\" :index=\"index\"\r\n @remove-source=\"removeSource(index)\">\r\n <\/source-item>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"row row-cols-1 g-3\">\r\n <div class=\"col\">\r\n <ul class=\"list-group\">\r\n <li class=\"list-group-item bg-light\">\r\n <h5 class=\"mb-0 fs-6\">Player Options<\/h5>\r\n <\/li>\r\n <li class=\"list-group-item\">\r\n\r\n <div class=\"row\">\r\n <div class=\"col-lg-4 border-start border-2 mb-3 mb-lg-0\">\r\n \r\n <h6>General Options<\/h6>\r\n <fieldset>\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"autoStart\"\r\n v-model=\"playerOption.autoStart\" @change=\"changeOptions\" \/>\r\n <label class=\"form-check-label\" for=\"autoStart\">\r\n autoStart\r\n <\/label>\r\n <a href=\"https:\/\/airensoft.gitbook.io\/ovenplayer\/initialization#autostart\"\r\n class=\"ms-1\" target=\"_blank\">\r\n <i class=\"fas fa-external-link-alt\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"autoFallback\"\r\n v-model=\"playerOption.autoFallback\" @change=\"changeOptions\" \/>\r\n <label class=\"form-check-label\" for=\"autoFallback\">\r\n autoFallback\r\n <\/label>\r\n <a href=\"https:\/\/airensoft.gitbook.io\/ovenplayer\/initialization#autofallback\"\r\n class=\"ms-1\" target=\"_blank\">\r\n <i class=\"fas fa-external-link-alt\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"mute\"\r\n v-model=\"playerOption.mute\" @change=\"changeOptions\" \/>\r\n <label class=\"form-check-label\" for=\"mute\">\r\n mute\r\n <\/label>\r\n <a href=\"https:\/\/airensoft.gitbook.io\/ovenplayer\/initialization#mute\"\r\n class=\"ms-1\" target=\"_blank\">\r\n <i class=\"fas fa-external-link-alt\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/fieldset>\r\n <\/div>\r\n <div class=\"col-lg-4 border-start border-2 mb-3 mb-lg-0\">\r\n \r\n <h6>WebRTC Options<\/h6>\r\n <fieldset>\r\n <div class=\"form-check mb-2\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\"\r\n id=\"reloadOnConnectionTimeoutCheck\"\r\n v-model=\"reloadOnConnectionTimeoutCheck\" \/>\r\n <label class=\"form-check-label\" for=\"reloadOnConnectionTimeoutCheck\">\r\n Reload On Connection Timeout\r\n <\/label>\r\n <a href=\"https:\/\/airensoft.gitbook.io\/ovenplayer\/initialization#webrtcconfig.timeoutmaxretry-and-webrtcconfig.connectiontimeout\"\r\n class=\"ms-1\" target=\"_blank\">\r\n <i class=\"fas fa-external-link-alt\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <div class=\"form-outline ms-4 mb-3\">\r\n <input :disabled=\"!reloadOnConnectionTimeoutCheck\" type=\"number\"\r\n id=\"webrtcLoadingTimeout\" class=\"form-control active\"\r\n v-model=\"webrtcLoadingTimeout\">\r\n <label class=\"form-label\" for=\"webrtcLoadingTimeout\">Timeout\r\n (Millisecond)<\/label>\r\n <\/div>\r\n <div class=\"form-outline ms-4\">\r\n <input :disabled=\"!reloadOnConnectionTimeoutCheck\" type=\"number\"\r\n id=\"webrtcLoadingRetryCount\" class=\"form-control active\"\r\n v-model=\"webrtcLoadingRetryCount\">\r\n <label class=\"form-label\" for=\"webrtcLoadingRetryCount\">Retry count<\/label>\r\n <\/div>\r\n <\/fieldset>\r\n <fieldset>\r\n <div class=\"form-check mb-2\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\"\r\n id=\"playoutDelayHintCheck\" v-model=\"playoutDelayHintCheck\" \/>\r\n <label class=\"form-check-label\" for=\"playoutDelayHintCheck\">\r\n Enable Playout Delay Hint\r\n <\/label>\r\n <a href=\"https:\/\/airensoft.gitbook.io\/ovenplayer\/initialization#webrtcconfig.playoutdelayhint\"\r\n class=\"ms-1\" target=\"_blank\">\r\n <i class=\"fas fa-external-link-alt\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <div class=\"form-outline ms-4\">\r\n <input :disabled=\"!playoutDelayHintCheck\" type=\"number\"\r\n id=\"playoutDelayHintInput\" class=\"form-control active\"\r\n v-model=\"playoutDelayHintInput\">\r\n <label class=\"form-label\" for=\"playoutDelayHintInput\">Delay (Second)<\/label>\r\n <\/div>\r\n <\/fieldset>\r\n <\/div>\r\n <div class=\"col-lg-4 border-start border-2 mb-3 mb-lg-0\">\r\n \r\n <h6>HLS Options<\/h6>\r\n <div class=\"form-check mb-2\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\"\r\n id=\"hlsManageLatencyCheck\" v-model=\"hlsManageLatencyCheck\" \/>\r\n <label class=\"form-check-label\" for=\"hlsManageLatencyCheck\">\r\n Manage Latency\r\n <\/label>\r\n <\/div>\r\n <div class=\"form-outline ms-4 mb-3\">\r\n <input :disabled=\"!hlsManageLatencyCheck\" type=\"number\" id=\"hlsTargetLatency\"\r\n class=\"form-control active\" v-model=\"hlsTargetLatency\">\r\n <label class=\"form-label\" for=\"hlsTargetLatency\">Target latency\r\n (Second)<\/label>\r\n <\/div>\r\n <div class=\"form-outline ms-4 mb-3\">\r\n <input :disabled=\"!hlsManageLatencyCheck\" type=\"number\" id=\"hlsMaxLatency\"\r\n class=\"form-control active\" v-model=\"hlsMaxLatency\">\r\n <label class=\"form-label\" for=\"hlsMaxLatency\">Max latency (Second)<\/label>\r\n <\/div>\r\n <div class=\"form-outline ms-4\">\r\n <input :disabled=\"!hlsManageLatencyCheck\" type=\"number\"\r\n id=\"hlsLiveSyncCatchupRate\" class=\"form-control active\" min=\"1\" max=\"2\"\r\n step=\"0.1\" v-model=\"hlsLiveSyncCatchupRate\">\r\n <label class=\"form-label\" for=\"hlsLiveSyncCatchupRate\">Sync catch up rate\r\n (min:1, max:2)<\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/li>\r\n <li class=\"list-group-item bg-light\">\r\n <h5 class=\"mb-0 fs-6\">Demo Options<\/h5>\r\n <\/li>\r\n <li class=\"list-group-item\">\r\n <div class=\"row\">\r\n <div class=\"col border-start border-2\">\r\n <h6>Reload the player when error occurred<\/h6>\r\n <fieldset>\r\n <div class=\"form-check mb-2\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"autoReload\"\r\n v-model=\"demoOption.autoReload\" @change=\"changeOptions\" \/>\r\n <label class=\"form-check-label\" for=\"autoReload\">\r\n Enable auto reload\r\n <\/label>\r\n <\/div>\r\n <div class=\"form-outline ms-4\">\r\n <input type=\"text\" id=\"playerReloadInterval\" class=\"form-control\"\r\n :class=\"demoOption.autoReloadInterval ? 'active': ''\"\r\n v-model=\"demoOption.autoReloadInterval\" @change=\"changeOptions\">\r\n <label class=\"form-label\" for=\"playerReloadInterval\">\r\n Reload interval (millisecond)\r\n <\/label>\r\n <\/div>\r\n <\/fieldset>\r\n <\/div>\r\n <\/div>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <div v-show=\"createScriptHTML\" class=\"col\">\r\n <ul class=\"list-group\">\r\n <li class=\"list-group-item bg-light\">\r\n <h5 class=\"mb-0 fs-6\">Usage<\/h5>\r\n <\/li>\r\n <li class=\"list-group-item position-relative\">\r\n <div v-html=\"createScriptHTML\" class=\"my-2 small font-monospace w-100 overflow-auto\"\r\n style=\"white-space: pre;\">\r\n <\/div>\r\n <button ref=\"copyCodeButton\" class=\"btn btn-light text-dark position-absolute px-2 px-md-4\"\r\n style=\"top: 0.5rem; right: 1rem\" :data-clipboard-text=\"createScript\">\r\n <i class=\"far fa-copy me-1\"><\/i>COPY\r\n <\/button>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"col\">\r\n <ul class=\"list-group\">\r\n <li class=\"list-group-item bg-light\">\r\n <h5 class=\"mb-0 fs-6\">Export permanent link<\/h5>\r\n <\/li>\r\n <li class=\"list-group-item\">\r\n\r\n <div class=\"input-group\">\r\n <div class=\"form-outline flex-grow-1\">\r\n <input type=\"text\" id=\"permanentLinkInput\" readonly class=\"form-control bg-white\"\r\n v-model=\"permanentLink\" \/>\r\n <\/div>\r\n <button id=\"exportButton\" ref=\"exportButton\" data-clipboard-target=\"#permanentLinkInput\"\r\n class=\"btn btn-primary px-2 px-md-4\" type=\"button\">\r\n <i class=\"far fa-copy me-1\"><\/i>COPY\r\n <\/button>\r\n <\/div>\r\n\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n <script id=\"source-item\" type=\"text\/template\">\r\n <li class=\"list-group-item\">\r\n <div class=\"source-item\">\r\n <div class=\"source-header\">\r\n <div class=\"source-protocol\">\r\n <span class=\"badge bg-warning text-dark\">{{source.type}}<\/span>\r\n <\/div>\r\n <div class=\"source-control\">\r\n <button\r\n ref=\"copyButton\"\r\n class=\"btn btn-light btn-floating btn-sm text-dark\"\r\n :data-clipboard-text=\"source.file\">\r\n <i class=\"far fa-copy\"><\/i>\r\n <\/button>\r\n <button class=\"btn btn-light btn-floating btn-sm text-dark ms-2\"\r\n @click=\"$emit('removeSource')\">\r\n <i class=\"fas fa-trash-alt\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"source-url\">\r\n {{source.file}}\r\n <\/div>\r\n <\/div>\r\n <\/li>\r\n<\/script>\r\n\r\n \r\n <script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/mdb-ui-kit\/3.10.0\/mdb.min.js\"><\/script>\r\n\r\n <script>\r\n\r\n const hash = location.hash;\r\n\r\n let urlOption = null;\r\n\r\n if (hash) {\r\n urlOption = JSON.parse(decodeURIComponent(hash.replace('#', '')));\r\n }\r\n\r\n let playerOption = {\r\n autoStart: true,\r\n autoFallback: true,\r\n mute: false,\r\n sources: []\r\n };\r\n\r\n if (urlOption && urlOption.playerOption) {\r\n\r\n playerOption = _.extend(playerOption, urlOption.playerOption);\r\n }\r\n\r\n let demoOption = {\r\n autoReload: true,\r\n autoReloadInterval: 2000\r\n };\r\n\r\n if (urlOption && urlOption.demoOption) {\r\n\r\n demoOption = _.extend(demoOption, urlOption.demoOption);\r\n }\r\n\r\n function makeCopyButton(element) {\r\n\r\n const tooltip = new mdb.Tooltip(element, {\r\n placement: 'bottom',\r\n title: 'copied!',\r\n trigger: 'manual'\r\n });\r\n\r\n tooltip.timer = null;\r\n\r\n const clipboard = new ClipboardJS(element);\r\n\r\n clipboard.on('success', function () {\r\n\r\n if (tooltip.timer) {\r\n clearTimeout(tooltip.timer);\r\n }\r\n\r\n tooltip.show();\r\n\r\n tooltip.timer = setTimeout(function () {\r\n tooltip.hide();\r\n }, 1000);\r\n });\r\n }\r\n\r\n const app = {\r\n data: function () {\r\n return {\r\n reloadTimer: null,\r\n player: null,\r\n source: null,\r\n loadButtonMsg: 'LOAD PLAYER',\r\n loadButtonColor: 'btn-primary',\r\n loadButtonIcon: 'fa-play',\r\n playerMessage: null,\r\n playerOption: playerOption,\r\n demoOption: demoOption,\r\n permanentLink: location.href,\r\n createScript: null,\r\n createScriptHTML: null,\r\n playerVersion: null\r\n }\r\n },\r\n methods: {\r\n addSource: function () {\r\n\r\n if (!this.source) {\r\n return;\r\n }\r\n\r\n const url = this.source.trim();\r\n\r\n let protocol = null;\r\n\r\n if (url.indexOf('ws:') === 0 || url.indexOf('wss:') === 0) {\r\n\r\n protocol = \"webrtc\";\r\n } else if (url.indexOf('http:') === 0 || url.indexOf('https:') === 0) {\r\n\r\n if (url.indexOf('.m3u8') > 0) {\r\n\r\n protocol = \"hls\";\r\n } else if (url.indexOf('.mpd') > 0) {\r\n\r\n protocol = \"dash\";\r\n } else if (url.indexOf('.mp4') > 0) {\r\n\r\n protocol = \"http\";\r\n }\r\n }\r\n\r\n if (!protocol) {\r\n\r\n this.unLoadPlayer();\r\n this.playerMessage = \"Invalid playback url\";\r\n\r\n return;\r\n }\r\n\r\n const source = {\r\n type: protocol,\r\n file: url\r\n };\r\n\r\n this.playerOption.sources.push(source);\r\n this.source = null;\r\n\r\n this.unLoadPlayer(true);\r\n this.makePermanentLink();\r\n },\r\n removeSource: function (index) {\r\n\r\n this.playerOption.sources.splice(index, 1);\r\n\r\n this.unLoadPlayer(true);\r\n this.makePermanentLink();\r\n },\r\n loadPlayer: function () {\r\n\r\n if (this.player) {\r\n this.player.remove();\r\n this.player = null;\r\n }\r\n\r\n if (this.playerOption.sources.length === 0) {\r\n this.playerMessage = 'Please add the playback sources.';\r\n return;\r\n }\r\n\r\n const playerOption = JSON.parse(JSON.stringify(this.playerOption));\r\n\r\n this.player = OvenPlayer.create('player', playerOption);\r\n\r\n this.playerVersion = this.player.getVersion();\r\n\r\n this.player.on('ready', function () {\r\n vm.loadButtonMsg = 'UNLOAD PLAYER';\r\n vm.loadButtonColor = 'btn-success';\r\n vm.loadButtonIcon = 'fa-stop';\r\n vm.playerMessage = null;\r\n });\r\n\r\n this.player.on('hlsPrepared', function (hls) {\r\n hls.on(Hls.Events.FRAG_PARSING_METADATA, function (data, meta) {\r\n console.log(data, meta);\r\n if (meta && meta.samples) {\r\n meta.samples.forEach(function (sample) {\r\n console.log(new TextDecoder(\"utf-8\").decode(sample.data))\r\n })\r\n }\r\n\r\n });\r\n });\r\n\r\n if (this.demoOption.autoReload && this.demoOption.autoReloadInterval > 0) {\r\n\r\n this.player.once('error', function (e) {\r\n\r\n console.log(e);\r\n\r\n if (this.reloadTimer) {\r\n clearInterval(this.reloadTimer);\r\n this.reloadTimer = null;\r\n }\r\n\r\n vm.reloadTimer = setTimeout(function () {\r\n\r\n vm.unLoadPlayer();\r\n vm.loadPlayer();\r\n }, vm.demoOption.autoReloadInterval);\r\n });\r\n }\r\n },\r\n unLoadPlayer: function (optionChanged) {\r\n\r\n if (this.reloadTimer) {\r\n clearInterval(this.reloadTimer);\r\n this.reloadTimer = null;\r\n }\r\n\r\n if (this.player) {\r\n\r\n this.player.remove();\r\n this.player = null;\r\n this.loadButtonMsg = 'LOAD PLAYER';\r\n this.loadButtonColor = 'btn-primary';\r\n this.loadButtonIcon = 'fa-play';\r\n }\r\n\r\n if (optionChanged) {\r\n this.playerMessage = 'The options have changed. Please reload the player.';\r\n }\r\n },\r\n reloadPlayer: function () {\r\n\r\n if (this.player) {\r\n\r\n this.unLoadPlayer();\r\n } else {\r\n\r\n this.loadPlayer();\r\n }\r\n },\r\n makePermanentLink: function () {\r\n\r\n const link = {};\r\n link.playerOption = this.playerOption;\r\n link.demoOption = this.demoOption;\r\n\r\n location.hash = encodeURIComponent(JSON.stringify(link));\r\n this.permanentLink = location.href;\r\n\r\n let script = 'const player = OvenPlayer.create(\"player_el_id\", '\r\n + JSON.stringify(this.playerOption) + ');';\r\n this.createScript = js_beautify(script);\r\n this.createScriptHTML = hljs.highlight(this.createScript, {\r\n language: 'javascript'\r\n }).value;\r\n },\r\n changeOptions: function () {\r\n\r\n this.unLoadPlayer(true);\r\n this.makePermanentLink();\r\n }\r\n },\r\n computed: {\r\n playoutDelayHintCheck: {\r\n get: function () {\r\n\r\n if (this.playerOption.webrtcConfig &&\r\n this.playerOption.webrtcConfig.playoutDelayHint > -1) {\r\n\r\n return true;\r\n } else {\r\n return false;\r\n }\r\n },\r\n set: function (value) {\r\n\r\n if (value) {\r\n if (!this.playerOption.webrtcConfig) {\r\n this.playerOption.webrtcConfig = {};\r\n }\r\n this.playerOption.webrtcConfig.playoutDelayHint = 3;\r\n } else {\r\n delete this.playerOption.webrtcConfig.playoutDelayHint;\r\n\r\n if (_.isEmpty(this.playerOption.webrtcConfig)) {\r\n\r\n delete this.playerOption.webrtcConfig;\r\n }\r\n }\r\n\r\n this.unLoadPlayer(true);\r\n this.makePermanentLink();\r\n }\r\n },\r\n playoutDelayHintInput: {\r\n get: function () {\r\n\r\n if (this.playoutDelayHintCheck) {\r\n\r\n return this.playerOption.webrtcConfig.playoutDelayHint;\r\n }\r\n },\r\n set: function (value) {\r\n if (value > 0) {\r\n\r\n this.playerOption.webrtcConfig.playoutDelayHint = value;\r\n this.unLoadPlayer(true);\r\n this.makePermanentLink();\r\n }\r\n }\r\n },\r\n reloadOnConnectionTimeoutCheck: {\r\n get: function () {\r\n\r\n if (this.playerOption.webrtcConfig &&\r\n (_.isNumber(this.playerOption.webrtcConfig.connectionTimeout)\r\n || _.isNumber(this.playerOption.webrtcConfig.timeoutMaxRetry))) {\r\n\r\n return true;\r\n } else {\r\n return false;\r\n }\r\n },\r\n set: function (value) {\r\n\r\n if (value) {\r\n if (!this.playerOption.webrtcConfig) {\r\n this.playerOption.webrtcConfig = {};\r\n }\r\n this.playerOption.webrtcConfig.timeoutMaxRetry = 4;\r\n this.playerOption.webrtcConfig.connectionTimeout = 10000;\r\n } else {\r\n\r\n delete this.playerOption.webrtcConfig.timeoutMaxRetry;\r\n delete this.playerOption.webrtcConfig.connectionTimeout;\r\n\r\n if (_.isEmpty(this.playerOption.webrtcConfig)) {\r\n\r\n delete this.playerOption.webrtcConfig;\r\n }\r\n }\r\n\r\n this.unLoadPlayer(true);\r\n this.makePermanentLink();\r\n }\r\n },\r\n webrtcLoadingRetryCount: {\r\n get: function () {\r\n\r\n if (this.playerOption.webrtcConfig &&\r\n _.isNumber(this.playerOption.webrtcConfig.timeoutMaxRetry)) {\r\n\r\n return this.playerOption.webrtcConfig.timeoutMaxRetry;\r\n }\r\n },\r\n set: function (value) {\r\n if (!this.playerOption.webrtcConfig) {\r\n this.playerOption.webrtcConfig = {};\r\n }\r\n\r\n this.playerOption.webrtcConfig.timeoutMaxRetry = value;\r\n this.unLoadPlayer(true);\r\n this.makePermanentLink();\r\n }\r\n },\r\n webrtcLoadingTimeout: {\r\n get: function () {\r\n\r\n if (this.playerOption.webrtcConfig &&\r\n _.isNumber(this.playerOption.webrtcConfig.connectionTimeout)) {\r\n\r\n return this.playerOption.webrtcConfig.connectionTimeout;\r\n }\r\n },\r\n set: function (value) {\r\n if (!this.playerOption.webrtcConfig) {\r\n this.playerOption.webrtcConfig = {};\r\n }\r\n\r\n this.playerOption.webrtcConfig.connectionTimeout = value;\r\n this.unLoadPlayer(true);\r\n this.makePermanentLink();\r\n }\r\n },\r\n llDashCheck: {\r\n get: function () {\r\n\r\n let value = false;\r\n\r\n if (this.playerOption &&\r\n this.playerOption.sources) {\r\n\r\n _.each(this.playerOption.sources, function (source) {\r\n\r\n if (source.type === 'dash' && source.lowLatency === true) {\r\n\r\n value = true;\r\n return;\r\n }\r\n });\r\n }\r\n\r\n return value;\r\n },\r\n set: function (value) {\r\n\r\n if (this.playerOption &&\r\n this.playerOption.sources) {\r\n\r\n _.each(this.playerOption.sources, function (source) {\r\n\r\n if (source.type === 'dash') {\r\n\r\n if (value) {\r\n source.lowLatency = true;\r\n } else {\r\n delete source.lowLatency;\r\n }\r\n }\r\n });\r\n\r\n if (!value) {\r\n\r\n if (this.playerOption.lowLatencyMpdLiveDelay) {\r\n\r\n delete this.playerOption.lowLatencyMpdLiveDelay;\r\n }\r\n }\r\n\r\n this.unLoadPlayer(true);\r\n this.makePermanentLink();\r\n }\r\n }\r\n },\r\n llDashLiveDelay: {\r\n get: function () {\r\n\r\n if (this.playerOption.lowLatencyMpdLiveDelay &&\r\n _.isNumber(this.playerOption.lowLatencyMpdLiveDelay)) {\r\n\r\n return this.playerOption.lowLatencyMpdLiveDelay;\r\n }\r\n },\r\n set: function (value) {\r\n\r\n if (value) {\r\n\r\n this.playerOption.lowLatencyMpdLiveDelay = value;\r\n\r\n } else {\r\n\r\n delete this.playerOption.lowLatencyMpdLiveDelay;\r\n }\r\n\r\n this.unLoadPlayer(true);\r\n this.makePermanentLink();\r\n }\r\n },\r\n hlsManageLatencyCheck: {\r\n get: function () {\r\n\r\n if (this.playerOption.hlsConfig &&\r\n (_.isNumber(this.playerOption.hlsConfig.liveSyncDuration)\r\n || _.isNumber(this.playerOption.hlsConfig.liveMaxLatencyDuration)\r\n || _.isNumber(this.playerOption.hlsConfig.maxLiveSyncPlaybackRate))) {\r\n\r\n return true;\r\n } else {\r\n return false;\r\n }\r\n },\r\n set: function (value) {\r\n\r\n if (value) {\r\n if (!this.playerOption.hlsConfig) {\r\n this.playerOption.hlsConfig = {};\r\n }\r\n this.playerOption.hlsConfig.liveSyncDuration = 1.5;\r\n this.playerOption.hlsConfig.liveMaxLatencyDuration = 3;\r\n this.playerOption.hlsConfig.maxLiveSyncPlaybackRate = 1.5;\r\n } else {\r\n\r\n delete this.playerOption.hlsConfig.liveSyncDuration;\r\n delete this.playerOption.hlsConfig.liveMaxLatencyDuration;\r\n delete this.playerOption.hlsConfig.maxLiveSyncPlaybackRate;\r\n\r\n if (_.isEmpty(this.playerOption.hlsConfig)) {\r\n\r\n delete this.playerOption.hlsConfig;\r\n }\r\n }\r\n\r\n this.unLoadPlayer(true);\r\n this.makePermanentLink();\r\n }\r\n },\r\n hlsTargetLatency: {\r\n get: function () {\r\n\r\n if (this.playerOption.hlsConfig &&\r\n _.isNumber(this.playerOption.hlsConfig.liveSyncDuration)) {\r\n\r\n return this.playerOption.hlsConfig.liveSyncDuration;\r\n }\r\n },\r\n set: function (value) {\r\n if (!this.playerOption.hlsConfig) {\r\n this.playerOption.hlsConfig = {};\r\n }\r\n\r\n this.playerOption.hlsConfig.liveSyncDuration = value;\r\n this.unLoadPlayer(true);\r\n this.makePermanentLink();\r\n }\r\n },\r\n hlsMaxLatency: {\r\n get: function () {\r\n\r\n if (this.playerOption.hlsConfig &&\r\n _.isNumber(this.playerOption.hlsConfig.liveMaxLatencyDuration)) {\r\n\r\n return this.playerOption.hlsConfig.liveMaxLatencyDuration;\r\n }\r\n },\r\n set: function (value) {\r\n if (!this.playerOption.hlsConfig) {\r\n this.playerOption.hlsConfig = {};\r\n }\r\n\r\n this.playerOption.hlsConfig.liveMaxLatencyDuration = value;\r\n this.unLoadPlayer(true);\r\n this.makePermanentLink();\r\n }\r\n },\r\n hlsLiveSyncCatchupRate: {\r\n get: function () {\r\n\r\n if (this.playerOption.hlsConfig &&\r\n _.isNumber(this.playerOption.hlsConfig.maxLiveSyncPlaybackRate)) {\r\n\r\n return this.playerOption.hlsConfig.maxLiveSyncPlaybackRate;\r\n }\r\n },\r\n set: function (value) {\r\n if (!this.playerOption.hlsConfig) {\r\n this.playerOption.hlsConfig = {};\r\n }\r\n\r\n this.playerOption.hlsConfig.maxLiveSyncPlaybackRate = value;\r\n this.unLoadPlayer(true);\r\n this.makePermanentLink();\r\n }\r\n }\r\n\r\n },\r\n mounted: function () {\r\n\r\n this.loadPlayer();\r\n\r\n if (urlOption) {\r\n this.makePermanentLink();\r\n }\r\n\r\n makeCopyButton(this.$refs.copyCodeButton);\r\n makeCopyButton(this.$refs.exportButton);\r\n }\r\n };\r\n\r\n const demo = Vue.createApp(app);\r\n\r\n demo.component('source-item', {\r\n props: ['source', 'index'],\r\n emits: ['removeSource'],\r\n template: document.getElementById('source-item').innerText,\r\n mounted: function () {\r\n makeCopyButton(this.$refs.copyButton);\r\n }\r\n });\r\n\r\n const vm = demo.mount('#app');\r\n\r\n\r\n <\/script>\r\n\r\n<\/body>\r\n\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ba3ee60 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ba3ee60\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ab0e7f2\" data-id=\"ab0e7f2\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2e7e10f elementor-widget elementor-widget-html\" data-id=\"2e7e10f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\r\n <meta http-equiv=\"content-type\" content=\"text\/html; charset=utf-8\"\/>\r\n\r\n <title>OvenPlayer<\/title>\r\n <link rel=\"icon\" href=\".\/assets\/images\/00_OvenPlayer_Favicon.svg\">\r\n\r\n \r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.15.1\/css\/all.min.css\" rel=\"stylesheet\"\/>\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css?family=Roboto:300,400,500,700&display=swap\" rel=\"stylesheet\"\/>\r\n \r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/mdb-ui-kit\/3.10.0\/mdb.min.css\" rel=\"stylesheet\"\/>\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/highlight.js@11.3.1\/styles\/github.css\">\r\n\r\n <style>\r\n\r\n .navbar-toggler-icon {\r\n background-image: url(\"data:image\/svg+xml;charset=utf-8,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(0, 0, 0, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'\/%3E%3C\/svg%3E\") !important;\r\n }\r\n\r\n .playerWrapper {\r\n position: relative;\r\n width: 100%;\r\n height: 0;\r\n padding-bottom: 56.25%;\r\n background-color: #000;\r\n }\r\n\r\n .previewPlayer {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n fieldset {\r\n padding-left: 0.5rem;\r\n padding-bottom: 0.5rem;\r\n font-size: 0.85rem;\r\n }\r\n\r\n .list-group-item {\r\n padding: 0.5rem 1rem;\r\n }\r\n\r\n .list-group-item h6 {\r\n margin-top: 0.5rem;\r\n }\r\n\r\n footer {\r\n font-size: 0.85rem;\r\n }\r\n\r\n <\/style>\r\n\r\n <script>\r\n if (window.location.href.indexOf('localhost') < 0 && window.location.protocol !== 'https:') {\r\n location.href = location.href.replace('http:\/\/', 'https:\/\/');\r\n }\r\n <\/script>\r\n\r\n \r\n <script async src=\"https:\/\/www.googletagmanager.com\/gtag\/js?id=UA-40491361-8\"><\/script>\r\n\r\n <script>\r\n window.dataLayer = window.dataLayer || [];\r\n\r\n function gtag() {\r\n dataLayer.push(arguments);\r\n }\r\n\r\n gtag('js', new Date());\r\n\r\n gtag('config', 'UA-40491361-8');\r\n <\/script>\r\n\r\n<\/head>\r\n<body>\r\n<nav class=\"navbar navbar-expand-md navbar-light bg-light\">\r\n <div class=\"container-lg\">\r\n <a class=\"navbar-brand\" href=\"\/\">OVENPLAYER WEBRTC input<\/a>\r\n <button class=\"navbar-toggler\" type=\"button\" data-mdb-toggle=\"collapse\" data-mdb-target=\"#navbarNav\" aria-controls=\"navbarNav\">\r\n <span class=\"navbar-toggler-icon\"><\/span>\r\n <\/button>\r\n <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\r\n\r\n <ul class=\"navbar-nav ms-auto\">\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link active\" href=\".\/demo.html\">Player Demo<\/a>\r\n <\/li>\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link\" href=\".\/ome_demo.html\">Sub-Second Latency Demo<\/a>\r\n <\/li>\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link\" href=\"https:\/\/github.com\/AirenSoft\/OvenPlayer\" target=\"_blank\">GitHub<\/a>\r\n <\/li>\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link\" href=\"https:\/\/airensoft.gitbook.io\/ovenplayer\/\" target=\"_blank\">Docs<\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n<\/nav>\r\n\r\n\r\n <div class=\"row g-3 mb-3\">\r\n <div class=\"col-12\">\r\n <div class=\"input-group\">\r\n <div class=\"form-outline flex-grow-1\">\r\n <input type=\"text\" id=\"webRtcUrlInput\" class=\"form-control bg-white\"\/>\r\n <label class=\"form-label\" for=\"webRtcUrlInput\">WebRTC input URL<\/label>\r\n <\/div>\r\n <button id=\"streamingButton\" class=\"btn btn-primary px-2 px-md-4\" type=\"button\">\r\n Start\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"col-12\">\r\n Don't have OvenMediaEngine installed? Try our OvenMediaEngine for demo.\r\n <a id=\"useDemoOME\" href=\"#\">Try it out<\/a>\r\n <\/div>\r\n\r\n <div class=\"col-lg-6\">\r\n <div class=\"playerWrapper rounded overflow-hidden\">\r\n <video controls id=\"previewPlayer\" class=\"previewPlayer\"><\/video>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"col-lg-6\">\r\n <ul class=\"list-group\">\r\n <li class=\"list-group-item bg-light hstack\">\r\n <h5 class=\"mb-0 fs-6\">Stream information<\/h5>\r\n <small class=\"ms-auto\">\r\n OvenLiveKit\r\n <span class=\"badge badge-info align-middle ms-1\">1.0.2<\/span>\r\n <\/small>\r\n <\/li>\r\n <li class=\"list-group-item\">\r\n <div class=\"row\">\r\n <div class=\"col\">\r\n <h6>Video<\/h6>\r\n <fieldset>\r\n <div class=\"mb-2\">\r\n <span>Resolution\r\n <span class=\"badge badge-pill badge-info mr-1\" data-mdb-toggle=\"tooltip\" title=\"This may be different from the resolution you set. Because the browser will get the ideal resolution from the input device.\">i<\/span>:\r\n <\/span>\r\n <span id=\"videoResolutionSpan\" class=\"mr-2 align-middle\">-<\/span>\r\n <\/div>\r\n <div class=\"mb-2\">\r\n <span>Framerate: <\/span>\r\n <span id=\"videoFrameRateSpan\" class=\"mr-2\">-<\/span>\r\n <\/div>\r\n <div class=\"mb-2\">\r\n <span>Bitrate: <\/span>\r\n <span id=\"bitrateSpan\" class=\"mr-2\">-<\/span>\r\n <\/div>\r\n\r\n <\/fieldset>\r\n\r\n <h6>Connection<\/h6>\r\n <fieldset>\r\n <div class=\"mb-2\">\r\n <span>ICE state: <\/span>\r\n <span id=\"iceStateSpan\" class=\"mr-2\">-<\/span>\r\n <\/div>\r\n <\/fieldset>\r\n\r\n <div class=\"col-12\">\r\n <small id=\"errorText\" class=\"text-danger\"><\/small>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/li>\r\n <\/ul>\r\n\r\n <div id=\"testPlaybackButtonArea\" class=\"mt-2\" style=\"display: none;\">\r\n <button id=\"playStreamButton\" class=\"btn btn-info w-100\">Play stream with test player<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"col-12\">\r\n <ul class=\"list-group\">\r\n <li class=\"list-group-item bg-light\">\r\n <h5 class=\"mb-0 fs-6\">Input stream settings<\/h5>\r\n <\/li>\r\n <li class=\"list-group-item\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-6 border-start border-2 mb-3 mb-lg-0\">\r\n <h6>Video settings<\/h6>\r\n <fieldset>\r\n <label for=\"videoSourceSelect\">Device<\/label>\r\n <select name=\"\" id=\"videoSourceSelect\" class=\"form-control constraintSelect mb-2\">\r\n <\/select>\r\n\r\n <label for=\"videoResolutionSelect\">Resolution<\/label>\r\n <select id=\"videoResolutionSelect\" class=\"form-control constraintSelect mb-2\">\r\n <option selected value=\"\">Not Set<\/option>\r\n <option value=\"fhd\">Full HD (1920x1080)<\/option>\r\n <option value=\"hd\">HD (1280x720)<\/option>\r\n <option value=\"vga\">VGA (640x480)<\/option>\r\n <\/select>\r\n\r\n <label for=\"videoBitrateInput\">Bitrate limit (kbps)<\/label>\r\n <input id=\"videoBitrateInput\" type=\"number\" class=\"form-control constraintSelect mb-2\" placeholder=\"Unlimited\">\r\n\r\n <label for=\"videoFrameInput\">Frame rate<\/label>\r\n <input id=\"videoFrameInput\" type=\"number\" class=\"form-control constraintSelect\" placeholder=\"Not Set\">\r\n <\/fieldset>\r\n <\/div>\r\n <div class=\"col-lg-6 border-start border-2 mb-3 mb-lg-0\">\r\n <h6>Audio settings<\/h6>\r\n <fieldset>\r\n <div id=\"audioSourceSelectArea\">\r\n <label for=\"audioSourceSelect\">Device<\/label>\r\n <select class=\"form-control constraintSelect\" id=\"audioSourceSelect\">\r\n <option selected>Choose...<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/fieldset>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n<\/div>\r\n<div class=\"bg-light border-top mt-5\">\r\n <div class=\"container-lg mt-3\">\r\n \r\n\r\n <\/div>\r\n<\/div>\r\n\r\n<script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/mdb-ui-kit\/3.10.0\/mdb.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/underscore@1.12.0\/underscore-min.js\"><\/script>\r\n<script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.slim.min.js\" integrity=\"sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=\" crossorigin=\"anonymous\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/ovenlivekit\/dist\/OvenLiveKit.min.js\"><\/script>\r\n\r\n<script>\r\n\r\n let allDevices = null;\r\n\r\n let input = null;\r\n\r\n const userResolutions = {\r\n vga: {\r\n \/\/ width: {exact: 640}, height: {exact: 480}\r\n \/\/ width: { min: 0, ideal: 640}, height: { min: 0, ideal: 480 }\r\n width: {ideal: 640}, height: {ideal: 480}\r\n },\r\n hd: {\r\n \/\/ width: {exact: 1280}, height: {exact: 720}\r\n \/\/ width: { min: 640, ideal: 1280}, height: { min: 480, ideal: 720 }\r\n width: {ideal: 1280}, height: {ideal: 720}\r\n },\r\n fhd: {\r\n \/\/ width: {exact: 1920}, height: {exact: 1080}\r\n \/\/ width: { min: 1280, ideal: 1920}, height: { min: 720, ideal: 1080 }\r\n width: {ideal: 1920}, height: {ideal: 1080}\r\n }\r\n };\r\n\r\n const displayResolutions = {\r\n vga: {\r\n width: 640, height: 480\r\n },\r\n hd: {\r\n width: 1280, height: 720\r\n },\r\n fhd: {\r\n width: 1920, height: 1080\r\n }\r\n };\r\n\r\n let streamingStarted = false;\r\n\r\n let videoElement = document.getElementById('previewPlayer');\r\n\r\n let streamingButton = $('#streamingButton');\r\n\r\n let errorTextSpan = $('#errorText');\r\n\r\n let webRtcUrlInput = $('#webRtcUrlInput');\r\n let videoSourceSelect = $('#videoSourceSelect');\r\n let videoResolutionSelect = $('#videoResolutionSelect');\r\n let videoBitrateInput = $('#videoBitrateInput');\r\n let videoFrameInput = $('#videoFrameInput');\r\n let audioSourceSelect = $('#audioSourceSelect');\r\n let audioSourceSelectArea = $('#audioSourceSelectArea');\r\n\r\n let videoResolutionSpan = $('#videoResolutionSpan');\r\n let videoFrameRateSpan = $('#videoFrameRateSpan');\r\n let iceStateSpan = $('#iceStateSpan');\r\n let bitrateSpan = $('#bitrateSpan');\r\n\r\n let testPlaybackButtonArea = $('#testPlaybackButtonArea');\r\n let playStreamButton = $('#playStreamButton');\r\n\r\n let savedWebRtcUrl = localStorage.getItem('savedWebRtcUrl');\r\n let savedVideoSource = localStorage.getItem('savedVideoSource');\r\n let savedVideoResolution = localStorage.getItem('savedVideoResolution');\r\n let savedVideoBitrate = localStorage.getItem('savedVideoBitrate');\r\n let savedVideoFrame = localStorage.getItem('savedVideoFrame');\r\n let savedAudioSource = localStorage.getItem('savedAudioSource');\r\n\r\n if (savedWebRtcUrl) {\r\n webRtcUrlInput.val(savedWebRtcUrl);\r\n }\r\n\r\n webRtcUrlInput.on('change', function () {\r\n localStorage.setItem('savedWebRtcUrl', $(this).val());\r\n });\r\n\r\n videoSourceSelect.on('change', function () {\r\n localStorage.setItem('savedVideoSource', $(this).val());\r\n\r\n if ($(this).val() === 'displayCapture') {\r\n audioSourceSelectArea.hide();\r\n } else {\r\n audioSourceSelectArea.show();\r\n }\r\n\r\n if ($(this).val() === 'no') {\r\n\r\n enableVideoContrll(false);\r\n } else {\r\n\r\n enableVideoContrll(true);\r\n }\r\n });\r\n\r\n videoResolutionSelect.on('change', function () {\r\n localStorage.setItem('savedVideoResolution', $(this).val());\r\n });\r\n\r\n videoBitrateInput.on('change', function () {\r\n localStorage.setItem('savedVideoBitrate', $(this).val());\r\n });\r\n\r\n videoFrameInput.on('change', function () {\r\n localStorage.setItem('savedVideoFrame', $(this).val());\r\n });\r\n\r\n audioSourceSelect.on('change', function () {\r\n localStorage.setItem('savedAudioSource', $(this).val());\r\n });\r\n\r\n $('.constraintSelect').on('change', function () {\r\n stopStreaming();\r\n });\r\n\r\n $('#useDemoOME').on('click', function (e) {\r\n e.preventDefault();\r\n webRtcUrlInput.val('wss:\/\/demo.ovenplayer.com:3333\/app\/test-input-stream?direction=send&transport=tcp');\r\n webRtcUrlInput.focus();\r\n webRtcUrlInput.change();\r\n });\r\n\r\n function enableVideoContrll(enable) {\r\n videoResolutionSelect.prop('disabled', !enable);\r\n videoBitrateInput.prop('disabled', !enable);\r\n videoFrameInput.prop('disabled', !enable);\r\n }\r\n\r\n\r\n let frameCalculatorTimer = null;\r\n let totalVideoFrames = 0;\r\n\r\n function getResolutionAndCalculateFrame(videoElement) {\r\n\r\n if (frameCalculatorTimer) {\r\n\r\n clearInterval(frameCalculatorTimer);\r\n videoResolutionSpan.text('-');\r\n videoFrameRateSpan.empty('-');\r\n frameCalculatorTimer = null;\r\n totalVideoFrames = 0;\r\n }\r\n\r\n frameCalculatorTimer = setInterval(function () {\r\n\r\n videoResolutionSpan.text(videoElement.videoWidth + 'x' + videoElement.videoHeight);\r\n\r\n if (totalVideoFrames === 0) {\r\n\r\n totalVideoFrames = videoElement.getVideoPlaybackQuality().totalVideoFrames;\r\n } else {\r\n\r\n let currentTotalFrame = videoElement.getVideoPlaybackQuality().totalVideoFrames;\r\n let frameRate = currentTotalFrame - totalVideoFrames;\r\n\r\n videoFrameRateSpan.text(frameRate + 'fps');\r\n\r\n totalVideoFrames = currentTotalFrame;\r\n }\r\n\r\n }, 1000);\r\n }\r\n\r\n function getUserConstraints() {\r\n\r\n let videoDeviceId = videoSourceSelect.val();\r\n let videoResolution = videoResolutionSelect.val();\r\n let videoFrame = videoFrameInput.val();\r\n let audioDeviceId = audioSourceSelect.val();\r\n\r\n let newConstraint = {};\r\n\r\n if (videoDeviceId !== 'no') {\r\n if (videoDeviceId) {\r\n newConstraint.video = {\r\n deviceId: {\r\n exact: videoDeviceId\r\n }\r\n };\r\n }\r\n\r\n if (videoResolution) {\r\n\r\n const resolution = userResolutions[videoResolution];\r\n\r\n newConstraint.video.width = resolution.width;\r\n newConstraint.video.height = resolution.height;\r\n }\r\n\r\n if (videoFrame) {\r\n newConstraint.video.frameRate = {exact: parseInt(videoFrame)};\r\n }\r\n }\r\n\r\n if (audioDeviceId !== 'no') {\r\n if (audioDeviceId) {\r\n newConstraint.audio = {\r\n deviceId: {\r\n exact: audioDeviceId\r\n }\r\n };\r\n }\r\n }\r\n\r\n return newConstraint;\r\n }\r\n\r\n function getDisplayConstraints() {\r\n\r\n let videoResolution = videoResolutionSelect.val();\r\n let videoFrame = videoFrameInput.val();\r\n\r\n let newConstraint = {};\r\n\r\n newConstraint.video = {};\r\n\r\n if (videoResolution) {\r\n\r\n const resolution = displayResolutions[videoResolution];\r\n\r\n newConstraint.video.width = resolution.width;\r\n newConstraint.video.height = resolution.height;\r\n } else {\r\n\r\n newConstraint.video = true;\r\n }\r\n\r\n if (videoFrame) {\r\n\r\n if (!newConstraint.video) {\r\n\r\n newConstraint.video = {};\r\n }\r\n\r\n newConstraint.video.frameRate = parseInt(videoFrame);\r\n }\r\n\r\n newConstraint.audio = true;\r\n\r\n return newConstraint;\r\n }\r\n\r\n function setDevice(type, select, devices) {\r\n\r\n select.empty();\r\n\r\n if (type === 'audio' && devices.length === 0) {\r\n\r\n select.append('<option value=\"\">No Source Available<\/option>')\r\n } else {\r\n\r\n _.each(devices, function (device) {\r\n\r\n let option = $('<option><\/option>');\r\n\r\n option.text(device.label);\r\n option.val(device.deviceId);\r\n\r\n select.append(option);\r\n });\r\n\r\n \/\/ if (type === 'video') {\r\n \/\/\r\n \/\/ let option = $('<option><\/option>');\r\n \/\/\r\n \/\/ option.text('Display capture');\r\n \/\/ option.val('displayCapture');\r\n \/\/\r\n \/\/ if (!navigator.mediaDevices.getDisplayMedia) {\r\n \/\/\r\n \/\/ option.text('Display capture (Not supported)');\r\n \/\/ option.attr('disabled', 'disabled');\r\n \/\/ }\r\n \/\/\r\n \/\/\r\n \/\/ select.append(option);\r\n \/\/ }\r\n }\r\n\r\n if (type === 'video') {\r\n\r\n let option = $('<option><\/option>');\r\n\r\n option.text('Without video');\r\n option.val('no');\r\n\r\n select.append(option);\r\n }\r\n\r\n if (type === 'audio') {\r\n\r\n let option = $('<option><\/option>');\r\n\r\n option.text('Without audio');\r\n option.val('no');\r\n\r\n select.append(option);\r\n }\r\n\r\n select.find('option').eq(0).prop('selected', true);\r\n }\r\n\r\n function checkDevice(devices, deviceId) {\r\n\r\n if (deviceId === 'displayCapture') {\r\n return true;\r\n }\r\n\r\n let filtered = _.filter(devices, function (device) {\r\n\r\n return device.deviceId === deviceId;\r\n });\r\n\r\n return filtered.length > 0;\r\n }\r\n\r\n function resetMessages() {\r\n\r\n errorTextSpan.empty();\r\n\r\n clearInterval(frameCalculatorTimer);\r\n frameCalculatorTimer = null;\r\n\r\n\r\n videoResolutionSpan.text('-');\r\n videoFrameRateSpan.text('-');\r\n bitrateSpan.text('-');\r\n iceStateSpan.text('-');\r\n\r\n }\r\n\r\n\r\n function createInput() {\r\n\r\n testPlaybackButtonArea.hide();\r\n streamingButton.prop('disabled', true);\r\n\r\n if (input) {\r\n input.remove();\r\n input = null;\r\n }\r\n\r\n resetMessages();\r\n\r\n input = OvenLiveKit.create({\r\n callbacks: {\r\n error: function (error) {\r\n\r\n let errorMessage = '';\r\n\r\n if (error.message) {\r\n\r\n errorMessage = error.message;\r\n } else if (error.name) {\r\n\r\n errorMessage = error.name;\r\n } else {\r\n\r\n errorMessage = error.toString();\r\n }\r\n\r\n if (errorMessage === 'OverconstrainedError') {\r\n\r\n errorMessage = 'The input device does not support the specified resolution or frame rate.';\r\n }\r\n\r\n resetMessages();\r\n\r\n errorTextSpan.text(errorMessage);\r\n },\r\n connectionClosed: function (type, event) {\r\n if (type === 'websocket') {\r\n let reason;\r\n \/\/ See http:\/\/tools.ietf.org\/html\/rfc6455#section-7.4.1\r\n if (event.code === 1000)\r\n reason = \"Normal closure, meaning that the purpose for which the connection was established has been fulfilled.\";\r\n else if (event.code === 1001)\r\n reason = \"An endpoint is \\\"going away\\\", such as a server going down or a browser having navigated away from a page.\";\r\n else if (event.code === 1002)\r\n reason = \"An endpoint is terminating the connection due to a protocol error\";\r\n else if (event.code === 1003)\r\n reason = \"An endpoint is terminating the connection because it has received a type of data it cannot accept (e.g., an endpoint that understands only text data MAY send this if it receives a binary message).\";\r\n else if (event.code === 1004)\r\n reason = \"Reserved. The specific meaning might be defined in the future.\";\r\n else if (event.code === 1005)\r\n reason = \"No status code was actually present.\";\r\n else if (event.code === 1006)\r\n reason = \"The connection was closed abnormally, e.g., without sending or receiving a Close control frame\";\r\n else if (event.code === 1007)\r\n reason = \"An endpoint is terminating the connection because it has received data within a message that was not consistent with the type of the message (e.g., non-UTF-8 [http:\/\/tools.ietf.org\/html\/rfc3629] data within a text message).\";\r\n else if (event.code === 1008)\r\n reason = \"An endpoint is terminating the connection because it has received a message that \\\"violates its policy\\\". This reason is given either if there is no other sutible reason, or if there is a need to hide specific details about the policy.\";\r\n else if (event.code === 1009)\r\n reason = \"An endpoint is terminating the connection because it has received a message that is too big for it to process.\";\r\n else if (event.code === 1010) \/\/ Note that this status code is not used by the server, because it can fail the WebSocket handshake instead.\r\n reason = \"An endpoint (client) is terminating the connection because it has expected the server to negotiate one or more extension, but the server didn't return them in the response message of the WebSocket handshake. <br \/> Specifically, the extensions that are needed are: \" + event.reason;\r\n else if (event.code === 1011)\r\n reason = \"A server is terminating the connection because it encountered an unexpected condition that prevented it from fulfilling the request.\";\r\n else if (event.code === 1015)\r\n reason = \"The connection was closed due to a failure to perform a TLS handshake (e.g., the server certificate can't be verified).\";\r\n else\r\n reason = \"Unknown reason\";\r\n $('#errorText').html('Web Socket is closed. ' + reason);\r\n }\r\n if (type === 'ice') {\r\n $('#errorText').html('Peer Connection is closed. State: ' + input.peerConnection.iceConnectionState);\r\n }\r\n },\r\n iceStateChange: function (state) {\r\n iceStateSpan.text(state);\r\n if (state === 'connected') {\r\n testPlaybackButtonArea.show();\r\n }\r\n }\r\n }\r\n });\r\n\r\n input.attachMedia(videoElement);\r\n\r\n if (videoSourceSelect.val()) {\r\n\r\n if (videoSourceSelect.val() === 'displayCapture') {\r\n\r\n\r\n input.getDisplayMedia(getDisplayConstraints()).then(function (stream) {\r\n\r\n streamingButton.prop('disabled', false);\r\n getResolutionAndCalculateFrame(videoElement);\r\n });\r\n } else {\r\n\r\n const userConstraints = getUserConstraints();\r\n\r\n input.getUserMedia(userConstraints).then(function (stream) {\r\n\r\n streamingButton.prop('disabled', false);\r\n getResolutionAndCalculateFrame(videoElement);\r\n });\r\n }\r\n }\r\n }\r\n\r\n function startStreaming() {\r\n\r\n streamingStarted = true;\r\n streamingButton.removeClass('btn-primary').addClass('btn-danger');\r\n streamingButton.text('STOP');\r\n\r\n if (input) {\r\n\r\n let connectionConfig = {};\r\n\r\n if (videoBitrateInput.val()) {\r\n connectionConfig.maxVideoBitrate = parseInt(videoBitrateInput.val());\r\n }\r\n\r\n input.startStreaming(webRtcUrlInput.val(), connectionConfig);\r\n }\r\n }\r\n\r\n function stopStreaming() {\r\n\r\n streamingStarted = false;\r\n streamingButton.removeClass('btn-danger').addClass('btn-primary');\r\n streamingButton.text('START');\r\n\r\n if (input) {\r\n createInput();\r\n }\r\n\r\n }\r\n\r\n streamingButton.on('click', function () {\r\n\r\n if (!streamingStarted) {\r\n startStreaming();\r\n } else {\r\n stopStreaming();\r\n }\r\n });\r\n\r\n playStreamButton.on('click', function () {\r\n const link = {};\r\n\r\n const inputUrl = webRtcUrlInput.val();\r\n\r\n const url = new URL(inputUrl);\r\n\r\n let playbackUrl = url.protocol + url.host + url.pathname;\r\n\r\n if (url.searchParams.get('transport')) {\r\n\r\n playbackUrl += '?transport=' + url.searchParams.get('transport');\r\n }\r\n\r\n link.playerOption = {\r\n autoStart: true,\r\n sources: [\r\n {\r\n type: 'webrtc',\r\n file: playbackUrl\r\n }\r\n ]\r\n };\r\n\r\n window.open('https:\/\/demo.ovenplayer.com#' + encodeURIComponent(JSON.stringify(link)));\r\n\r\n });\r\n\r\n \/\/ videoBitrateInput.on('change', function () {\r\n \/\/\r\n \/\/ if (!input || !input.peerConnection) {\r\n \/\/ return;\r\n \/\/ }\r\n \/\/\r\n \/\/ const bandwidth = videoBitrateInput.val();\r\n \/\/\r\n \/\/ const senders = input.peerConnection.getSenders();\r\n \/\/\r\n \/\/ _.each(senders, function (sender) {\r\n \/\/\r\n \/\/ if (sender.track.kind === 'video') {\r\n \/\/\r\n \/\/ const parameters = sender.getParameters();\r\n \/\/ if (!parameters.encodings) {\r\n \/\/ parameters.encodings = [{}];\r\n \/\/ }\r\n \/\/ if (bandwidth === '') {\r\n \/\/ delete parameters.encodings[0].maxBitrate;\r\n \/\/ } else {\r\n \/\/ parameters.encodings[0].maxBitrate = bandwidth * 1000;\r\n \/\/ }\r\n \/\/ sender.setParameters(parameters)\r\n \/\/ .then(() => {\r\n \/\/\r\n \/\/ })\r\n \/\/ .catch(e => console.error(e));\r\n \/\/ }\r\n \/\/ });\r\n \/\/ });\r\n\r\n let lastResult;\r\n\r\n setInterval(function () {\r\n\r\n if (!input || !input.peerConnection) {\r\n bitrateSpan.text('-');\r\n return;\r\n }\r\n\r\n let sender = null;\r\n\r\n input.peerConnection.getSenders().forEach(function (s) {\r\n\r\n if (s.track && s.track.kind === 'video') {\r\n sender = s;\r\n }\r\n });\r\n\r\n if (!sender) {\r\n bitrateSpan.text('-');\r\n return;\r\n }\r\n\r\n sender.getStats().then(res => {\r\n res.forEach(report => {\r\n let bytes;\r\n let headerBytes;\r\n let packets;\r\n\r\n if (report.type === 'outbound-rtp') {\r\n if (report.isRemote) {\r\n return;\r\n }\r\n\r\n const now = report.timestamp;\r\n bytes = report.bytesSent;\r\n headerBytes = report.headerBytesSent;\r\n\r\n packets = report.packetsSent;\r\n if (lastResult && lastResult.has(report.id)) {\r\n \/\/ calculate bitrate\r\n const bitrate = 8 * (bytes - lastResult.get(report.id).bytesSent) \/\r\n (now - lastResult.get(report.id).timestamp);\r\n const headerrate = 8 * (headerBytes - lastResult.get(report.id).headerBytesSent) \/\r\n (now - lastResult.get(report.id).timestamp);\r\n\r\n const packetsSent = packets - lastResult.get(report.id).packetsSent;\r\n\r\n bitrateSpan.text(bitrate.toFixed(2) + 'kbps');\r\n }\r\n\r\n \/\/ console.log('framesEncoded', report.framesEncoded, 'keyFramesEncoded', report.keyFramesEncoded, report.framesEncoded \/ report.keyFramesEncoded + '(' + report.framesPerSecond + 'fps)')\r\n }\r\n\r\n if (report.type === 'track') {\r\n \/\/ console.log(report)\r\n }\r\n\r\n });\r\n lastResult = res;\r\n });\r\n }, 2000);\r\n\r\n\r\n \/\/ get all devices at the first time\r\n OvenLiveKit.getDevices().then(function (devices) {\r\n\r\n allDevices = devices;\r\n initDemo();\r\n }).catch(function (error) {\r\n\r\n let errorMessage = '';\r\n\r\n if (error.message) {\r\n\r\n errorMessage = error.message;\r\n } else if (error.name) {\r\n\r\n errorMessage = error.name;\r\n } else {\r\n\r\n errorMessage = error.toString();\r\n }\r\n\r\n $('#errorText').text(errorMessage);\r\n });\r\n\r\n function initDemo() {\r\n\r\n if (allDevices) {\r\n\r\n setDevice('video', videoSourceSelect, allDevices.videoinput,);\r\n setDevice('audio', audioSourceSelect, allDevices.audioinput);\r\n\r\n if (savedVideoSource && checkDevice(allDevices.videoinput, savedVideoSource)) {\r\n videoSourceSelect.val(savedVideoSource);\r\n }\r\n\r\n if (savedVideoSource === 'no') {\r\n enableVideoContrll(false);\r\n }\r\n\r\n if (savedVideoSource === 'displayCapture') {\r\n audioSourceSelectArea.hide();\r\n }\r\n\r\n if (savedVideoResolution) {\r\n videoResolutionSelect.val(savedVideoResolution);\r\n }\r\n\r\n if (savedVideoBitrate) {\r\n videoBitrateInput.val(savedVideoBitrate);\r\n }\r\n\r\n if (savedVideoFrame) {\r\n videoFrameInput.val(savedVideoFrame);\r\n }\r\n\r\n if (savedAudioSource && checkDevice(allDevices.audioinput, savedAudioSource)) {\r\n audioSourceSelect.val(savedAudioSource);\r\n }\r\n }\r\n\r\n createInput();\r\n }\r\n\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t<div class=\"elementor-element elementor-element-eb3f9d3 e-flex e-con-boxed e-con e-parent\" data-id=\"eb3f9d3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3467a2d elementor-widget elementor-widget-shortcode\" data-id=\"3467a2d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div class=\"pt-video-grid\">\n<article class=\"pt-video-card\" data-video-id=\"7a26248b-f89e-4e27-aed5-3a11fbfbf05f\" data-video-embed=\"https:\/\/video3.shadow-technologies.com\/videos\/embed\/g5QPG3Xi5SaUhjDZ2qwENc\">\n\t<div class=\"pt-video-thumbnail\">\n\t\t<a href=\"#\" class=\"pt-video-play\" data-video-id=\"7a26248b-f89e-4e27-aed5-3a11fbfbf05f\" data-video-number=\"\">\n\t\t\t\t\t\t\t\t\t\t\t<img src=\"https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/bb39a4d4-5463-4afc-b225-628170ab55c1.jpg\" \n\t\t\t\t\t \t\t\t\t\t srcset=\"https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/8987ac77-3090-4dfe-8d1a-532e46b710a4.jpg 128w, https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/bb39a4d4-5463-4afc-b225-628170ab55c1.jpg 640w\"\n\t\t\t\t\t sizes=\"(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw\"\n\t\t\t\t\t \t\t\t\t\t alt=\"Mother's Day Video 2026\"\n\t\t\t\t\t loading=\"lazy\"\n\t\t\t\t\t decoding=\"async\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"pt-duration\">3:59<\/span>\n\t\t\t\t\t\t<span class=\"pt-play-button\"><\/span>\n\t\t<\/a>\n\t<\/div>\n\t\n\t<div class=\"pt-video-info\">\n\t\t<h3 class=\"pt-video-title\">\n\t\t\t<a href=\"https:\/\/shadow-technologies.com\/?page_id=10749&pt_video_id=7a26248b-f89e-4e27-aed5-3a11fbfbf05f&pt_channel=gwcbs\">\n\t\t\t\tMother's Day Video 2026\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\n\t\t<div class=\"pt-video-meta\">\n\t\t\t<span class=\"pt-meta-line\">\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\n\t\t\t<span class=\"pt-meta-line\">\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-duration\" title=\"Length\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-clock\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"><\/path><\/svg>\t\t\t\t\t\t3:59\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-date\" title=\"Published\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-calendar\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z\"><\/path><\/svg>\t\t\t\t\t\t1 weeks ago\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-category\" title=\"Category\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-folder\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776\"><\/path><\/svg>\t\t\t\t\t\tEducation\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-views\" title=\"Views\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-eye\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z\"><\/path><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"><\/path><\/svg>\t\t\t\t\t\t14 Views\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\n\t\t\t\t\t<\/div>\n\t<\/div>\n<\/article>\n\n\n<article class=\"pt-video-card\" data-video-id=\"acdc3bd8-42b5-4dfa-9eff-4bf1460f026b\" data-video-embed=\"https:\/\/video3.shadow-technologies.com\/videos\/embed\/nm3m8Xs2DfuH5Ayirz9SVR\">\n\t<div class=\"pt-video-thumbnail\">\n\t\t<a href=\"#\" class=\"pt-video-play\" data-video-id=\"acdc3bd8-42b5-4dfa-9eff-4bf1460f026b\" data-video-number=\"\">\n\t\t\t\t\t\t\t\t\t\t\t<img src=\"https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/77d49245-7f5e-4a34-a129-c094f9ebe4db.png\" \n\t\t\t\t\t \t\t\t\t\t srcset=\"https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/b6c9be99-e6ec-4b8a-8081-569b8e40870f.png 128w, https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/77d49245-7f5e-4a34-a129-c094f9ebe4db.png 640w\"\n\t\t\t\t\t sizes=\"(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw\"\n\t\t\t\t\t \t\t\t\t\t alt=\"Gateway Sunday Service - 4\/12\/2026, 12:31:32 PM\"\n\t\t\t\t\t loading=\"lazy\"\n\t\t\t\t\t decoding=\"async\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"pt-duration\">13:51<\/span>\n\t\t\t\t\t\t<span class=\"pt-play-button\"><\/span>\n\t\t<\/a>\n\t<\/div>\n\t\n\t<div class=\"pt-video-info\">\n\t\t<h3 class=\"pt-video-title\">\n\t\t\t<a href=\"https:\/\/shadow-technologies.com\/?page_id=10749&pt_video_id=acdc3bd8-42b5-4dfa-9eff-4bf1460f026b&pt_channel=gwcbs\">\n\t\t\t\tGateway Sunday Service - 4\/12\/2026, 12:31:32 PM\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\n\t\t<div class=\"pt-video-meta\">\n\t\t\t<span class=\"pt-meta-line\">\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\n\t\t\t<span class=\"pt-meta-line\">\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-duration\" title=\"Length\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-clock\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"><\/path><\/svg>\t\t\t\t\t\t13:51\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-date\" title=\"Published\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-calendar\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z\"><\/path><\/svg>\t\t\t\t\t\t1 months ago\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-category\" title=\"Category\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-folder\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776\"><\/path><\/svg>\t\t\t\t\t\tEducation\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-views\" title=\"Views\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-eye\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z\"><\/path><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"><\/path><\/svg>\t\t\t\t\t\t0 Views\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\n\t\t\t\t\t<\/div>\n\t<\/div>\n<\/article>\n\n\n<article class=\"pt-video-card\" data-video-id=\"6441a57e-614c-4de6-b068-159b26e0e2be\" data-video-embed=\"https:\/\/video3.shadow-technologies.com\/videos\/embed\/do3CqN8r9JZ998s2ip7h6u\">\n\t<div class=\"pt-video-thumbnail\">\n\t\t<a href=\"#\" class=\"pt-video-play\" data-video-id=\"6441a57e-614c-4de6-b068-159b26e0e2be\" data-video-number=\"\">\n\t\t\t\t\t\t\t\t\t\t\t<img src=\"https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/bd7fb149-cc83-44b1-9c4e-31ed81a29495.png\" \n\t\t\t\t\t \t\t\t\t\t srcset=\"https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/d1bd46a1-65c4-4750-83a1-4210a53a59ab.png 128w, https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/bd7fb149-cc83-44b1-9c4e-31ed81a29495.png 640w\"\n\t\t\t\t\t sizes=\"(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw\"\n\t\t\t\t\t \t\t\t\t\t alt=\"Gateway Sunday Service - 4\/12\/2026, 3:21:14 AM\"\n\t\t\t\t\t loading=\"lazy\"\n\t\t\t\t\t decoding=\"async\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"pt-duration\">0:09<\/span>\n\t\t\t\t\t\t<span class=\"pt-play-button\"><\/span>\n\t\t<\/a>\n\t<\/div>\n\t\n\t<div class=\"pt-video-info\">\n\t\t<h3 class=\"pt-video-title\">\n\t\t\t<a href=\"https:\/\/shadow-technologies.com\/?page_id=10749&pt_video_id=6441a57e-614c-4de6-b068-159b26e0e2be&pt_channel=gwcbs\">\n\t\t\t\tGateway Sunday Service - 4\/12\/2026, 3:21:14 AM\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\n\t\t<div class=\"pt-video-meta\">\n\t\t\t<span class=\"pt-meta-line\">\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\n\t\t\t<span class=\"pt-meta-line\">\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-duration\" title=\"Length\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-clock\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"><\/path><\/svg>\t\t\t\t\t\t0:09\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-date\" title=\"Published\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-calendar\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z\"><\/path><\/svg>\t\t\t\t\t\t1 months ago\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-category\" title=\"Category\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-folder\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776\"><\/path><\/svg>\t\t\t\t\t\tEducation\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-views\" title=\"Views\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-eye\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z\"><\/path><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"><\/path><\/svg>\t\t\t\t\t\t0 Views\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\n\t\t\t\t\t<\/div>\n\t<\/div>\n<\/article>\n\n\n<article class=\"pt-video-card\" data-video-id=\"486d2cfa-8e2a-438d-9fde-4fa6c85a72ea\" data-video-embed=\"https:\/\/video3.shadow-technologies.com\/videos\/embed\/9WJ2PZWF3hedw2cKPEH9Sf\">\n\t<div class=\"pt-video-thumbnail\">\n\t\t<a href=\"#\" class=\"pt-video-play\" data-video-id=\"486d2cfa-8e2a-438d-9fde-4fa6c85a72ea\" data-video-number=\"\">\n\t\t\t\t\t\t\t\t\t\t\t<img src=\"https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/2c8e6ae3-8380-49f5-a9eb-d0e783dcf6f8.png\" \n\t\t\t\t\t \t\t\t\t\t srcset=\"https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/0ba5582c-26ef-44b0-a6a3-8f81adfe17f5.png 128w, https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/2c8e6ae3-8380-49f5-a9eb-d0e783dcf6f8.png 640w\"\n\t\t\t\t\t sizes=\"(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw\"\n\t\t\t\t\t \t\t\t\t\t alt=\"Gateway Sunday Service - 4\/12\/2026, 3:10:48 AM\"\n\t\t\t\t\t loading=\"lazy\"\n\t\t\t\t\t decoding=\"async\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"pt-duration\">10:11<\/span>\n\t\t\t\t\t\t<span class=\"pt-play-button\"><\/span>\n\t\t<\/a>\n\t<\/div>\n\t\n\t<div class=\"pt-video-info\">\n\t\t<h3 class=\"pt-video-title\">\n\t\t\t<a href=\"https:\/\/shadow-technologies.com\/?page_id=10749&pt_video_id=486d2cfa-8e2a-438d-9fde-4fa6c85a72ea&pt_channel=gwcbs\">\n\t\t\t\tGateway Sunday Service - 4\/12\/2026, 3:10:48 AM\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\n\t\t<div class=\"pt-video-meta\">\n\t\t\t<span class=\"pt-meta-line\">\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\n\t\t\t<span class=\"pt-meta-line\">\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-duration\" title=\"Length\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-clock\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"><\/path><\/svg>\t\t\t\t\t\t10:11\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-date\" title=\"Published\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-calendar\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z\"><\/path><\/svg>\t\t\t\t\t\t1 months ago\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-category\" title=\"Category\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-folder\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776\"><\/path><\/svg>\t\t\t\t\t\tEducation\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-views\" title=\"Views\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-eye\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z\"><\/path><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"><\/path><\/svg>\t\t\t\t\t\t0 Views\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\n\t\t\t\t\t<\/div>\n\t<\/div>\n<\/article>\n\n\n<article class=\"pt-video-card\" data-video-id=\"dff8a7b7-6fe5-44ea-ac71-8ca39794a90e\" data-video-embed=\"https:\/\/video3.shadow-technologies.com\/videos\/embed\/tE6VkqDFuLnDcocCyTbPxL\">\n\t<div class=\"pt-video-thumbnail\">\n\t\t<a href=\"#\" class=\"pt-video-play\" data-video-id=\"dff8a7b7-6fe5-44ea-ac71-8ca39794a90e\" data-video-number=\"\">\n\t\t\t\t\t\t\t\t\t\t\t<img src=\"https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/889979fa-f1e2-4f1f-87b2-94433dc93b70.png\" \n\t\t\t\t\t \t\t\t\t\t srcset=\"https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/d3c59d46-0534-4862-8ac8-41215ad70eef.png 128w, https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/889979fa-f1e2-4f1f-87b2-94433dc93b70.png 640w\"\n\t\t\t\t\t sizes=\"(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw\"\n\t\t\t\t\t \t\t\t\t\t alt=\"Gateway Sunday Service - 4\/12\/2026, 2:45:45 AM\"\n\t\t\t\t\t loading=\"lazy\"\n\t\t\t\t\t decoding=\"async\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"pt-duration\">23:54<\/span>\n\t\t\t\t\t\t<span class=\"pt-play-button\"><\/span>\n\t\t<\/a>\n\t<\/div>\n\t\n\t<div class=\"pt-video-info\">\n\t\t<h3 class=\"pt-video-title\">\n\t\t\t<a href=\"https:\/\/shadow-technologies.com\/?page_id=10749&pt_video_id=dff8a7b7-6fe5-44ea-ac71-8ca39794a90e&pt_channel=gwcbs\">\n\t\t\t\tGateway Sunday Service - 4\/12\/2026, 2:45:45 AM\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\n\t\t<div class=\"pt-video-meta\">\n\t\t\t<span class=\"pt-meta-line\">\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\n\t\t\t<span class=\"pt-meta-line\">\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-duration\" title=\"Length\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-clock\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"><\/path><\/svg>\t\t\t\t\t\t23:54\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-date\" title=\"Published\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-calendar\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z\"><\/path><\/svg>\t\t\t\t\t\t1 months ago\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-category\" title=\"Category\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-folder\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776\"><\/path><\/svg>\t\t\t\t\t\tEducation\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-views\" title=\"Views\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-eye\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z\"><\/path><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"><\/path><\/svg>\t\t\t\t\t\t0 Views\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\n\t\t\t\t\t<\/div>\n\t<\/div>\n<\/article>\n\n\n<article class=\"pt-video-card\" data-video-id=\"291312e7-0464-4d6f-8471-4145395da669\" data-video-embed=\"https:\/\/video3.shadow-technologies.com\/videos\/embed\/65boR2bc8Evj8va2K6Zr1e\">\n\t<div class=\"pt-video-thumbnail\">\n\t\t<a href=\"#\" class=\"pt-video-play\" data-video-id=\"291312e7-0464-4d6f-8471-4145395da669\" data-video-number=\"\">\n\t\t\t\t\t\t\t\t\t\t\t<img src=\"https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/51d6213f-31ad-4ed8-97bf-75aa39028c2d.png\" \n\t\t\t\t\t \t\t\t\t\t srcset=\"https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/50a804ed-3fcc-41f9-8aba-ea2e09a1ac94.png 128w, https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/51d6213f-31ad-4ed8-97bf-75aa39028c2d.png 640w\"\n\t\t\t\t\t sizes=\"(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw\"\n\t\t\t\t\t \t\t\t\t\t alt=\"Gateway Sunday Service - 4\/12\/2026, 1:50:56 AM\"\n\t\t\t\t\t loading=\"lazy\"\n\t\t\t\t\t decoding=\"async\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"pt-duration\">42:19<\/span>\n\t\t\t\t\t\t<span class=\"pt-play-button\"><\/span>\n\t\t<\/a>\n\t<\/div>\n\t\n\t<div class=\"pt-video-info\">\n\t\t<h3 class=\"pt-video-title\">\n\t\t\t<a href=\"https:\/\/shadow-technologies.com\/?page_id=10749&pt_video_id=291312e7-0464-4d6f-8471-4145395da669&pt_channel=gwcbs\">\n\t\t\t\tGateway Sunday Service - 4\/12\/2026, 1:50:56 AM\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\n\t\t<div class=\"pt-video-meta\">\n\t\t\t<span class=\"pt-meta-line\">\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\n\t\t\t<span class=\"pt-meta-line\">\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-duration\" title=\"Length\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-clock\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"><\/path><\/svg>\t\t\t\t\t\t42:19\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-date\" title=\"Published\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-calendar\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z\"><\/path><\/svg>\t\t\t\t\t\t1 months ago\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-category\" title=\"Category\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-folder\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776\"><\/path><\/svg>\t\t\t\t\t\tEducation\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-views\" title=\"Views\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-eye\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z\"><\/path><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"><\/path><\/svg>\t\t\t\t\t\t0 Views\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\n\t\t\t\t\t<\/div>\n\t<\/div>\n<\/article>\n\n\n<article class=\"pt-video-card\" data-video-id=\"4639970a-5fcf-448e-8a48-642233af1942\" data-video-embed=\"https:\/\/video3.shadow-technologies.com\/videos\/embed\/9EXwms9sbMc5MxshxJRXi5\">\n\t<div class=\"pt-video-thumbnail\">\n\t\t<a href=\"#\" class=\"pt-video-play\" data-video-id=\"4639970a-5fcf-448e-8a48-642233af1942\" data-video-number=\"\">\n\t\t\t\t\t\t\t\t\t\t\t<img src=\"https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/ccee4f0f-2b19-4461-92f7-b1632ba8660b.png\" \n\t\t\t\t\t \t\t\t\t\t srcset=\"https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/88ee202d-350a-4dc7-b1b2-191b32de9b56.png 128w, https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/ccee4f0f-2b19-4461-92f7-b1632ba8660b.png 640w\"\n\t\t\t\t\t sizes=\"(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw\"\n\t\t\t\t\t \t\t\t\t\t alt=\"Gateway Sunday Service - 4\/12\/2026, 1:45:40 AM\"\n\t\t\t\t\t loading=\"lazy\"\n\t\t\t\t\t decoding=\"async\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"pt-duration\">4:52<\/span>\n\t\t\t\t\t\t<span class=\"pt-play-button\"><\/span>\n\t\t<\/a>\n\t<\/div>\n\t\n\t<div class=\"pt-video-info\">\n\t\t<h3 class=\"pt-video-title\">\n\t\t\t<a href=\"https:\/\/shadow-technologies.com\/?page_id=10749&pt_video_id=4639970a-5fcf-448e-8a48-642233af1942&pt_channel=gwcbs\">\n\t\t\t\tGateway Sunday Service - 4\/12\/2026, 1:45:40 AM\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\n\t\t<div class=\"pt-video-meta\">\n\t\t\t<span class=\"pt-meta-line\">\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\n\t\t\t<span class=\"pt-meta-line\">\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-duration\" title=\"Length\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-clock\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"><\/path><\/svg>\t\t\t\t\t\t4:52\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-date\" title=\"Published\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-calendar\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z\"><\/path><\/svg>\t\t\t\t\t\t1 months ago\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-category\" title=\"Category\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-folder\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776\"><\/path><\/svg>\t\t\t\t\t\tEducation\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-views\" title=\"Views\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-eye\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z\"><\/path><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"><\/path><\/svg>\t\t\t\t\t\t0 Views\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\n\t\t\t\t\t<\/div>\n\t<\/div>\n<\/article>\n\n\n<article class=\"pt-video-card\" data-video-id=\"f8ce080f-cc3e-4bbb-bf6b-d8fcc7467b3d\" data-video-embed=\"https:\/\/video3.shadow-technologies.com\/videos\/embed\/wHXMnYm1io2pwNqBzmEwSz\">\n\t<div class=\"pt-video-thumbnail\">\n\t\t<a href=\"#\" class=\"pt-video-play\" data-video-id=\"f8ce080f-cc3e-4bbb-bf6b-d8fcc7467b3d\" data-video-number=\"\">\n\t\t\t\t\t\t\t\t\t\t\t<img src=\"https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/a6c97dfa-55da-45ed-94e7-7f3c9ffbe076.png\" \n\t\t\t\t\t \t\t\t\t\t srcset=\"https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/63dc324f-9222-4feb-90bc-0aa044ec74c7.png 128w, https:\/\/video3.shadow-technologies.com\/lazy-static\/thumbnails\/a6c97dfa-55da-45ed-94e7-7f3c9ffbe076.png 640w\"\n\t\t\t\t\t sizes=\"(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw\"\n\t\t\t\t\t \t\t\t\t\t alt=\"Gateway Sunday Service - 4\/10\/2026, 3:22:47 PM\"\n\t\t\t\t\t loading=\"lazy\"\n\t\t\t\t\t decoding=\"async\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"pt-duration\">6:03<\/span>\n\t\t\t\t\t\t<span class=\"pt-play-button\"><\/span>\n\t\t<\/a>\n\t<\/div>\n\t\n\t<div class=\"pt-video-info\">\n\t\t<h3 class=\"pt-video-title\">\n\t\t\t<a href=\"https:\/\/shadow-technologies.com\/?page_id=10749&pt_video_id=f8ce080f-cc3e-4bbb-bf6b-d8fcc7467b3d&pt_channel=gwcbs\">\n\t\t\t\tGateway Sunday Service - 4\/10\/2026, 3:22:47 PM\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\n\t\t<div class=\"pt-video-meta\">\n\t\t\t<span class=\"pt-meta-line\">\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\n\t\t\t<span class=\"pt-meta-line\">\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-duration\" title=\"Length\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-clock\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"><\/path><\/svg>\t\t\t\t\t\t6:03\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-date\" title=\"Published\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-calendar\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z\"><\/path><\/svg>\t\t\t\t\t\t1 months ago\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-category\" title=\"Category\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-folder\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776\"><\/path><\/svg>\t\t\t\t\t\tEducation\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"pt-meta-item pt-meta-views\" title=\"Views\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"pt-icon pt-icon-eye\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z\"><\/path><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"><\/path><\/svg>\t\t\t\t\t\t1 Views\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\n\t\t\t\t\t<\/div>\n\t<\/div>\n<\/article>\n\n<\/div> - Latest videos from this instance\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4921fe9 e-flex e-con-boxed e-con e-parent\" data-id=\"4921fe9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t\t\t\t<p class=\"e-paragraph-base\" data-interaction-id=\"f58e534\" data-e-type=\"widget\" data-id=\"f58e534\">\n\t\t\t\t\t\t\t\tType your paragraph Search in Media Library\n\n\n<form method=\"get\" action=\"https:\/\/shadow-technologies.com\/?page_id=10748\" class=\"pt-search-form\">\n\t<div class=\"pt-search-input-wrapper\">\n\t\t<input type=\"search\" \n\t\t\t name=\"pt_search\" \n\t\t\t value=\"\" \n\t\t\t placeholder=\"Search...\" \n\t\t\t class=\"pt-search-input\"\n\t\t\t required>\n\t\t<button type=\"submit\" class=\"pt-search-button\">\n\t\t\t<span class=\"pt-search-icon\">\ud83d\udd0d<\/span>\n\t\t\t<span class=\"pt-search-text\">Search<\/span>\n\t\t<\/button>\n\t<\/div>\n<\/form>\n\n\n\n<p class=\"pt-no-results\">Please enter a search term.<\/p>\n\t\t\t\t\t<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Click here videojs-contrib-hls embed Video.js Example Embed OvenPlayer OVENPLAYER Low Latency Demo Player Player Demo Sub-Second Latency Demo GitHub Docs Playback URL ADD SOURCE {{playerMessage}} {{loadButtonMsg}} Sources OvenPlayer {{playerVersion}} Test streams with OvenPlayer Sub-Second Latency: WebRTC (Signalling Protocol Conforms to the OME Specification) Low-Latency HLS To play the stream of OvenMediaEngine, please refer to the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-10487","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/shadow-technologies.com\/index.php?rest_route=\/wp\/v2\/pages\/10487","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shadow-technologies.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shadow-technologies.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shadow-technologies.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shadow-technologies.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10487"}],"version-history":[{"count":44,"href":"https:\/\/shadow-technologies.com\/index.php?rest_route=\/wp\/v2\/pages\/10487\/revisions"}],"predecessor-version":[{"id":10819,"href":"https:\/\/shadow-technologies.com\/index.php?rest_route=\/wp\/v2\/pages\/10487\/revisions\/10819"}],"wp:attachment":[{"href":"https:\/\/shadow-technologies.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}