red5pro-jwplayer-provider/docs/index.html at master · red5pro/red5pro-jwplayer-provider · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<html lang="en">
  <head>
    <title>jwplayer test</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
    <link rel="stylesheet" href="style/main.css">
    <style>
      .jw-slider-time, .jw-icon-rewind {
        display: none !important;
      }
      .jw-volume-tip {
        padding: 13px 0 10px !important;
      }
    </style>
    <script>
      const getParameterByName = (name, url) => { // eslint-disable-line no-unused-vars
        if (!url) {
          url = window.location.href
        }
        name = name.replace(/[[\]]/g, "\\$&")
        const regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)")
        const results = regex.exec(url)
        if (!results) return null
        if (!results[2]) return ''
        return decodeURIComponent(results[2].replace(/\+/g, " "))
      }
      window.query = getParameterByName
    </script>
  </head>
  <body>
    <div class="header">
      <a href="https://red5pro.com" class="logo" target="_blank">
        <img class="company-logo" src="images/red5pro_logo.svg" alt="Red5 Pro">
      </a>
    </div>
    <div class="source-code">
      <a href="https://github.com/red5pro/red5pro-jwplayer-provider" class="source-code-link" target="_blank">Source Code</a>
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="97.5px" viewBox="0 0 100 97.5" enable-background="new 0 0 100 97.5" xml:space="preserve">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M50,0C22.4,0,0,22.4,0,50c0,22.1,14.3,40.8,34.2,47.4
          	c2.5,0.5,3.4-1.1,3.4-2.4c0-1.2,0-4.3-0.1-8.5c-13.9,3-16.8-6.7-16.8-6.7c-2.3-5.8-5.6-7.3-5.6-7.3c-4.5-3.1,0.3-3,0.3-3
          	c5,0.4,7.7,5.2,7.7,5.2c4.5,7.6,11.7,5.4,14.6,4.2c0.5-3.2,1.7-5.4,3.2-6.7c-11.1-1.3-22.8-5.6-22.8-24.7c0-5.5,1.9-9.9,5.1-13.4
          	c-0.5-1.3-2.2-6.3,0.5-13.2c0,0,4.2-1.3,13.7,5.1c4-1.1,8.3-1.7,12.5-1.7c4.2,0,8.5,0.6,12.5,1.7c9.5-6.5,13.7-5.1,13.7-5.1
          	c2.7,6.9,1,12,0.5,13.2c3.2,3.5,5.1,8,5.1,13.4c0,19.2-11.7,23.4-22.8,24.7c1.8,1.5,3.4,4.6,3.4,9.3c0,6.7-0.1,12.1-0.1,13.7
          	c0,1.3,0.9,2.9,3.4,2.4C85.7,90.8,100,72.1,100,50C100,22.4,77.6,0,50,0z"></path>
      </svg>
    </div>
    <div class="info-container">
      <p class="info">
        This is a basic example of subscribing to a live stream using the <a href="https://red5pro.com" target="_blank">Red5 Pro</a> HTML SDK to playback video in a <a href="https://www.jwplayer.com/" target="_blank">JW Player</a>.
      </p>
    </div>
    <div class="settings-container">
      <p class="settings-field">
        <label for="host-field">Host:</label>
        <input type="text" id="host-field" name="host-field" placeholder="your.red5pro.baseurl">
      </p>
      <p class="settings-field">
        <label for="streamname-field">Stream Name:</label>
        <input type="text" id="streamname-field" name="streamname-field" placeholder="streamName">
        <button id="submit-button">Play</button>
      </p>
    </div>
    <div class="info-container">
      <div class="info">
        <p class="instruction-info">To use this demo:</p>
        <ol class="instruction-list">
          <li>Start a live broadcast on your <a href="https://red5pro.com" target="_blank">Red5 Pro</a> server from another tab, browser or Mobile Device.</li>
          <li>Enter the location of your server in the <strong>Host</strong> field.</li>
          <li>Enter the stream name of the live broadcast in the <strong>Stream Name</strong> field.</li>
          <li>Click the <strong>PLAY</strong> button!</li>
        </ol>
      </div>
    </div>
    <div id="video-container"></div>
    <div class="events-container hidden">
      <p id="events-field">On Hold.</p>
    </div>
    <script src="lib/jwplayer/jwplayer.js"></script>
    <script src="lib/red5pro/red5pro-sdk.min.js"></script>
    <script src="script/red5pro-jwplayer-provider.bundle.js"></script>
    <script type="text/javascript">

      const playButton = document.getElementById('submit-button')
      const eventsField = document.getElementById('events-field')
      const eventContainer = document.getElementsByClassName('events-container')[0]
      const infoContainers = document.getElementsByClassName('info-container')

      const setSetting = (id, value) => {
        document.getElementById(id).value = value
      }
      const getSetting = (id) => {
        return document.getElementById(id).value
      }
      const startPlayback = () => {
        const streamName = getSetting('streamname-field') || 'stream1'
        const hostURI = getSetting('host-field') || 'your.red5pro.baseurl'
        const pMatch = hostURI.match(/^http[s]?/)
        const hMatch = hostURI.match(/^http[s]?:\/\/(.*)+/)
        const protocol = (pMatch && pMatch.length > 0 && pMatch[1] === 'http') ? 'ws' : 'wss'
        const host = (hMatch && hMatch.length > 0) ? hMatch[1] : hostURI
        const port = protocol === 'http' ? 5080 : 443
        eventContainer.classList.remove('event-error')
        eventsField.innerText = 'On Hold.'
        // Define the file extension with `red5pro` and the
        //       red5pro-jwplayer-provider will recognize the support.
        const player = jwplayer('video-container')
              .setup({
                stretching: 'fill',
                autostart: 'viewable',
                mute: true,
                file: `${streamName}.red5pro`, // will stripe extension and use name as streamName
                red5pro: {
                  protocol: protocol,
                  host: host,
                  port: port,
                  app: 'live',
                  mediaElementId: 'red5pro-subscriber'
                }
              })
              .on('all', function(type, event) {
                if (type.match(/^red5pro:/)) {
                  eventsField.innerText = event.sourceError ? event.message : event.eventType
                  eventContainer.classList.add(event.sourceError ? 'event-error' : 'event-normal')
                }
                if (type !== 'time') {
                  console.warn(type, event)
                }
              })

        eventContainer.classList.remove('hidden')
        Array.from(infoContainers).forEach(el => {
          el.classList.add('hidden')
        })
      }

      setSetting('host-field', query('host') || 'your.red5pro.baseurl')
      setSetting('streamname-field', query('streamName') || 'stream1')

      playButton.addEventListener('click', (event) => {
        startPlayback()
        return false
      })

    </script>
  </body>
</html>