custom-protocol.vue 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <script setup lang="ts">
  2. import { TagsOutlined } from '@ant-design/icons-vue';
  3. import { Button, Flex } from 'ant-design-vue';
  4. import { ThoughtChain, XStream } from 'ant-design-x-vue';
  5. import { ref, h } from 'vue';
  6. defineOptions({ name: 'AXXStreamCustomProtocolSetup' });
  7. const sipHeaders = [
  8. 'INVITE sip:[email protected] SIP/2.0\n',
  9. 'Via: SIP/2.0/UDP [host];branch=123456\n',
  10. 'Content-Type: application/sdp\n\n',
  11. ];
  12. const sdp = [
  13. 'v=0\n',
  14. 'o=alice 2890844526 2890844526 IN IP4 [host]\n',
  15. 's=\n',
  16. 'c=IN IP4 [host]\n',
  17. 't=0 0\n',
  18. 'm=audio 49170 RTP/AVP 0\n',
  19. 'a=rtpmap:0 PCMU/8000\n',
  20. 'm=video 51372 RTP/AVP 31\n',
  21. 'a=rtpmap:31 H261/90000\n',
  22. 'm=video 53000 RTP/AVP 32\n',
  23. 'a=rtpmap:32 MPV/90000\n\n',
  24. ];
  25. function mockReadableStream() {
  26. return new ReadableStream({
  27. async start(controller) {
  28. for (const chunk of sipHeaders.concat(sdp)) {
  29. await new Promise((resolve) => setTimeout(resolve, 100));
  30. controller.enqueue(new TextEncoder().encode(chunk));
  31. }
  32. controller.close();
  33. },
  34. });
  35. }
  36. const lines = ref<string[]>([]);
  37. async function readStream() {
  38. // 🌟 Read the stream
  39. for await (const chunk of XStream({
  40. readableStream: mockReadableStream(),
  41. transformStream: new TransformStream<string, string>({
  42. transform(chunk, controller) {
  43. controller.enqueue(chunk);
  44. },
  45. }),
  46. })) {
  47. lines.value = [...lines.value, chunk];
  48. }
  49. }
  50. </script>
  51. <template>
  52. <Flex :gap="8">
  53. <div>
  54. <Button
  55. type="primary"
  56. :style="{ marginBottom: '16px' }"
  57. @click="readStream"
  58. >
  59. Mock Custom Protocol - SIP
  60. </Button>
  61. </div>
  62. <!-- -------------- Log -------------- -->
  63. <div>
  64. <ThoughtChain
  65. :items="
  66. lines.length
  67. ? [
  68. {
  69. title: 'Mock Custom Protocol - Log',
  70. status: 'success',
  71. icon: h(TagsOutlined),
  72. content: h('pre', { style: { overflow: 'scroll' } }, [
  73. h('code', lines.join('')),
  74. ]),
  75. },
  76. ]
  77. : []
  78. "
  79. />
  80. </div>
  81. </Flex>
  82. </template>