webrtc.html 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8"/>
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>WebRTC webcam</title>
  7. <style>
  8. button {
  9. padding: 8px 16px;
  10. }
  11. video {
  12. width: 100%;
  13. }
  14. .option {
  15. margin-bottom: 8px;
  16. }
  17. #media {
  18. max-width: 1280px;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div class="option">
  24. <input id="use-stun" type="checkbox"/>
  25. <label for="use-stun">Use STUN server</label>
  26. </div>
  27. <button id="start" onclick="start()">Start</button>
  28. <button id="stop" style="display: none" onclick="stop()">Stop</button>
  29. <form class="form-inline" id="echo-form">
  30. <div class="form-group">
  31. <p>input text</p>
  32. <textarea cols="2" rows="3" style="width:600px;height:50px;" class="form-control" id="message">test</textarea>
  33. </div>
  34. <button type="submit" class="btn btn-default">Send</button>
  35. </form>
  36. <div id="media">
  37. <h2>Media</h2>
  38. <audio id="audio" autoplay="true"></audio>
  39. <video id="video" style="width:600px;" autoplay="true" playsinline="true"></video>
  40. </div>
  41. <script src="client.js"></script>
  42. <script type="text/javascript" src="http://cdn.sockjs.org/sockjs-0.3.4.js"></script>
  43. <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  44. </body>
  45. <script type="text/javascript" charset="utf-8">
  46. $(document).ready(function() {
  47. var host = window.location.hostname
  48. var ws = new WebSocket("ws://"+host+":8000/humanecho");
  49. //document.getElementsByTagName("video")[0].setAttribute("src", aa["video"]);
  50. ws.onopen = function() {
  51. console.log('Connected');
  52. };
  53. ws.onmessage = function(e) {
  54. console.log('Received: ' + e.data);
  55. data = e
  56. var vid = JSON.parse(data.data);
  57. console.log(typeof(vid),vid)
  58. //document.getElementsByTagName("video")[0].setAttribute("src", vid["video"]);
  59. };
  60. ws.onclose = function(e) {
  61. console.log('Closed');
  62. };
  63. $('#echo-form').on('submit', function(e) {
  64. e.preventDefault();
  65. var message = $('#message').val();
  66. console.log('Sending: ' + message);
  67. ws.send(message);
  68. $('#message').val('');
  69. });
  70. });
  71. </script>
  72. </html>