From 763931f1fd0b51bf14cf3de956de63e23155df1a Mon Sep 17 00:00:00 2001 From: Todd Anderson Date: Wed, 15 Dec 2021 14:04:49 -0500 Subject: [PATCH] Updating SM VOD examples. Fixes RPRO-8917. --- .../playbackVODStreamManager/index.html | 2 +- .../sm-test/playbackVODStreamManager/index.js | 249 +++--------------- .../playbackVODStreamManagerList/index.js | 60 +---- 3 files changed, 50 insertions(+), 261 deletions(-) diff --git a/src/page/sm-test/playbackVODStreamManager/index.html b/src/page/sm-test/playbackVODStreamManager/index.html index 4d587cba..71046e43 100644 --- a/src/page/sm-test/playbackVODStreamManager/index.html +++ b/src/page/sm-test/playbackVODStreamManager/index.html @@ -51,7 +51,7 @@

- +

diff --git a/src/page/sm-test/playbackVODStreamManager/index.js b/src/page/sm-test/playbackVODStreamManager/index.js index 76a9d3e8..e2243e92 100644 --- a/src/page/sm-test/playbackVODStreamManager/index.js +++ b/src/page/sm-test/playbackVODStreamManager/index.js @@ -50,7 +50,6 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. red5prosdk.setLogLevel(configuration.verboseLogging ? red5prosdk.LOG_LEVELS.TRACE : red5prosdk.LOG_LEVELS.WARN); var targetSubscriber; - var edgeData; var nameInput = document.getElementById('name-input'); var submitButton = document.getElementById('submit-button'); @@ -91,9 +90,6 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. if (event.type === 'Subscribe.Time.Update') return; console.log('[Red5ProSubscriber] ' + event.type + '.'); } - function onSubscribeFail (message) { - console.error('[Red5ProSubsriber] Subscribe Error :: ' + message); - } function onSubscribeSuccess () { console.log('[Red5ProSubsriber] Subscribe Complete.'); } @@ -104,36 +100,12 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. console.log('[Red5ProSubsriber] Unsubscribe Complete.'); } - var generateFlashEmbedObject = function (id) { - var obj = document.createElement('object'); - obj.type = 'application/x-shockwave-flash'; - obj.id = id; - obj.name = id; - obj.align = 'middle'; - obj.data = '../../lib/red5pro/red5pro-subscriber.swf'; - obj.width = '100%'; - obj.height = '480'; - obj.classList.add('red5pro-subscriber', 'red5pro-media-background', 'red5pro-media'); - obj.innerHTML = '' + - '' + - '' + - '' + - '' + - ''; - return obj; - } - function isMP4File (url) { return url.indexOf('.mp4') !== -1; } function useMP4Fallback (url) { console.log('[subscribe] Playback MP4: ' + url); - if (url.indexOf('streams/') === -1) { - var paths = url.split('/'); - paths.splice(paths.length - 1, 0, 'streams'); - url = paths.join('/'); - } var element = document.getElementById('red5pro-subscriber'); var source = document.createElement('source'); source.type = 'video/mp4;codecs="avc1.42E01E, mp4a.40.2"'; @@ -141,28 +113,6 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. element.appendChild(source); } - function useFLVFallback (host, app, streamName) { - console.log('[subscribe] Playback FLV: ' + streamName); - var container = document.getElementById('red5pro-subscriber'); - var parent = container ? container.parentNode : document.getElementById('video-container'); - if (container && parent) { - parent.removeChild(container); - } - var flashElement = generateFlashEmbedObject('red5pro-subscriber'); - var flashvars = document.createElement('param'); - flashvars.name = 'flashvars'; - flashvars.value = 'stream='+streamName+'&'+ - 'app='+app+'&'+ - 'host='+host+'&'+ - 'muted=false&'+ - 'autoplay=true&'+ - 'backgroundColor=#000000&'+ - 'buffer=0.5&'+ - 'autosize=true'; - flashElement.appendChild(flashvars); - parent.appendChild(flashElement); - } - function useVideoJSFallback (url) { console.log('[subscribe] Playback HLS: ' + url); var videoElement = document.getElementById('red5pro-subscriber'); @@ -178,97 +128,6 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. }); } - - function requestPlaylist (configuration, vod) { - var host = configuration.host; - var app = configuration.app; - var port = serverSettings.httpport; - var baseUrl = protocol + '://' + host + ':' + port; - var apiVersion = configuration.streamManagerAPI || '4.0'; - var url = baseUrl + '/streammanager/api/' + apiVersion + '/media/' + app + '/playlists'; - return new Promise(function (resolve, reject) { - fetch(url) - .then(function (res) { - if (res.headers.get("content-type") && - res.headers.get("content-type").toLowerCase().indexOf("application/json") >= 0) { - return res.json(); - } - else { - throw new TypeError('Could not properly parse response.'); - } - }) - .then(function (json) { - if (json.errorMessage) { - throw new Error(json.errorMessage); - } else { - if (json.playlists && json.playlists.length > 0) { - var i = json.playlists.length; - var fileInfo; - while (--i > -1) { - if (json.playlists[i].name === vod) { - fileInfo = json.playlists[i]; - break; - } - } - if (fileInfo) { - resolve(fileInfo); - } else { - throw new Error('File not found'); - } - } else { - throw new Error('File not found.'); - } - } - }) - .catch(function (error) { - var jsonError = typeof error === 'string' ? error : JSON.stringify(error, null, 2) - console.error('[SubscribeStreamManagerTest] :: Error - Could not request Edge IP from Stream Manager. ' + jsonError) - reject(error) - }); - }); - } - - function requestEdge (configuration, vod) { - var host = configuration.host; - var app = configuration.app; - var port = serverSettings.httpport; - var baseUrl = protocol + '://' + host + ':' + port; - var apiVersion = configuration.streamManagerAPI || '4.0'; - var url = baseUrl + '/streammanager/api/' + apiVersion + '/media/' + app + '/' + vod; - return new Promise(function (resolve, reject) { - fetch(url) - .then(function (res) { - if (res.headers.get("content-type") && - res.headers.get("content-type").toLowerCase().indexOf("application/json") >= 0) { - return res.json(); - } - else { - throw new TypeError('Could not properly parse response.'); - } - }) - .then(function (json) { - if (json.errorMessage) { - throw new Error(json.errorMessage); - } else { - resolve(json); - } - }) - .catch(function (error) { - var jsonError = typeof error === 'string' ? error : JSON.stringify(error, null, 2) - console.error('[SubscribeStreamManagerTest] :: Error - Could not request Edge IP from Stream Manager. ' + jsonError) - reject(error) - }); - }); - } - - function forceFallback (edgeData) { - if (isMP4File(edgeData.url)) { - useMP4Fallback(edgeData.url); - } else { - useFLVFallback(edgeData.serverAddress, edgeData.scope, edgeData.name); - } - } - // Request to unsubscribe. function unsubscribe () { return new Promise(function(resolve, reject) { @@ -306,18 +165,24 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. return configuration.subscriberFailoverOrder; } - var retryCount = 0; - var retryLimit = 3; + function generatePlaybackURL (configuration, filename) { + var host = configuration.host; + var app = configuration.app; + var port = serverSettings.httpport.length === 0 ? 443 : serverSettings.httpport; + var baseUrl = protocol + '://' + host + ':' + port; + var apiVersion = configuration.streamManagerAPI || '4.0'; + var url = baseUrl + '/streammanager/api/' + apiVersion + '/file/' + app + '/' + filename; + return url + } - function respondToPlaylist (response) { + function playbackFile (name) { var pathReg = /([^/]+)/g; - var url = response.url; - var name = response.name; + var url = generatePlaybackURL(configuration, name) var location = url.match(pathReg); var protocol = location[0].substring(0, location[0].length-1); var host = location[1].split(':').length > 1 ? location[1].split(':')[0] : location[1] var port = location[1].split(':').length > 1 ? location[1].split(':')[1] : '' - var app = configuration.app; + var app = 'streammanager/api/4.0/file/' + configuration.app; if (location.length > 4) { var paths = [location[2]] var pathIndex = 3; @@ -348,75 +213,27 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. .catch(function (error) { var jsonError = typeof error === 'string' ? error : JSON.stringify(error, null, 2) console.error('[Red5ProSubscriber] :: Error in HLS playback. ' + jsonError); - useVideoJSFallback(response.url); - }); - } - - function respondToEdge (response) { - edgeData = response; - var host = edgeData.serverAddress; - var name = edgeData.name; - var app = edgeData.scope; - edgeData.url = 'http://' + host + ':5080/' + app + '/' + name; - - var config = Object.assign({}, configuration, defaultConfiguration); - var rtmpConfig = Object.assign({}, config, { - host: host, - app: app, - protocol: 'rtmp', - port: serverSettings.rtmpport, - streamName: name, - backgroundColor: '#000000', - width: 640, - height: 480, - swf: '../../lib/red5pro/red5pro-subscriber.swf', - swfobjectURL: '../../lib/swfobject/swfobject.js', - productInstallURL: '../../lib/swfobject/playerProductInstall.swf' - }); - - new red5prosdk.RTMPSubscriber().init(rtmpConfig) - .then(function (subscriberImpl) { - targetSubscriber = subscriberImpl; - // Subscribe to events. - targetSubscriber.on('*', onSubscriberEvent); - return targetSubscriber.subscribe(); - }) - .then(function () { - onSubscribeSuccess(); - }) - .catch(function (error) { // eslint-disable-line no-unused-vars - try { - forceFallback(edgeData) - } catch (e) { - console.error('[Red5ProSubscriber] :: Error in subscribing - ' + e.message); - onSubscribeFail(e.message); + if (isMP4File(url)) { + useMP4Fallback(url); + } else if (url.indexOf('flv') !== -1) { + copyFLVLocationToClipboard(url) + } else { + useVideoJSFallback(url); } }); } - function respondToEdgeFailure (error) { - if (retryCount++ < retryLimit) { - var retryTimer = setTimeout(function () { - clearTimeout(retryTimer); - startup(); - }, 1000); - } - else { - var jsonError = typeof error === 'string' ? error : JSON.stringify(error, null, 2); - console.error('[Red5ProSubscriber] :: Retry timeout in subscribing - ' + jsonError); - } - } - - function startup () { - // Kick off. - if (configuration.subscriberFailoverOrder.toLowerCase() === 'hls') { - requestPlaylist(configuration, configuration.stream1) - .then(respondToPlaylist) - .catch(respondToEdgeFailure) - } else { - requestEdge(configuration, configuration.stream1) - .then(respondToEdge) - .catch(respondToEdgeFailure); + function copyFLVLocationToClipboard (url) { + try { + navigator.clipboard.writeText(url) + .then(function () { + console.log(url + ' add to clipboard!') + }) + .catch(function (e) { + console.error(e) + }) + } catch (e) { + console.error(e) } } @@ -426,10 +243,14 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. configuration.stream1 = filename; if (typeof targetSubscriber !== 'undefined') { - unsubscribe().then(startup).catch(startup); + unsubscribe().then(function () { + playbackFile(filename) + }).catch(function () { + playbackFile(filename) + }); } else { - startup(); + playbackFile(filename); } } diff --git a/src/page/sm-test/playbackVODStreamManagerList/index.js b/src/page/sm-test/playbackVODStreamManagerList/index.js index e748884d..0611458f 100644 --- a/src/page/sm-test/playbackVODStreamManagerList/index.js +++ b/src/page/sm-test/playbackVODStreamManagerList/index.js @@ -169,38 +169,14 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. }); } - // eslint-disable-next-line no-unused-vars - function requestEdge (configuration, vod) { + function generatePlaybackURL (configuration, filename) { var host = configuration.host; var app = configuration.app; - var port = serverSettings.httpport; + var port = serverSettings.httpport.length === 0 ? 443 : serverSettings.httpport; var baseUrl = protocol + '://' + host + ':' + port; var apiVersion = configuration.streamManagerAPI || '4.0'; - var url = baseUrl + '/streammanager/api/' + apiVersion + '/media/' + app + '/' + vod; - return new Promise(function (resolve, reject) { - fetch(url) - .then(function (res) { - if (res.headers.get("content-type") && - res.headers.get("content-type").toLowerCase().indexOf("application/json") >= 0) { - return res.json(); - } - else { - throw new TypeError('[RequestVOD] :: Could not properly parse response.'); - } - }) - .then(function (json) { - if (json.errorMessage) { - throw new Error(json.errorMessage); - } else { - resolve(json); - } - }) - .catch(function (error) { - console.error('[SubscribeStreamManagerTest] :: Error - Could not request Edge IP from Stream Manager. ' + error.message) - showErrorNotification(error.message); - reject(error) - }); - }); + var url = baseUrl + '/streammanager/api/' + apiVersion + '/file/' + app + '/' + filename; + return url } var mediafiles = []; @@ -225,18 +201,11 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. if (!isNaN(index) && mediafiles.length > index) { var next = function () { var f = mediafiles[index]; - var url = f.url; - var location = url.split('/'); - mediafiles[index] = Object.assign({}, f, { - serverAddress: location[2], - scope: [location[3], location[4]].join('/'), - name: location[5] - }) - var mediafile = mediafiles[index] - if (isMP4File(mediafile.url)) { - useMP4Fallback(mediafile.url); + var url = generatePlaybackURL(f.name); + if (isMP4File(url)) { + useMP4Fallback(url); } else { - copyFLVLocationToClipboard(mediafile) + copyFLVLocationToClipboard(url) } } unsubscribe().then(next).catch(next); @@ -341,8 +310,8 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. function respondToPlaylist (response) { var pathReg = /([^/]+)/g; - var url = response.url; var name = response.name; + var url = generatePlaybackURL(configuration, name) var location = url.match(pathReg); var protocol = window.location.protocol.substring(0, window.location.protocol.length - 1) var host = window.location.hostname @@ -352,7 +321,7 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. host = location[1].split(':').length > 1 ? location[1].split(':')[0] : location[1] port = location[1].split(':').length > 1 ? location[1].split(':')[1] : '' } - var app = configuration.app; + var app = 'streammanager/api/4.0/file/' + configuration.app; if (location.length > 4) { var paths = [location[2]] var pathIndex = 3; @@ -383,17 +352,16 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. .catch(function (error) { var jsonError = typeof error === 'string' ? error : JSON.stringify(error, null, 2) console.error('[Red5ProSubscriber] :: Error in HLS playback. ' + jsonError); - useVideoJSFallback(response.url); + useVideoJSFallback(url); // showErrorNotification('[Red5ProSubscriber] :: Error in HLS playback. ' + jsonError); }); } - function copyFLVLocationToClipboard (response) { - console.log(response) + function copyFLVLocationToClipboard (url) { try { - navigator.clipboard.writeText(response.url) + navigator.clipboard.writeText(url) .then(function () { - console.log(response.url + ' add to clipboard!') + console.log(url + ' add to clipboard!') }) .catch(function (e) { console.error(e)