srsRtc copy 2.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. export class SrsRTC {
  2. constructor(url) {
  3. this.stream = new MediaStream();
  4. this.url = url;
  5. this.offer = null;
  6. // this.pc = null;
  7. this.pc = new RTCPeerConnection({
  8. encodedInsertableStreams: true,
  9. });
  10. this.pc.addEventListener('icecandidate', e => this.onIceCandidate(this.pc, e));
  11. this.pc..addEventListener('datachannel', this.ondatachannel);
  12. // this.pc.ondatachannel = (event) => {
  13. // console.log("ondatachannel", ondatachannel);
  14. // this.inputChannel.onopen = () => {
  15. // console.log("连接");
  16. // };
  17. // this.inputChannel.onmessage = (event) => {
  18. // // mark00 rtcp接收
  19. // console.log("连接", event);
  20. // };
  21. // this.inputChannel.close = (event) => {
  22. // // mark00 rtcp接收
  23. // console.log("close", event);
  24. // };
  25. // };
  26. }
  27. onIceCandidate(event){
  28. console.log('icecandidate',event)
  29. }
  30. ondatachannel(event){
  31. console.log('ondatachannel',ondatachannel)
  32. }
  33. close() {
  34. var remoteVideo = document.querySelector("#testVideoFeed");
  35. if (remoteVideo.srcObject) {
  36. remoteVideo.srcObject.getTracks().forEach((track) => track.stop());
  37. }
  38. this.pc && this.pc.close();
  39. this.pc = null;
  40. }
  41. start(clipUrl) {
  42. const serverApi = "https://demo-kms.4dage.com:443/rtc/v1/play/";
  43. const tid = Number(parseInt(new Date().getTime() * Math.random() * 100))
  44. .toString(16)
  45. .slice(0, 7);
  46. var offer = await this.pc.createOffer();
  47. this.offer = offer;
  48. await this.pc.setLocalDescription(offer);
  49. const session = await new Promise(function (resolve, reject) {
  50. // @see https://github.com/rtcdn/rtcdn-draft
  51. var data = {
  52. api: serverApi,
  53. tid: tid,
  54. streamurl: clipUrl,
  55. clientip: null,
  56. sdp: offer.sdp,
  57. };
  58. console.log("Generated offer: ", data);
  59. $.ajax({
  60. type: "POST",
  61. url: serverApi,
  62. data: JSON.stringify(data),
  63. contentType: "application/json",
  64. dataType: "json",
  65. })
  66. .done(function (data) {
  67. console.log("Got answer: ", data);
  68. if (data.code) {
  69. reject(data);
  70. return;
  71. }
  72. resolve(data);
  73. })
  74. .fail(function (reason) {
  75. reject(reason);
  76. });
  77. });
  78. await this.pc.setRemoteDescription(
  79. new RTCSessionDescription({ type: "answer", sdp: session.sdp })
  80. );
  81. }
  82. async getVideo(clipUrl) {
  83. if (!this.pc) {
  84. this.pc = new RTCPeerConnection(null);
  85. this.pc.ontrack = (event) => {
  86. // https://webrtc.org/getting-started/remote-streams
  87. console.log("event", event);
  88. if (this.stream) {
  89. // this.stream.removeTrack(event.track));
  90. const videoTrack = this.stream
  91. .getVideoTracks()
  92. .find((i) => i.kind === "video");
  93. console.log("旧videoTrack", videoTrack);
  94. if (videoTrack) {
  95. this.stream.removeTrack(videoTrack);
  96. }
  97. // if(this.stream.removeTrack())
  98. this.stream.addTrack(event.track);
  99. }
  100. // mediaRecorder.
  101. };
  102. this.pc.ondatachannel = (event) => {
  103. console.log("ondatachannel", ondatachannel);
  104. this.inputChannel.onopen = () => {
  105. console.log("连接");
  106. };
  107. this.inputChannel.onmessage = (event) => {
  108. // mark00 rtcp接收
  109. console.log("连接", event);
  110. };
  111. this.inputChannel.close = (event) => {
  112. // mark00 rtcp接收
  113. console.log("close", event);
  114. };
  115. };
  116. }
  117. this.pc.addTransceiver("video", { direction: "recvonly" });
  118. const serverApi = "https://demo-kms.4dage.com:443/rtc/v1/play/";
  119. const tid = Number(parseInt(new Date().getTime() * Math.random() * 100))
  120. .toString(16)
  121. .slice(0, 7);
  122. var offer = await this.pc.createOffer();
  123. this.offer = offer;
  124. await this.pc.setLocalDescription(offer);
  125. const session = await new Promise(function (resolve, reject) {
  126. // @see https://github.com/rtcdn/rtcdn-draft
  127. var data = {
  128. api: serverApi,
  129. tid: tid,
  130. streamurl: clipUrl,
  131. clientip: null,
  132. sdp: offer.sdp,
  133. };
  134. console.log("Generated offer: ", data);
  135. $.ajax({
  136. type: "POST",
  137. url: serverApi,
  138. data: JSON.stringify(data),
  139. contentType: "application/json",
  140. dataType: "json",
  141. })
  142. .done(function (data) {
  143. console.log("Got answer: ", data);
  144. if (data.code) {
  145. reject(data);
  146. return;
  147. }
  148. resolve(data);
  149. })
  150. .fail(function (reason) {
  151. reject(reason);
  152. });
  153. });
  154. await this.pc.setRemoteDescription(
  155. new RTCSessionDescription({ type: "answer", sdp: session.sdp })
  156. );
  157. return session;
  158. }
  159. }