chat.html 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <!-- index.html -->
  2. <html>
  3. <head>
  4. <script type="text/javascript" src="mpegts-1.7.3.min.js"></script>
  5. <script type="text/javascript" src="http://cdn.sockjs.org/sockjs-0.3.4.js"></script>
  6. <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  7. </head>
  8. <body>
  9. <div class="container">
  10. <h1>WebSocket Test</h1>
  11. <form class="form-inline" id="echo-form">
  12. <div class="form-group">
  13. <p>input text</p>
  14. <textarea cols="2" rows="3" style="width:600px;height:50px;" class="form-control" id="message">test</textarea>
  15. </div>
  16. <button type="submit" class="btn btn-default">Send</button>
  17. </form>
  18. <div id="log">
  19. </div>
  20. <video id="video_player" width="40%" controls autoplay muted></video>
  21. </div>
  22. </body>
  23. <script type="text/javascript" charset="utf-8">
  24. $(document).ready(function() {
  25. var host = window.location.hostname
  26. // var ws = new WebSocket("ws://"+host+":8000/humanecho");
  27. // //document.getElementsByTagName("video")[0].setAttribute("src", aa["video"]);
  28. // ws.onopen = function() {
  29. // console.log('Connected');
  30. // };
  31. // ws.onmessage = function(e) {
  32. // console.log('Received: ' + e.data);
  33. // data = e
  34. // var vid = JSON.parse(data.data);
  35. // console.log(typeof(vid),vid)
  36. // //document.getElementsByTagName("video")[0].setAttribute("src", vid["video"]);
  37. // };
  38. // ws.onclose = function(e) {
  39. // console.log('Closed');
  40. // };
  41. flvPlayer = mpegts.createPlayer({type: 'flv', url: "http://"+host+":8080/live/livestream.flv", isLive: true, enableStashBuffer: false});
  42. flvPlayer.attachMediaElement(document.getElementById('video_player'));
  43. flvPlayer.load();
  44. flvPlayer.play();
  45. $('#echo-form').on('submit', function(e) {
  46. e.preventDefault();
  47. var message = $('#message').val();
  48. console.log('Sending: ' + message);
  49. fetch('/human', {
  50. body: JSON.stringify({
  51. text: message,
  52. type: 'chat',
  53. }),
  54. headers: {
  55. 'Content-Type': 'application/json'
  56. },
  57. method: 'POST'
  58. });
  59. //ws.send(message);
  60. $('#message').val('');
  61. });
  62. });
  63. </script>
  64. </html>