index.html 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <html>
  2. <head>
  3. <title>SRS</title>
  4. <meta charset="utf-8">
  5. <style>
  6. .code {
  7. background-color: rgb(217, 222, 227);
  8. padding: 2px;
  9. overflow: auto;
  10. font-size: 85%;
  11. line-height: 1.45;
  12. border-radius: 6px;
  13. word-break: normal;
  14. word-wrap: normal;
  15. box-sizing: border-box;
  16. white-space: pre;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <div>
  22. <h2>Status</h2>
  23. <p>Congratulations! <a href="https://github.com/ossrs/srs">SRS</a> works!</p>
  24. <hr/>
  25. <h2>English</h2>
  26. <p>
  27. 1. Please publish stream by:
  28. <ul>
  29. <li>
  30. Recommend <a href="https://obsproject.com/download">OBS</a>, set Service to <span class="code">Custom</span>,
  31. set Server to <span id="url3" class="code"></span>
  32. and Stream Key to <span id="url4" class="code"></span>
  33. </li>
  34. <li>
  35. You can also use <a href="https://ffmpeg.org/download.html">FFmpeg</a>:
  36. <span id="url" class="code"></span>
  37. </li>
  38. <li>
  39. Or use WHIP to publish stream, please click <span class="code">SRS Player</span> link below.
  40. </li>
  41. </ul>
  42. </p>
  43. <p>2. Choose <a id="enPlayer" href="#">SRS player</a> to play the stream in different protocols.</p>
  44. <p>3. (Optional) Click <a id="enConsole" href="#">here</a> to enter SRS console.</p>
  45. <hr/>
  46. <h2>简体中文</h2>
  47. <p>
  48. 1. 请选择推流方式:
  49. <ul>
  50. <li>
  51. 推荐<a href="https://obsproject.com/download">OBS</a>,设置服务为 <span class="code">自定义</span>,
  52. 设置推流地址(服务器)为 <span id="url5" class="code"></span>,
  53. 设置推流密钥(串流密钥)为 <span id="url6" class="code"></span>
  54. </li>
  55. <li>
  56. 或者用<a href="https://ffmpeg.org/download.html">FFmpeg</a>推流到地址:
  57. <span id="url2" class="code"></span>
  58. </li>
  59. <li>
  60. 或者使用WHIP推流,请点击下面的 <span class="code">SRS播放器</span> 链接。
  61. </li>
  62. </ul>
  63. </p>
  64. <p>2. 点击选择 <a id="cnPlayer" href="#">SRS播放器</a></p>
  65. <p>3. 点击进入 <a id="cnConsole" href="#">SRS控制台</a> (可选) </p>
  66. <hr/>
  67. <p><a href="https://github.com/ossrs/srs">SRS Team &copy; 2013~2024</a></p>
  68. </div>
  69. <script type="text/javascript">
  70. // Build RTMP url.
  71. if (true) {
  72. const server = `rtmp://${window.location.hostname}/live`;
  73. const key = `livestream`;
  74. const rtmpUrl = `${server}/${key}`;
  75. document.getElementById('url2').innerText = document.getElementById('url').innerText = `ffmpeg -re -i ./doc/source.200kbps.768x320.flv -c copy -f flv ${rtmpUrl}`;
  76. document.getElementById('url5').innerText = document.getElementById('url3').innerText = server;
  77. document.getElementById('url6').innerText = document.getElementById('url4').innerText = key;
  78. }
  79. // Build console url.
  80. if (true) {
  81. // The prefix for default website.
  82. const prefix = `${window.location.protocol}//${window.location.host}`;
  83. // If not 8080, user should proxy to the default port.
  84. const query = parseInt(window.location.port) === 8080 ? `?port=1985` : '';
  85. const enUrl = `${prefix}/console/en_index.html#/summaries${query}`;
  86. const cnUrl = `${prefix}/console/ng_index.html#/summaries${query}`;
  87. document.getElementById("enConsole").setAttribute('href', enUrl);
  88. document.getElementById("cnConsole").setAttribute('href', cnUrl);
  89. }
  90. // The player url.
  91. if (true) {
  92. const prefix = `players/?schema=${window.location.protocol.replace(':', '')}`;
  93. const httpPort = window.location.port || (window.location.protocol === 'http:' ? 80 : 443);
  94. // If not 8080, user should proxy both stream and API to the default port.
  95. const query = parseInt(window.location.port) === 8080 ? '' : `&port=${httpPort}&api=${httpPort}`;
  96. document.getElementById("enPlayer").setAttribute('href', `${prefix}${query}`);
  97. document.getElementById("cnPlayer").setAttribute('href', `${prefix}${query}`);
  98. }
  99. </script>
  100. </body>