PrimordialUniverse/webrtc/srsRtc.js

export class SrsRTC {
  constructor(url) {
    this.stream = new MediaStream();
    this.url = url;
    this.offer = null;

    const supportsInsertableStreams =
      !!RTCRtpSender.prototype.createEncodedStreams;
    console.log("supportsInsertableStreams", supportsInsertableStreams);
    // this.pc.ontrack =  (event) => {
    //         // https://webrtc.org/getting-started/remote-streams
    //     console.warn('event',event.track)
    //     if(this.stream){
    //         this.stream.addTrack(event.track);
    //     }
    // };

    this.pc = new RTCPeerConnection({
      encodedInsertableStreams: true,
    });
    this.pc.addEventListener("icecandidate", (e) =>
      this.onIceCandidate(this.pc, e)
    );
    this.pc.addEventListener("datachannel", this.ondatachannel);
    // var dc = this.pc.createDataChannel("datachannel");
    // dc.onmessage = function (event) {
    //   console.log("received: " + event.data);
    // };

    // dc.onopen = function () {
    //   console.log("datachannel open");
    // };

    // dc.onclose = function () {
    //   console.log("datachannel close");
    // };
    // this.pc.ondatachannel = (event) => {
    //   console.log("ondatachannel", event);
    //   //   this.inputChannel.onopen = () => {
    //   //     console.log("连接");
    //   //   };
    //   //   this.inputChannel.onmessage = (event) => {
    //   //     // mark00 rtcp接收
    //   //     console.log("连接", event);
    //   //   };
    //   //   this.inputChannel.close = (event) => {
    //   //     // mark00 rtcp接收
    //   //     console.log("close", event);
    //   //   };
    // };
  }
  onIceCandidate(event) {
    // console.warn("icecandidate", event);
  }
  ondatachannel(event) {
    console.warn("ondatachannel", ondatachannel);
  }

  close() {
    var remoteVideo = document.querySelector("#testVideoFeed");
    if (remoteVideo.srcObject) {
      remoteVideo.srcObject.getTracks().forEach((track) => track.stop());
    }
    this.pc && this.pc.close();
    this.pc = null;
  }

  async start(clipUrl) {
    this.pc.addTransceiver("video", { direction: "recvonly" });
    const serverApi = "https://demo-kms.4dage.com:443/rtc/v1/play/";
    const tid = Number(parseInt(new Date().getTime() * Math.random() * 100))
      .toString(16)
      .slice(0, 7);
    var offer = await this.pc.createOffer();
    await this.pc.setLocalDescription(offer);
    const session = await new Promise(function (resolve, reject) {
      // @see https://github.com/rtcdn/rtcdn-draft
      var data = {
        api: serverApi,
        tid: tid,
        streamurl: clipUrl,
        clientip: null,
        sdp: offer.sdp,
      };
      console.log("Generated offer: ", data);
      $.ajax({
        type: "POST",
        url: serverApi,
        data: JSON.stringify(data),
        contentType: "application/json",
        dataType: "json",
      })
        .done(function (data) {
          console.log("Got answer: ", data);
          if (data.code) {
            reject(data);
            return;
          }

          resolve(data);
        })
        .fail(function (reason) {
          reject(reason);
        });
    });
    await this.pc.setRemoteDescription(
      new RTCSessionDescription({ type: "answer", sdp: session.sdp })
    );
  }

  async getVideo(clipUrl) {
    if (!this.pc) {
      this.pc = new RTCPeerConnection(null);
      this.pc.ontrack = (event) => {
        // https://webrtc.org/getting-started/remote-streams
        console.log("event", event);
        if (this.stream) {
          // this.stream.removeTrack(event.track));
          const videoTrack = this.stream
            .getVideoTracks()
            .find((i) => i.kind === "video");
          console.log("旧videoTrack", videoTrack);
          if (videoTrack) {
            this.stream.removeTrack(videoTrack);
          }
          // if(this.stream.removeTrack())
          this.stream.addTrack(event.track);
        }
        //    mediaRecorder.
      };

      this.pc.ondatachannel = (event) => {
        console.log("ondatachannel", ondatachannel);
        this.inputChannel.onopen = () => {
          console.log("连接");
        };
        this.inputChannel.onmessage = (event) => {
          // mark00 rtcp接收
          console.log("连接", event);
        };
        this.inputChannel.close = (event) => {
          // mark00 rtcp接收
          console.log("close", event);
        };
      };
    }

    this.pc.addTransceiver("video", { direction: "recvonly" });

    const serverApi = "https://demo-kms.4dage.com:443/rtc/v1/play/";
    const tid = Number(parseInt(new Date().getTime() * Math.random() * 100))
      .toString(16)
      .slice(0, 7);
    var offer = await this.pc.createOffer();
    this.offer = offer;
    await this.pc.setLocalDescription(offer);
    const session = await new Promise(function (resolve, reject) {
      // @see https://github.com/rtcdn/rtcdn-draft
      var data = {
        api: serverApi,
        tid: tid,
        streamurl: clipUrl,
        clientip: null,
        sdp: offer.sdp,
      };
      console.log("Generated offer: ", data);
      $.ajax({
        type: "POST",
        url: serverApi,
        data: JSON.stringify(data),
        contentType: "application/json",
        dataType: "json",
      })
        .done(function (data) {
          console.log("Got answer: ", data);
          if (data.code) {
            reject(data);
            return;
          }

          resolve(data);
        })
        .fail(function (reason) {
          reject(reason);
        });
    });
    await this.pc.setRemoteDescription(
      new RTCSessionDescription({ type: "answer", sdp: session.sdp })
    );

    return session;
  }
}