same_screen_leader.html 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>主持人</title>
  7. <style>
  8. html,
  9. body {
  10. width: 100%;
  11. height: 100%;
  12. margin: 0;
  13. overflow: hidden;
  14. }
  15. .scene {
  16. width: 100%;
  17. height: 100%;
  18. }
  19. #toolbar{
  20. position: absolute;
  21. left: 0;
  22. bottom: 0;
  23. z-index: 1000;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <div id="scene" class="scene"></div>
  29. <script src="../../libs/socket.io.min.v4.msgpack.js"></script>
  30. <script src="//4dkk.4dage.com/v4/sdk/4.2.2/kankan-sdk-deps.js"></script>
  31. <script src="//4dkk.4dage.com/v4/sdk/4.2.2/kankan-sdk.js"></script>
  32. <script>
  33. function createSocket(config) {
  34. return io('wss://test-socket.4dkankan.com', {
  35. path: '/fsl-node',
  36. query: {
  37. role: config.role,
  38. roomId: 'test-room',
  39. userId: Date.now().toString(),
  40. sceneNum: 't-Pfz5oq8',
  41. userLimitNum: 30,
  42. from: 0,
  43. },
  44. })
  45. }
  46. var socket1 = createSocket({ role: 'leader' })
  47. var kankan1 = new KanKan({
  48. dom: '#scene',
  49. num: 't-Pfz5oq8',
  50. })
  51. kankan1.render()
  52. socket1.onAny((event, data) => {
  53. if(event == 'webSyncAction'){
  54. kankan1.Connect.sync.receive(data)
  55. }
  56. })
  57. kankan1.Connect.sync.on('data', data => {
  58. socket1.emit('webSyncAction',data)
  59. })
  60. kankan1.Connect.sync.start()
  61. </script>
  62. </body>
  63. </html>