same_screen_customer.html 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  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. </style>
  20. </head>
  21. <body>
  22. <div id="scene" class="scene"></div>
  23. <script src="../../libs/socket.io.min.v4.msgpack.js"></script>
  24. <script src="//4dkk.4dage.com/v4/sdk/4.2.2/kankan-sdk-deps.js"></script>
  25. <script src="//4dkk.4dage.com/v4/sdk/4.2.2/kankan-sdk.js"></script>
  26. <script>
  27. function createSocket(config) {
  28. return io('wss://test-socket.4dkankan.com', {
  29. path: '/fsl-node',
  30. query: {
  31. role: config.role,
  32. roomId: 'test-room',
  33. userId: Date.now().toString(),
  34. sceneNum: 't-Pfz5oq8',
  35. userLimitNum: 30,
  36. from: 0,
  37. },
  38. })
  39. }
  40. var socket1 = createSocket({ role: 'customer' })
  41. var kankan1 = new KanKan({
  42. dom: '#scene',
  43. num: 't-Pfz5oq8',
  44. })
  45. kankan1.render()
  46. socket1.onAny((event, data) => {
  47. if(event == 'webSyncAction'){
  48. kankan1.Connect.sync.receive(data)
  49. }
  50. })
  51. kankan1.Connect.sync.on('data', data => {
  52. socket1.emit('webSyncAction',data)
  53. })
  54. kankan1.Connect.sync.start()
  55. </script>
  56. </body>
  57. </html>