胡斌 / liveAssistant_web_demo

转到一个项目
Toggle navigation Toggle navigation pinning
胡斌
8621d38d 1 parent be455b6b

add connect,disconnect,clear buttion

内嵌 并排对比
正在显示 4 个修改的文件 包含 160 行增加 和 372 行删除
@@ -21,7 +21,7 @@ @@ -21,7 +21,7 @@
21 <!-- saved from url=(0014)about:internet --> 21 <!-- saved from url=(0014)about:internet -->
22 <html xmlns="http://www.w3.org/1999/xhtml"> 22 <html xmlns="http://www.w3.org/1999/xhtml">
23 <head> 23 <head>
24 -<title>Adobe Flash Media Server</title> 24 +<title>LiveAssistant Demo</title>
25 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 25 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
26 26
27 <style type="text/css"> 27 <style type="text/css">
@@ -135,12 +135,97 @@ a:active { @@ -135,12 +135,97 @@ a:active {
135 <script language="javascript"> 135 <script language="javascript">
136 136
137 var queryParameters = new Array(); 137 var queryParameters = new Array();
138 - var flashVars = ""; 138 + var flashVars = "";
139 var tag = ""; 139 var tag = "";
140 var url = ""; 140 var url = "";
  141 + var output;
  142 + var wsState = "idle";
  143 +
  144 + function testWebSocket()
  145 + {
  146 + websocket = new WebSocket(wsUri);
  147 + websocket.onopen = function(evt) { onOpen(evt) };
  148 + websocket.onclose = function(evt) { onClose(evt) };
  149 + websocket.onmessage = function(evt) { onMessage(evt) };
  150 + websocket.onerror = function(evt) { onError(evt) };
  151 + }
  152 +
  153 + function onOpen(evt)
  154 + {
  155 + writeToScreen("websocket connected");
  156 + wsState = "connected";
  157 + // doSend("get_mic_vol");
  158 + }
  159 +
  160 + function onClose(evt)
  161 + {
  162 + writeToScreen("DISCONNECTED");
  163 + wsState = "idle";
  164 + }
  165 +
  166 + function onMessage(evt)
  167 + {
  168 + if(typeof(evt.data)=="string"){
  169 + writeToScreen('<span style="color: blue;">receive string</span>');
  170 + }
  171 + else{
  172 + writeToScreen('<span style="color: blue;">receive binary</span>');
  173 + var reader = new FileReader();
  174 + reader.onload = function(evt){
  175 + if(evt.target.readyState == FileReader.DONE){
  176 +
  177 + var buffer = evt.target.result;
  178 +
  179 + writeToScreen('<span style="color: blue;">receive string ' + buffer.byteLength +'</span>');
  180 + var result = new Uint16Array(buffer, 0, 1);
  181 + var byte_order = new Uint8Array(buffer, 2, 1);
  182 + var data_len = new Uint32Array(buffer, 4, 1);
  183 + var data = new Uint8Array(buffer, 8, buffer.byteLength - 8);
  184 + var data_sting = new TextDecoder("utf-8").decode(data)
  185 + writeToScreen('<span style="color: blue;">RESPONSE: ' + data_sting + ' </span>');
  186 + }
  187 + }
  188 + reader.readAsArrayBuffer(evt.data);
  189 + }
  190 + websocket.close();
  191 + }
  192 +
  193 + function onError(evt)
  194 + {
  195 + writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
  196 + }
  197 +
  198 + function doSend(message)
  199 + {
  200 + writeToScreen("SENT: " + message);
  201 + var cmd_type = 54;//get mic volume
  202 + var cmd_buf_len = 2 + 1*2 + 4;
  203 + var buffer = new ArrayBuffer(cmd_buf_len);
  204 + var cmd = new Uint16Array(buffer, 0, 1);
  205 + var byte_order = new Uint8Array(buffer, 2, 1);
  206 + var data_len = new Uint32Array(buffer, 4, 1);
  207 + cmd[0] = cmd_type;
  208 + byte_order[0] = 0;
  209 + data_len[0] = 0;
  210 +
  211 + websocket.send(buffer);
  212 + }
  213 +
  214 + function writeToScreen(message)
  215 + {
  216 + var pre = document.createElement("p");
  217 + pre.style.wordWrap = "break-word";
  218 + pre.className = "style75";
  219 + pre.innerHTML = message;
  220 + output.appendChild(pre);
  221 + }
141 222
142 window.onload = function () 223 window.onload = function ()
143 { 224 {
  225 + output = document.getElementById("output");
  226 +
  227 + document.getElementById( 'websocketURL' ).value = "ws://127.0.0.1:8090";
  228 +
144 document.getElementById( 'inputURL' ).value = queryParameters['source']; 229 document.getElementById( 'inputURL' ).value = queryParameters['source'];
145 document.getElementById('embedField').innerHTML = tag; 230 document.getElementById('embedField').innerHTML = tag;
146 231
@@ -163,8 +248,6 @@ a:active { @@ -163,8 +248,6 @@ a:active {
163 248
164 function initialise() 249 function initialise()
165 { 250 {
166 -  
167 -  
168 function getUrlParam( name ) 251 function getUrlParam( name )
169 { 252 {
170 name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); 253 name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
@@ -246,7 +329,7 @@ a:active { @@ -246,7 +329,7 @@ a:active {
246 329
247 url += ("&type=" + type); 330 url += ("&type=" + type);
248 331
249 - document.getElementById('playBtn').href="videoplayer.html?" + url; 332 + document.getElementById('playBtn').href="demo.html?" + url;
250 333
251 } 334 }
252 335
@@ -267,6 +350,34 @@ a:active { @@ -267,6 +350,34 @@ a:active {
267 } 350 }
268 } 351 }
269 } 352 }
  353 +
  354 + function connectLiveServ()
  355 + {
  356 + var url = document.getElementById('websocketURL').value;
  357 +
  358 + if( wsState == "idle"){
  359 + wsState = "connecting";
  360 + writeToScreen("connecting " + url);
  361 + websocket = new WebSocket(url);
  362 + websocket.onopen = function(evt) { onOpen(evt) };
  363 + websocket.onclose = function(evt) { onClose(evt) };
  364 + websocket.onmessage = function(evt) { onMessage(evt) };
  365 + websocket.onerror = function(evt) { onError(evt) };
  366 + }
  367 + }
  368 +
  369 + function disconnectLiveServ()
  370 + {
  371 + if( wsState == "connected"){
  372 + wsState = "closing";
  373 + websocket.close();
  374 + }
  375 + }
  376 +
  377 + function clearOutput()
  378 + {
  379 + output.innerHTML = "";
  380 + }
270 381
271 initialise(); 382 initialise();
272 383
@@ -286,20 +397,7 @@ a:active { @@ -286,20 +397,7 @@ a:active {
286 <tr valign="top"> 397 <tr valign="top">
287 <td rowspan="4" bgcolor="#191919"><img src="images/spacer.gif" width="55" height="50" /></td> 398 <td rowspan="4" bgcolor="#191919"><img src="images/spacer.gif" width="55" height="50" /></td>
288 <td rowspan="4"></td> 399 <td rowspan="4"></td>
289 - <td height="327" colspan="3" bgcolor="#191919"><map name="index_r4_c3MapMap" id="index_r4_c3MapMap">  
290 - <area shape="rect" coords="32,160,308,181" href="fms_adminConsole.htm" target="_blank" />  
291 - <area shape="rect" coords="316,161,433,181" href="#" />  
292 - </map>  
293 - <map name="index_r2_c4MapMap" id="index_r2_c4MapMap">  
294 - <area shape="rect" coords="20,21,55,61" href="http://www.adobe.com" target="_blank" />  
295 - </map>  
296 - <map name="index_r4_c3Map" id="index_r4_c3Map">  
297 - <area shape="rect" coords="32,160,308,181" href="fms_adminConsole.htm" target="_blank" />  
298 - <area shape="rect" coords="316,161,433,181" href="#" />  
299 - </map>  
300 - <map name="index_r2_c4Map" id="index_r2_c4Map">  
301 - <area shape="rect" coords="20,21,55,61" href="http://www.adobe.com" target="_blank" />  
302 - </map> 400 + <td height="327" colspan="3" bgcolor="#191919">
303 <table width="100%" border="0" cellspacing="0" cellpadding="0"> 401 <table width="100%" border="0" cellspacing="0" cellpadding="0">
304 <tr> 402 <tr>
305 <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> 403 <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
@@ -308,16 +406,7 @@ a:active { @@ -308,16 +406,7 @@ a:active {
308 <tr> 406 <tr>
309 <td width="93%"><table width="98%" border="0" cellpadding="0" cellspacing="0"> 407 <td width="93%"><table width="98%" border="0" cellpadding="0" cellspacing="0">
310 408
311 - <tr>  
312 - <td colspan="4" align="left" bgcolor="#191919"><table width="100%" border="0" cellspacing="0" cellpadding="0">  
313 - <tr>  
314 - <td><img src="images/top_bar_border.gif" width="1000" height="15" /></td>  
315 - </tr>  
316 - <tr>  
317 - <td><img src="images/title.gif" width="1000" height="66" border="0" usemap="#Map" /></td>  
318 - </tr>  
319 - </table></td>  
320 - </tr> 409 +
321 <tr> 410 <tr>
322 <td colspan="4" align="left" bgcolor="#191919"><img src="images/canvas.gif" alt="" name="index_r4_c3" width="1000" height="39" border="0" id="index_r4_c3"/></td> 411 <td colspan="4" align="left" bgcolor="#191919"><img src="images/canvas.gif" alt="" name="index_r4_c3" width="1000" height="39" border="0" id="index_r4_c3"/></td>
323 </tr> 412 </tr>
@@ -346,9 +435,10 @@ a:active { @@ -346,9 +435,10 @@ a:active {
346 <a href="http://www.adobe.com/go/getflashplayer/" style="color:black"><img src="images/ERROR_getFlashPlayer.gif" width="640" height="377" /></a> 435 <a href="http://www.adobe.com/go/getflashplayer/" style="color:black"><img src="images/ERROR_getFlashPlayer.gif" width="640" height="377" /></a>
347 436
348 </noscript> 437 </noscript>
349 - </td>  
350 - </tr>  
351 - </table></td> 438 + </td>
  439 + </tr>
  440 + </table>
  441 + </td>
352 <td width="36%"><table width="100%" border="0" cellspacing="0" cellpadding="0"> 442 <td width="36%"><table width="100%" border="0" cellspacing="0" cellpadding="0">
353 <tr> 443 <tr>
354 <td width="359" height="186" background="images/upperright_03.gif"><table width="358" border="0" cellspacing="0" cellpadding="0"> 444 <td width="359" height="186" background="images/upperright_03.gif"><table width="358" border="0" cellspacing="0" cellpadding="0">
@@ -369,7 +459,7 @@ a:active { @@ -369,7 +459,7 @@ a:active {
369 <tr> 459 <tr>
370 <td><img src="images/spacer.gif" width="20" height="10" /></td> 460 <td><img src="images/spacer.gif" width="20" height="10" /></td>
371 <td id="sel1"><span class="style74">&gt;</span></td> 461 <td id="sel1"><span class="style74">&gt;</span></td>
372 - <td id="td1" class="style76"><a href="videoplayer.html?source=rtmp://localhost/vod/mp4:sample1_150kbps.f4v&type=recorded&idx=1">sample1_150kbps.f4v</a></td> 462 + <td id="td1" class="style76"><a href="demo.html?source=rtmp://localhost/vod/mp4:sample1_150kbps.f4v&type=recorded&idx=1">sample1_150kbps.f4v</a></td>
373 </tr> 463 </tr>
374 <tr> 464 <tr>
375 <td colspan="3"><img src="images/spacer.gif" width="20" height="10" /></td> 465 <td colspan="3"><img src="images/spacer.gif" width="20" height="10" /></td>
@@ -377,7 +467,7 @@ a:active { @@ -377,7 +467,7 @@ a:active {
377 <tr> 467 <tr>
378 <td><img src="images/spacer.gif" width="15" height="5" /></td> 468 <td><img src="images/spacer.gif" width="15" height="5" /></td>
379 <td id="sel2"><span class="style74">&gt;</span></td> 469 <td id="sel2"><span class="style74">&gt;</span></td>
380 - <td class="style76" id="td2"> <a href="videoplayer.html?source=rtmp://localhost/vod/mp4:sample1_500kbps.f4v&type=recorded&idx=2">sample1_500kbps.f4v</a></td> 470 + <td class="style76" id="td2"> <a href="demo.html?source=rtmp://localhost/vod/mp4:sample1_500kbps.f4v&type=recorded&idx=2">sample1_500kbps.f4v</a></td>
381 </tr> 471 </tr>
382 <tr> 472 <tr>
383 <td colspan="3"><img src="images/spacer.gif" width="20" height="5" /></td> 473 <td colspan="3"><img src="images/spacer.gif" width="20" height="5" /></td>
@@ -385,7 +475,7 @@ a:active { @@ -385,7 +475,7 @@ a:active {
385 <tr> 475 <tr>
386 <td><img src="images/spacer.gif" width="20" height="10" /></td> 476 <td><img src="images/spacer.gif" width="20" height="10" /></td>
387 <td id="sel3"><span class="style74">&gt;</span></td> 477 <td id="sel3"><span class="style74">&gt;</span></td>
388 - <td id="td3" class="style76"><a href="videoplayer.html?source=rtmp://localhost/vod/mp4:sample1_700kbps.f4v&type=recorded&idx=3">sample1_700kbps.f4v</a></td> 478 + <td id="td3" class="style76"><a href="demo.html?source=rtmp://localhost/vod/mp4:sample1_700kbps.f4v&type=recorded&idx=3">sample1_700kbps.f4v</a></td>
389 </tr> 479 </tr>
390 <tr> 480 <tr>
391 <td colspan="3"><img src="images/spacer.gif" width="20" height="5" /></td> 481 <td colspan="3"><img src="images/spacer.gif" width="20" height="5" /></td>
@@ -393,7 +483,7 @@ a:active { @@ -393,7 +483,7 @@ a:active {
393 <tr> 483 <tr>
394 <td><img src="images/spacer.gif" width="20" height="10" /></td> 484 <td><img src="images/spacer.gif" width="20" height="10" /></td>
395 <td id="sel4"><span class="style74">&gt;</span></td> 485 <td id="sel4"><span class="style74">&gt;</span></td>
396 - <td id="td4" class="style76"><a href="videoplayer.html?source=rtmp://localhost/vod/mp4:sample1_1000kbps.f4v&type=recorded&idx=4">sample1_1000kbps.f4v</a></td> 486 + <td id="td4" class="style76"><a href="demo.html?source=rtmp://localhost/vod/mp4:sample1_1000kbps.f4v&type=recorded&idx=4">sample1_1000kbps.f4v</a></td>
397 </tr> 487 </tr>
398 <tr> 488 <tr>
399 <td colspan="3"><img src="images/spacer.gif" width="20" height="5" /></td> 489 <td colspan="3"><img src="images/spacer.gif" width="20" height="5" /></td>
@@ -401,7 +491,7 @@ a:active { @@ -401,7 +491,7 @@ a:active {
401 <tr> 491 <tr>
402 <td><img src="images/spacer.gif" width="20" height="10" /></td> 492 <td><img src="images/spacer.gif" width="20" height="10" /></td>
403 <td id="sel5"><span class="style74">&gt;</span></td> 493 <td id="sel5"><span class="style74">&gt;</span></td>
404 - <td id="td5" class="style76"><a href="videoplayer.html?source=rtmp://localhost/vod/mp4:sample1_1500kbps.f4v&type=recorded&idx=5">sample1_1500kbps.f4v</a></td> 494 + <td id="td5" class="style76"><a href="demo.html?source=rtmp://localhost/vod/mp4:sample1_1500kbps.f4v&type=recorded&idx=5">sample1_1500kbps.f4v</a></td>
405 </tr> 495 </tr>
406 <tr> 496 <tr>
407 <td colspan="3"><img src="images/spacer.gif" width="20" height="5" /></td> 497 <td colspan="3"><img src="images/spacer.gif" width="20" height="5" /></td>
@@ -409,7 +499,7 @@ a:active { @@ -409,7 +499,7 @@ a:active {
409 <tr> 499 <tr>
410 <td><img src="images/spacer.gif" width="20" height="10" /></td> 500 <td><img src="images/spacer.gif" width="20" height="10" /></td>
411 <td id="sel6"><span class="style74">&gt;</span></td> 501 <td id="sel6"><span class="style74">&gt;</span></td>
412 - <td id="td6" class="style76"><a href="videoplayer.html?source=rtmp://localhost/vod/sample&type=recorded&idx=6">sample.flv</a></td> 502 + <td id="td6" class="style76"><a href="demo.html?source=rtmp://localhost/vod/sample&type=recorded&idx=6">sample.flv</a></td>
413 </tr> 503 </tr>
414 </table></td> 504 </table></td>
415 </tr> 505 </tr>
@@ -425,7 +515,7 @@ a:active { @@ -425,7 +515,7 @@ a:active {
425 <tr> 515 <tr>
426 <td><img src="images/spacer.gif" width="20" height="10" /></td> 516 <td><img src="images/spacer.gif" width="20" height="10" /></td>
427 <td id="sel7"><span class="style74">&gt;</span></td> 517 <td id="sel7"><span class="style74">&gt;</span></td>
428 - <td id="td7" class="style76"><a href="videoplayer.html?source=hds_sample1_manifest.f4m&type=recorded&idx=7" title="Only works when viewed from localhost.">hds_sample1_manifest.f4m</a></td> 518 + <td id="td7" class="style76"><a href="demo.html?source=hds_sample1_manifest.f4m&type=recorded&idx=7" title="Only works when viewed from localhost.">hds_sample1_manifest.f4m</a></td>
429 </tr> 519 </tr>
430 <tr> 520 <tr>
431 <td colspan="2"><img src="images/spacer.gif" width="20" height="5" /></td> 521 <td colspan="2"><img src="images/spacer.gif" width="20" height="5" /></td>
@@ -434,7 +524,7 @@ a:active { @@ -434,7 +524,7 @@ a:active {
434 </tr><tr> 524 </tr><tr>
435 <td><img src="images/spacer.gif" width="20" height="10" /></td> 525 <td><img src="images/spacer.gif" width="20" height="10" /></td>
436 <td id="sel8"><span class="style74">&gt;</span></td> 526 <td id="sel8"><span class="style74">&gt;</span></td>
437 - <td id="td8" class="style76"><a href="videoplayer.html?source=rtmp_sample1_manifest.f4m&type=recorded&idx=8" title="Only works when viewed from localhost.">rtmp_sample1_manifest.f4m</a></td> 527 + <td id="td8" class="style76"><a href="demo.html?source=rtmp_sample1_manifest.f4m&type=recorded&idx=8" title="Only works when viewed from localhost.">rtmp_sample1_manifest.f4m</a></td>
438 </tr> 528 </tr>
439 <tr> 529 <tr>
440 <td colspan="2"><img src="images/spacer.gif" width="20" height="5" /></td> 530 <td colspan="2"><img src="images/spacer.gif" width="20" height="5" /></td>
@@ -442,7 +532,7 @@ a:active { @@ -442,7 +532,7 @@ a:active {
442 <tr> 532 <tr>
443 <td><img src="images/spacer.gif" width="20" height="10" /></td> 533 <td><img src="images/spacer.gif" width="20" height="10" /></td>
444 <td id="sel9"><span class="style74">&gt;</span></td> 534 <td id="sel9"><span class="style74">&gt;</span></td>
445 - <td id="td9" class="style76"><a href="videoplayer.html?source=http://localhost/vod/sample2_1000kbps.f4v&type=recorded&idx=9">sample2_1000kbps.f4v (http progressive)</a></td> 535 + <td id="td9" class="style76"><a href="demo.html?source=http://localhost/vod/sample2_1000kbps.f4v&type=recorded&idx=9">sample2_1000kbps.f4v (http progressive)</a></td>
446 </tr> 536 </tr>
447 <tr> 537 <tr>
448 <td colspan="2"><img src="images/spacer.gif" width="20" height="5" /></td> 538 <td colspan="2"><img src="images/spacer.gif" width="20" height="5" /></td>
@@ -450,7 +540,7 @@ a:active { @@ -450,7 +540,7 @@ a:active {
450 <tr> 540 <tr>
451 <td><img src="images/spacer.gif" width="20" height="10" /></td> 541 <td><img src="images/spacer.gif" width="20" height="10" /></td>
452 <td id="sel10"><span class="style74">&gt;</span></td> 542 <td id="sel10"><span class="style74">&gt;</span></td>
453 - <td id="td10" class="style76"><a href="videoplayer.html?source=rtmp://localhost/vod/mp4:sample2_1000kbps.f4v&type=recorded&idx=10">sample2_1000kbps.f4v (rtmp)</a></td> 543 + <td id="td10" class="style76"><a href="demo.html?source=rtmp://localhost/vod/mp4:sample2_1000kbps.f4v&type=recorded&idx=10">sample2_1000kbps.f4v (rtmp)</a></td>
454 </tr> 544 </tr>
455 545
456 546
@@ -469,7 +559,7 @@ a:active { @@ -469,7 +559,7 @@ a:active {
469 <tr> 559 <tr>
470 <td><img src="images/spacer.gif" width="20" height="10" /></td> 560 <td><img src="images/spacer.gif" width="20" height="10" /></td>
471 <td id="sel11"><span class="style74">&gt;</span></td> 561 <td id="sel11"><span class="style74">&gt;</span></td>
472 - <td id="td11" class="style76"><a href="videoplayer.html?source=rtmp://localhost/live/livestream&type=live&idx=11">livestream</a></td> 562 + <td id="td11" class="style76"><a href="demo.html?source=rtmp://localhost/live/livestream&type=live&idx=11">livestream</a></td>
473 </tr> 563 </tr>
474 </table></td> 564 </table></td>
475 </tr> 565 </tr>
@@ -539,355 +629,53 @@ a:active { @@ -539,355 +629,53 @@ a:active {
539 </tr> 629 </tr>
540 </table></td> 630 </table></td>
541 </tr> 631 </tr>
542 - <tr>  
543 - <td colspan="2">&nbsp;</td>  
544 - <td align="left" class="style74">URL Syntax: [protocol]://[servername]/[application]/[codecID:][streamname][.extension]</td>  
545 - <td>&nbsp;</td>  
546 - </tr>  
547 - <tr>  
548 <td colspan="4">&nbsp;</td> 632 <td colspan="4">&nbsp;</td>
549 </tr> 633 </tr>
550 </table></td> 634 </table></td>
551 </tr> 635 </tr>
552 </table></td> 636 </table></td>
553 </tr> 637 </tr>
554 - <tr>  
555 - <td colspan="3" valign="top"><table width="100" border="0" cellspacing="0" cellpadding="0"> 638 + <td colspan="3" valign="top"><table width="87%" border="0" cellspacing="0" cellpadding="0">
556 <tr> 639 <tr>
557 - <td colspan="3">&nbsp;</td> 640 + <td><span class="style69">Connect Xuedianyun LiveServer</span></td>
558 </tr> 641 </tr>
559 <tr> 642 <tr>
560 - <td colspan="3"><span class="style73"></span></td>  
561 - </tr>  
562 - <tr>  
563 - <td colspan="3"><span class="style75"></span></td> 643 + <td bgcolor="#666666"><img src="images/spacer.gif" width="20" height="3" /></td>
564 </tr> 644 </tr>
  645 +
565 <tr> 646 <tr>
566 - <td colspan="3"><span class="style67"><img src="images/spacer.gif" width="56" height="10" /></span></td> 647 + <td><img src="images/spacer.gif" width="55" height="10" /></td>
567 </tr> 648 </tr>
568 <tr> 649 <tr>
569 - <td width="32%" valign="top"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">  
570 -  
571 - <tr>  
572 - <td valign="top" class="style73">RTMP STREAMING</td>  
573 - </tr>  
574 - <tr>  
575 - <td valign="top" class="style75">from the folder: /webroot/vod</td>  
576 - </tr>  
577 -  
578 - <tr>  
579 - <td valign="top"><img src="images/spacer.gif" width="40" height="5" border="0" /></td>  
580 - </tr>  
581 - <tr>  
582 - <td bgcolor="#666666"><img src="images/spacer.gif" width="490" height="3" /></td>  
583 - </tr>  
584 - <tr>  
585 - <td valign="top"><img src="images/spacer.gif" width="56" height="20" /></td>  
586 - </tr> 650 + <td><table width="1000" border="0" align="left" cellpadding="0" cellspacing="0">
587 <tr> 651 <tr>
588 - <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0"> 652 + <td width="8%"><table width="100" border="0" cellspacing="0" cellpadding="0">
589 <tr> 653 <tr>
590 - <td valign="top" class="style34"><table width="490" border="0" cellspacing="0" cellpadding="0">  
591 - <tr>  
592 - <td width="7%" valign="top" class="style74">1)</td>  
593 - <td width="93%" class="style74">[<strong>protocol</strong>]: You can use the following protocols: rtmp, rtmpt, rtmpe, rtmpte, rtmps.</td>  
594 - </tr>  
595 - <tr>  
596 - <td colspan="2" class="style62"><img src="images/spacer.gif" width="10" height="15" /></td>  
597 - </tr>  
598 - <tr>  
599 - <td valign="top" class="style74">2)</td>  
600 - <td class="style74">[<strong>servername</strong>]: This is the IP Address or the domain name of your server (for example, localhost).</td>  
601 - </tr>  
602 - <tr>  
603 - <td colspan="2" class="style62"><img src="images/spacer.gif" width="10" height="15" /></td>  
604 - </tr>  
605 - <tr>  
606 - <td valign="top" class="style74">3)</td>  
607 - <td class="style74">[<strong>application</strong>]: Use "vod" unless you have changed the name of the folder.</td>  
608 - </tr>  
609 - <tr>  
610 - <td colspan="2" class="style62"><img src="images/spacer.gif" width="10" height="15" /></td>  
611 - </tr>  
612 - <tr>  
613 - <td valign="top" class="style74">4)</td>  
614 - <td class="style74">[<strong>codecID</strong>]: </td>  
615 - </tr>  
616 - <tr>  
617 - <td colspan="2" valign="top" class="style24"><img src="images/spacer.gif" width="5" height="10" /></td>  
618 - </tr>  
619 - <tr>  
620 - <td valign="top" class="style62">&nbsp;</td>  
621 - <td class="style74"><blockquote>  
622 - <p> For H264/mov/F4V use "mp4:".<br />  
623 - For FLV files, do not specify a codecID.</p>  
624 - </blockquote></td>  
625 - </tr>  
626 - <tr>  
627 - <td colspan="2" class="style62"><img src="images/spacer.gif" width="10" height="15" /></td>  
628 - </tr>  
629 - <tr>  
630 - <td valign="top" class="style74">5)</td>  
631 - <td class="style74">[<strong>streamname</strong>]: Use the name of your video file. </td>  
632 - </tr>  
633 - <tr>  
634 - <td colspan="2" class="style24"><img src="images/spacer.gif" width="5" height="10" /></td>  
635 - </tr>  
636 - <tr>  
637 - <td valign="top" class="style74">6)</td>  
638 - <td class="style74">[<strong>extension</strong>]: </td>  
639 - </tr>  
640 - <tr>  
641 - <td colspan="2" class="style24"><img src="images/spacer.gif" width="5" height="10" /></td>  
642 - </tr>  
643 - <tr>  
644 - <td valign="top" class="style62">&nbsp;</td>  
645 - <td class="style74"><blockquote>  
646 - <p>For F4V/MP4 files, specify a file extension.<br />  
647 - For MP3 and FLV, do not specify a file extension.</p>  
648 - </blockquote></td>  
649 - </tr>  
650 - <tr>  
651 - <td colspan="2" class="style62"><img src="images/spacer.gif" width="10" height="15" /></td>  
652 - </tr>  
653 - <tr>  
654 - <td class="style62">&nbsp;</td>  
655 - <td class="style74"><strong>EXAMPLE URLS</strong></td>  
656 - </tr>  
657 - <tr>  
658 - <td class="style62">&nbsp;</td>  
659 - <td class="style74">rtmp://localhost/vod/mp4:mystream.f4v</td>  
660 - </tr>  
661 - <tr>  
662 - <td class="style62">&nbsp;</td>  
663 - <td class="style74">rtmpe://192.168.0.1/vod/myvideo</td>  
664 - </tr>  
665 - </table></td> 654 + <td align="left"><span class="style73">Websocket URL:</span></td>
666 </tr> 655 </tr>
667 -  
668 - </table> <span class="style34"></span></td>  
669 - </tr>  
670 - <tr>  
671 - <td valign="top">&nbsp;</td>  
672 - </tr>  
673 -  
674 - </table></td>  
675 - <td width="30%"><table width="100%" border="0" cellspacing="0" cellpadding="0">  
676 - <tr>  
677 - <td align="center" valign="middle"><img src="images/spacer.gif" width="20" height="50" /></td>  
678 - </tr>  
679 - </table></td>  
680 - <td width="38%" valign="top"><table width="100" border="0" align="center" cellpadding="0" cellspacing="0">  
681 - <tr>  
682 - <td valign="top" class="style67"><span class="style73">HTTP DYNAMIC STREAMING</span><br /></td>  
683 - </tr>  
684 - <tr>  
685 - <td valign="top" class="style75">from the folder: /webroot/vod</td>  
686 - </tr>  
687 - <tr>  
688 - <td valign="top"><img src="images/spacer.gif" width="40" height="5" border="0" /></td>  
689 - </tr>  
690 - <tr>  
691 - <td bgcolor="#666666"><img src="images/spacer.gif" width="490" height="3" /></td>  
692 - </tr>  
693 - <tr>  
694 - <td valign="top"><img src="images/spacer.gif" width="56" height="20" /></td>  
695 - </tr> 656 + </table></td>
  657 + <td align="left"></td>
  658 + <td align="left"><input name="websocketURL" type="text" id="websocketURL" size="80" maxlength="80" /></td>
  659 + <td width="42%" align="left"><table width="100" border="0" cellspacing="0" cellpadding="0">
  660 + <tr>
  661 + <td width="2%" align="left"><img src="images/spacer.gif" width="10" height="10" /></td>
  662 + <td width="27%" align="left"><a id="connectBtn" onclick="javascript:connectLiveServ();"><img src="images/connect.gif" width="104" height="25" /></a></td>
  663 + <td align="left">&nbsp;</td>
  664 + <td width="27%" align="left"><a id="disconnectBtn" onclick="javascript:disconnectLiveServ();"><img src="images/disconnect.gif" width="104" height="25" /> <td align="left">&nbsp;</td>
  665 + <td align="left">&nbsp;</td>
  666 + <td width="27%" align="left"><a id="clearBtn" onclick="javascript:clearOutput();"><img src="images/clear.gif" width="104" height="25" /></a></td>
  667 + </tr>
  668 + </table></td>
  669 + </tr>
696 <tr> 670 <tr>
697 - <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">  
698 - <tr>  
699 - <td valign="top" class="style34"><table width="100%" border="0" cellspacing="0" cellpadding="0">  
700 - <tr>  
701 - <td valign="top" class="style34"><table width="489" border="0" cellspacing="0" cellpadding="0">  
702 - <tr>  
703 - <td width="7%" valign="top" class="style74">1)</td>  
704 - <td width="93%" class="style74">[<strong>protocol</strong>]: HTTP</td>  
705 - </tr>  
706 - <tr>  
707 - <td colspan="2" class="style62"><img src="images/spacer.gif" width="10" height="15" /></td>  
708 - </tr>  
709 - <tr>  
710 - <td valign="top" class="style74">2)</td>  
711 - <td class="style74">[<strong>server</strong>]: This is the IP Address or the domain name of your server (for example, localhost).</td>  
712 - </tr>  
713 - <tr>  
714 - <td colspan="2" class="style62"><img src="images/spacer.gif" width="10" height="15" /></td>  
715 - </tr>  
716 - <tr>  
717 - <td valign="top" class="style74">3)</td>  
718 - <td class="style74">[<strong>application</strong>]: </td>  
719 - </tr>  
720 - <tr>  
721 - <td colspan="2" class="style62"><img src="images/spacer.gif" width="10" height="15" /></td>  
722 - </tr>  
723 - <tr>  
724 - <td valign="top" class="style62">&nbsp;</td>  
725 - <td valign="top" class="style74">  
726 -<table width="100%" border="0" cellspacing="0" cellpadding="0">  
727 -<tr>  
728 -<td width="31%" valign="top" class="style74"><strong>For VOD</strong><br /> Flash: "hds-vod"</td>  
729 -<td width="69%" valign="top" class="style74"><strong>For LIVE</strong><br /> Flash: "/hds-live/livepkgr/_definst_/liveevent/"</td>  
730 -</tr></table>  
731 -</td>  
732 - </tr>  
733 - <tr>  
734 - <td colspan="2" class="style62"><img src="images/spacer.gif" width="10" height="15" /></td>  
735 - </tr>  
736 - <tr>  
737 - <td valign="top" class="style74">4)</td>  
738 - <td class="style74">[<strong>codecID</strong>]: Not required</td>  
739 - </tr>  
740 - <tr>  
741 - <td colspan="2" valign="top" class="style62"><img src="images/spacer.gif" width="5" height="10" /></td>  
742 - </tr>  
743 - <tr>  
744 - <td valign="top" class="style74">5)</td>  
745 - <td class="style74">[<strong>streamname</strong>]: The name of the MP4/F4V media file</td>  
746 - </tr>  
747 - <tr>  
748 - <td colspan="2" class="style62"><img src="images/spacer.gif" width="5" height="10" /></td>  
749 - </tr>  
750 - <tr>  
751 - <td valign="top" class="style74">6)</td>  
752 - <td class="style74">[<strong>extension</strong>]: The extension of the media file + &quot;.f4m. </td>  
753 - </tr>  
754 - <tr>  
755 - <td colspan="2" class="style62"><img src="images/spacer.gif" width="10" height="5" /></td>  
756 - </tr>  
757 - <tr>  
758 - <td class="style62">&nbsp;</td>  
759 - <td class="style73">EXAMPLE VOD URL</td>  
760 - </tr>  
761 - <tr>  
762 - <td class="style62">&nbsp;</td>  
763 - <td class="style74">http://localhost/hds-vod/sample1_500kbps.f4v.f4m</td>  
764 - </tr>  
765 - <tr>  
766 - <td colspan="2" class="style62"><img src="images/spacer.gif" width="10" height="5" /></td>  
767 - </tr>  
768 - <tr>  
769 - <td class="style62">&nbsp;</td>  
770 - <td class="style73">EXAMPLE LIVE URL</td>  
771 - </tr>  
772 - <tr>  
773 - <td class="style62">&nbsp;</td>  
774 - <td class="style74">  
775 - http://localhost/hds-live/livepkgr/_definst_/liveevent/livestream.f4m</td>  
776 - </tr>  
777 - <tr>  
778 - <td colspan="2" class="style62"><img src="images/spacer.gif" width="10" height="5" /></td>  
779 - </tr>  
780 - <tr>  
781 - <td class="style62">&nbsp;</td>  
782 - <td class="style73">EXAMPLE LIVE PUBLISHING URLS (IN FLASH MEDIA LIVE ENCODER)</td>  
783 - </tr>  
784 - <tr>  
785 - <td class="style62">&nbsp;</td>  
786 - <td class="style74">  
787 -a. <strong>FMS Server URL:</strong> rtmp://localhost/livepkgr<br />  
788 -&nbsp;&nbsp;&nbsp;&nbsp;<strong>Note:</strong> Publish the stream to the server over the RTMP protocol.<br />  
789 -c. <strong>Stream Name (Single Bitrate):</strong>  
790 -livestream?adbe-live-event=liveevent<br />  
791 -d. <strong>Stream Name (Adaptive Bitrate):</strong>  
792 -livestream%i?adbe-live-event=liveevent<br />  
793 -  
794 -</td>  
795 - </tr>  
796 - </table></td>  
797 - </tr>  
798 - <tr>  
799 - <td class="style34">&nbsp;</td>  
800 - </tr>  
801 - </table></td>  
802 - </tr>  
803 -  
804 - </table>  
805 - <span class="style34"></span></td> 671 + <td colspan="4">&nbsp;</td>
806 </tr> 672 </tr>
807 -  
808 </table></td> 673 </table></td>
809 - </tr>  
810 -  
811 - <tr>  
812 - <td colspan="3">&nbsp;</td>  
813 </tr> 674 </tr>
814 - </table>  
815 - <table width="1000" border="0" cellspacing="0" cellpadding="0">  
816 - <tr>  
817 - <td valign="bottom" class="style67"><span class="style1"><span class="style73">EMBED CODE</span><br />  
818 - </span></td>  
819 - </tr>  
820 - <tr>  
821 - <td valign="top" class="style67"><span class="style1"><img src="images/spacer.gif" width="40" height="5" /></span></td>  
822 - </tr>  
823 - <tr>  
824 - <td bgcolor="#666666" class="style67"><img src="images/spacer.gif" width="306" height="3" /></td>  
825 - </tr>  
826 - <tr>  
827 - <td class="style67">&nbsp;</td>  
828 - </tr>  
829 - <tr>  
830 - <td class="style74">Copy and paste the following code into an HTML file to embed the video player in a web page. Place the HTML page in the /webroot folder. <br />  
831 - TIP: If you enter a Stream URL above, this embed code updates automatically. </td>  
832 - </tr>  
833 - <tr>  
834 - <td><table width="1000" border="0" cellspacing="0" cellpadding="0">  
835 - <tr>  
836 - <td colspan="5">&nbsp;</td>  
837 - </tr>  
838 - <tr>  
839 - <td colspan="5" bgcolor="#FFFFFF" class="style3"><table width="100%" border="0" cellspacing="0" cellpadding="0">  
840 - <tr>  
841 - <td width="1%"><img src="images/spacer.gif" width="15" height="5" /></td>  
842 - <td width="97%" class="style71" id="embedField" >  
843 - &lt;object width='640' height='377' id='StrobeMediaPlayback' name='StrobeMediaPlayback' type='application/x-shockwave-flash' classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' &gt;&lt;param name='movie' value='swfs/StrobeMediaPlayback.swf' /&gt; &lt;param name='quality' value='high' /&gt; &lt;param name='bgcolor' value='#000000' /&gt; &lt;param name='allowfullscreen' value='true' /&gt; &lt;param name='flashvars' value='&amp;videoWidth=0&amp;videoHeight=0&amp;dsControl=manual&amp;dsSensitivity=100&amp;serverURL=rtmp://localhost/vod/mp4:sample1_500kbps.f4v&amp;streamType=vod&amp;autoStart=true'/&gt; &lt;embed src='swfs/StrobeMediaPlayback.swf' width='640' height='377' id='StrobeMediaPlayback' quality='high' bgcolor='#000000' name='StrobeMediaPlayback' allowfullscreen='true' pluginspage='http://www.adobe.com/go/getflashplayer 'flashvars='&amp;videoWidth=0&amp;videoHeight=0&amp;dsControl=manual&amp;dsSensitivity=100&amp;serverURL=rtmp://localhost/vod/mp4:sample1_500kbps.f4v&amp;streamType=vod&amp;autoStart=true' type='application/x-shockwave-flash'&gt; &lt;/embed&gt;&lt;/object&gt;</td>  
844 - <td width="2%"><img src="images/spacer.gif" width="10" height="5" /></td>  
845 - </tr>  
846 - </table>  
847 - <br /></td>  
848 - </tr>  
849 - <tr>  
850 - <td colspan="5">&nbsp;</td>  
851 - </tr>  
852 - </table></td>  
853 - </tr>  
854 - </table> </td>  
855 - </tr>  
856 - <tr>  
857 - <td width="1012" colspan="3" valign="top">&nbsp;</td>  
858 - </tr>  
859 -  
860 - </table></td>  
861 - </tr>  
862 -  
863 - <tr>  
864 - <td colspan="2" valign="top" bgcolor="#191919"><table width="1000" border="0" cellspacing="0" cellpadding="0">  
865 - <tr>  
866 - <td width="1000" height="24" valign="middle" background="images/footer_bar.gif"><table width="99%" border="0" cellspacing="0" cellpadding="0">  
867 - <tr>  
868 - <td width="1000"><div align="right" class="style81"><span class="style82">Copyright © 2011 Adobe Systems Incorporated.&nbsp; &nbsp;</span><span class="style83">All rights reserved.</span></div></td>  
869 - </tr>  
870 - </table></td> 675 + </table></td>
871 </tr> 676 </tr>
872 - <tr>  
873 - <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">  
874 - <tr>  
875 - <td width="99%" valign="top"><div align="right" class="style22">  
876 - <div align="right"><span class="style23">Use of this website signifies your agreement to the Terms of Use and Online Privacy Policy</span>.</div>  
877 - </div></td>  
878 - <td width="1%" valign="top"><img src="images/spacer.gif" width="13" height="10" /></td>  
879 - </tr>  
880 - </table></td>  
881 - </tr>  
882 - </table></td>  
883 - </tr>  
884 - <tr>  
885 - <td colspan="2" valign="top" bgcolor="#191919"><img src="images/spacer.gif" width="55" height="60" /></td>  
886 - </tr>  
887 -</table>  
888 -  
889 677
890 -  
891 -<map name="Map" id="Map"><area shape="rect" coords="948,12,985,57" href="http://www.adobe.com" target="_blank" />  
892 -</map></body> 678 +</table>
  679 +<div id="output"></div>
  680 +</body>
893 </html> 681 </html>