API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Oct 14th, 2014
217
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.98 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
  5. <meta charset="UTF-8">
  6. <title>API User.Demo Website - p.corder</title>
  7. <link rel="stylesheet" type="text/css" href="style.css"/>
  8. <link rel="stylesheet" href="jquery-ui-1.9.2.custom.css">
  9. </head>
  10. <body>
  11. <div id="wrapper-out">
  12. <div id="wrapper-center">
  13. <div id="header">
  14. <a id="logo" href="http://pixel2media.com" target="_blank"></a>
  15. </div>
  16. <div id="navigation">
  17. <a class="navActive" href="#main">Main</a>
  18. <a href="#system">System</a>
  19. <a href="#matterhorn">Matterhorn</a>
  20. <a href="#kaltura">Kaltura</a>
  21. <a href="#ftp">FTP</a>
  22. <a class="textlink" href="manual.pdf" target="_blank">Documentation</a>
  23. <a class=" textlink" href="http://www.pixel2media.com" target="_blank">Contact</a>
  24. </div>
  25. <div id="content-container">
  26. <div class="content" id="main">
  27. <table cellpadding="0px" cellspacing="0px"
  28. style="width: 100%; border: 1px solid #999; margin: 0 0 0 0; overflow: auto;">
  29. <thead>
  30. <tr class="method_header">
  31. <th colspan="4" scope="col" class="method_header_left">Main control</th>
  32. </tr>
  33. </thead>
  34. <tr>
  35. <td style="padding: 10px; border: 0px">
  36. <pre style="color: #0099FF">record</pre>
  37. <button id="bt_record_start" formaction="/api/record" post="action=start">start</button>
  38. <button formaction="/api/record" post="action=pause">pause</button>
  39. <button id="bt_record_stop" formaction="/api/record" post="action=stop">stop</button>
  40. </td>
  41.  
  42. <td style="padding: 10px; border: 0px;">
  43. <pre style="color: #0099FF">stream</pre>
  44. <button id="bt_stream_start" formaction="/api/stream" post="action=start">start</button>
  45. <button id="bt_stream_stop" formaction="/api/stream" post="action=stop">stop</button>
  46. </td>
  47. </tr>
  48. <tr>
  49. <td> <!-- Audio Mixer -->
  50. <form class="form_test_form" action="/api/audio" method="post">
  51. <div style="float: left; margin-left: 10px">
  52. <pre style="color: #0099FF; margin-left: -5px; margin-bottom: -10px;">MicL</pre>
  53. <p style="width: 20px; margin-bottom: 10px">
  54. <input type="text" name="MicL" value="" id="micl" readonly
  55. style="border: 0; width: 20px; color:#0099FF; font-weight:bold; display: inline-block;"/>
  56. <input type="text" value="db" id="micl_db" readonly
  57. style="border: 0; width: 20px; color: #0099FF; font-weight: bold; display: inline-block; "/>
  58. </p>
  59. <div id="slider-vertical_micl"></div>
  60. <p><input style="margin-left: -2px" type="checkbox" name="option1" checked="" id="muteMicL">
  61. </div>
  62.  
  63. <div style="float: left; margin-left: 10px">
  64. <pre style="color: #0099FF; margin-left: 0px; margin-bottom: -10px;">MicR</pre>
  65. <p style="width: 20px; margin-bottom: 10px; margin-left: 10px">
  66. <input type="text" id="micr" readonly
  67. style="border:0; width: 20px; color:#0099FF; font-weight:bold; display: inline-block"/>
  68. <input type="text" value="db" id="micr_db" readonly
  69. style="border: 0; width: 20px; color: #0099FF; font-weight: bold; display: inline-block; "/>
  70. </p>
  71. <div style="margin-left: 10px" id="slider-vertical_micr"></div>
  72. <p><input style="margin-left: 10px" type="checkbox" name="option1" checked id="muteMicR">
  73. </div>
  74.  
  75. <div style="float: left; margin-left: 10px">
  76. <pre style="color: #0099FF; margin-left: 0px; margin-bottom: -10px;">HDMI1</pre>
  77. <p style="width: 20px; margin-bottom: 10px; margin-left: 10px">
  78. <input type="text" id="hdmi1" readonly
  79. style="border:0; width: 20px; color:#0099FF; font-weight:bold; display: inline-block"/>
  80. <input type="text" value="db" id="hdmi1_db" readonly
  81. style="border: 0; width: 20px; color: #0099FF; font-weight: bold; display: inline-block; "/>
  82. </p>
  83. <div style="margin-left: 10px" id="slider-vertical_hdmi1"></div>
  84. <p><input style="margin-left: 10px" type="checkbox" name="option1" checked id="muteHDMI1">
  85. </div>
  86.  
  87. <div style="float: left; margin-left: 10px">
  88. <pre style="color: #0099FF; margin-left: 0px; margin-bottom: -10px;">HDMI2</pre>
  89. <p style="width: 20px; margin-bottom: 10px; margin-left: 10px">
  90. <input type="text" id="hdmi2" readonly
  91. style="border:0; width: 20px; color:#0099FF; font-weight:bold; display: inline-block"/>
  92. <input type="text" value="db" id="hdmi2_db" readonly
  93. style="border: 0; width: 20px; color: #0099FF; font-weight: bold; display: inline-block; "/>
  94. </p>
  95. <div style="margin-left: 10px" id="slider-vertical_hdmi2"></div>
  96. <p><input style="margin-left: 10px" type="checkbox" name="option1" checked id="muteHDMI2">
  97. </div>
  98.  
  99. <div style="float: left; margin-left: 10px">
  100. <pre style="color: #0099FF; margin-left: 0px; margin-bottom: -10px;">Line1</pre>
  101. <p style="width: 20px; margin-bottom: 10px; margin-left: 10px">
  102. <input type="text" id="line1" readonly
  103. style="border:0; width: 20px; color:#0099FF; font-weight:bold; display: inline-block"/>
  104. <input type="text" value="db" id="line1_db" readonly
  105. style="border: 0; width: 20px; color: #0099FF; font-weight: bold; display: inline-block; "/>
  106. </p>
  107. <div style="margin-left: 10px" id="slider-vertical_line1"></div>
  108. <p><input style="margin-left: 10px" type="checkbox" name="option1" checked id="muteLine1">
  109. </div>
  110.  
  111. <div style="float: left; margin-left: 10px">
  112. <pre style="color: #0099FF; margin-left: 0px; margin-bottom: -10px;">Line2</pre>
  113. <p style="width: 20px; margin-bottom: 10px; margin-left: 10px">
  114. <input type="text" id="line2" readonly
  115. style="border:0; width: 20px; color:#0099FF; font-weight:bold; display: inline-block"/>
  116. <input type="text" value="db" id="line2_db" readonly
  117. style="border: 0; width: 20px; color: #0099FF; font-weight: bold; display: inline-block; "/>
  118. </p>
  119. <div style="margin-left: 10px" id="slider-vertical_line2"></div>
  120. <p><input style="margin-left: 10px" type="checkbox" name="option1" checked id="muteLine2">
  121. </div>
  122.  
  123. <div style="float: left; margin-left: 10px">
  124. <pre style="color: #0099FF; margin-left: 8px; margin-bottom: -10px;">W1</pre>
  125. <p style="width: 20px; margin-bottom: 10px; margin-left: 10px">
  126. <input type="text" id="w1" readonly
  127. style="border:0; width: 21px; color:#0099FF; font-weight:bold; display: inline-block"/>
  128. <input type="text" value="db" id="w1_db" readonly
  129. style="border: 0; width: 20px; color: #0099FF; font-weight: bold; display: inline-block; "/>
  130. </p>
  131. <div style="margin-left: 10px" id="slider-vertical_w1"></div>
  132. <p><input style="margin-left: 10px" type="checkbox" name="option1" checked id="muteW1">
  133. </div>
  134. </form>
  135. </td> <!-- Audio Mixer End -->
  136. <td style="padding: 30px"> <!-- Template and Overlay -->
  137. <pre style="color: #0099FF">template</pre>
  138. <div>
  139. <form id="form20" class="form_test_form" action="/api/template" method="post">
  140. <input class="form_field form_param_path form_param_required form_param_submit" name="template"
  141. type="text" value="" size="2"/>
  142. <input type="submit" value="template"/></form>
  143. </div>
  144. <br/>
  145. <div>
  146. <button formaction="/api/template" post="template=1">T1</button>
  147. <button formaction="/api/template" post="template=2">T2</button>
  148. <button formaction="/api/template" post="template=3">T3</button>
  149. <br/>
  150. <button formaction="/api/template" post="template=4">T4</button>
  151. <button formaction="/api/template" post="template=5">T5</button>
  152. <button formaction="/api/template" post="template=6">T6</button>
  153. </div>
  154. <pre style="color: #0099FF">overlay</pre>
  155. <div>
  156. <form class="form_test_form" action="/api/template" method="post">
  157. <input class="form_field form_param_path form_param_required form_param_submit" name="overlay"
  158. type="text" value="" size="3"/>
  159. <input style="width: 62px" type="submit" value="overlay"/></form>
  160. </div>
  161. <br/>
  162. <div>
  163. <button formaction="/api/template" post="overlay=0">0</button>
  164. <button formaction="/api/template" post="overlay=1">1</button>
  165. <button formaction="/api/template" post="overlay=2">2</button>
  166. <button formaction="/api/template" post="overlay=3">3</button>
  167. <button formaction="/api/template" post="overlay=4">4</button>
  168. <br/>
  169. <button formaction="/api/template" post="overlay=5">5</button>
  170. <button formaction="/api/template" post="overlay=6">6</button>
  171. <button formaction="/api/template" post="overlay=7">7</button>
  172. <button formaction="/api/template" post="overlay=8">8</button>
  173. <button formaction="/api/template" post="overlay=9">9</button>
  174. </div>
  175. </td><!-- Template and Overlay End -->
  176. <td style="padding:30px;"> <!-- Statistics -->
  177. <pre width="50px" style="color:#0099FF" scope="row">stream <input style="margin-left: 30px; border: 0px" class="stream-field" readonly/></pre>
  178. <pre width="50px" style="color:#0099FF" scope="row">record <input style="margin-left: 30px; border: 0px" class="stream-field" readonly/></pre>
  179. </td> <!-- Statistics End -->
  180. </tr>
  181. </table>
  182. </div>
  183. </div>
  184. <div id="footer">
  185. <table width="100%">
  186. <tr>
  187. <div style="float:left;">user-version 1.0</div>
  188. <div style="float:right;">Copyright pixel2media GmbH, 2014</div>
  189. </tr>
  190. </table>
  191. </div>
  192. <input style="visibility: hidden;" id="authpass"
  193. class="form_field form_param_path form_param_required form_param_submit"
  194. name="password"
  195. type="text" value="8741d60042e248eb97f0a426fb16fa21" size="0"/>
  196. </div>
  197. </div>
  198. </body>
  199. </html>
  200.  
  201. <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  202. <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
  203. <script>
  204.  
  205. $(function () {
  206. $("#slider-vertical_micl").slider({
  207. orientation: "vertical",
  208. range: "min",
  209. min: 0,
  210. max: 60,
  211. step: 2,
  212. slide: function (event, ui) {
  213. $("#micl").val(ui.value);
  214. }
  215. });
  216. $("#micl").val($("#slider-vertical_micl").slider("value"));
  217. });
  218.  
  219. $(function () {
  220. $("#slider-vertical_micr").slider({
  221. orientation: "vertical",
  222. range: "min",
  223. min: 0,
  224. max: 60,
  225. step: 2,
  226. slide: function (event, ui) {
  227. $("#micr").val(ui.value);
  228. }
  229. });
  230. $("#micr").val($("#slider-vertical_micr").slider("value"));
  231. });
  232.  
  233. $(function () {
  234. $("#slider-vertical_hdmi1").slider({
  235. orientation: "vertical",
  236. range: "min",
  237. min: -42,
  238. max: 42,
  239. step: 2,
  240. slide: function (event, ui) {
  241. $("#hdmi1").val(ui.value);
  242. }
  243. });
  244. $("#hdmi1").val($("#slider-vertical_hdmi1").slider("value"));
  245. });
  246.  
  247. $(function () {
  248. $("#slider-vertical_hdmi2").slider({
  249. orientation: "vertical",
  250. range: "min",
  251. min: -42,
  252. max: 42,
  253. step: 2,
  254. slide: function (event, ui) {
  255. $("#hdmi2").val(ui.value);
  256. }
  257. });
  258. $("#hdmi2").val($("#slider-vertical_hdmi2").slider("value"));
  259. });
  260.  
  261. $(function () {
  262. $("#slider-vertical_line1").slider({
  263. orientation: "vertical",
  264. range: "min",
  265. min: -12,
  266. max: 12,
  267. step: 2,
  268. slide: function (event, ui) {
  269. $("#line1").val(ui.value);
  270. }
  271. });
  272. $("#line1").val($("#slider-vertical_line1").slider("value"));
  273. });
  274.  
  275. $(function () {
  276. $("#slider-vertical_line2").slider({
  277. orientation: "vertical",
  278. range: "min",
  279. min: -12,
  280. max: 12,
  281. step: 2,
  282. slide: function (event, ui) {
  283. $("#line2").val(ui.value);
  284. }
  285. });
  286. $("#line2").val($("#slider-vertical_line2").slider("value"));
  287. });
  288.  
  289. $(function () {
  290. $("#slider-vertical_w1").slider({
  291. orientation: "vertical",
  292. range: "min",
  293. min: 0,
  294. max: 0,
  295. step: 2,
  296. slide: function (event, ui) {
  297. $("#w1").val(ui.value);
  298. }
  299. });
  300. $("#w1").val($("#slider-vertical_w1").slider("value"));
  301. });
  302.  
  303. setInterval(function(){
  304. $.ajax({
  305. type: "GET",
  306. url: "/api/audio",
  307. processData: true,
  308. dataType: 'text',
  309. cache: false,
  310. headers: ({"Auth-Secret": $("input[id='authpass']").val()}),
  311. success: function (data, textStatus, request) {
  312. var audio = jQuery.parseJSON(data);
  313. $("input[id='micl']").val(extractNumberFromDBVal(audio.MicL));
  314. $("#slider-vertical_micl").slider( "option", "value", extractNumberFromDBVal(audio.MicL));
  315.  
  316. if ((audio.MicL) == "mute"); {
  317. $(document.getElementById("muteMicL").checked = false);
  318. $("#slider-vertical_micl").slider("option", "disabled", true);
  319. }
  320.  
  321. if ((audio.MicL) != "mute"); {
  322. $(document.getElementById("muteMicL").checked = true);
  323. $("#slider-vertical_micl").slider("option", "disabled", false);
  324. }
  325. var $form = $this.find(".form_test_form");
  326. var submitParams = $form.serialize();
  327. if ($( "#slider-vertical_micl" ).mouse( "_mouseDrag" ));{
  328. $.ajax({
  329. type: "POST",
  330. url: url,
  331. processData: true,
  332. dataType: 'text',
  333. cache: false,
  334. data: submitParams,
  335. headers:({"Auth-Secret":$("input[id='authpass']").val()}),
  336. success: function (data, textStatus, request) {
  337. }
  338.  
  339. });
  340. }
  341.  
  342. }
  343. });
  344. }, 10000);
  345.  
  346. function extractNumberFromDBVal(number){
  347. var res = number.match(/(-?\d+)/);
  348. return (res !== null)?res[0]:null;
  349. }
  350. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!