完成第一版

2024-07-11 23:12:30 +08:00
commit e35583c254
41 changed files with 19394 additions and 0 deletions
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -0,0 +1,10 @@
+import alovaInst from "../utils/request";
+
+export const GetBetOptList = async (type) =>
+  await alovaInst.Get(`/dice/shake?type=${type}`);
+export const GetUserInfo = async (uid) =>
+  await alovaInst.Get(`/dice/userShakeInfo?uid=${uid}`);
+export const GetBetRecord = async (uid) =>
+  await alovaInst.Get(`/dice/userShakeRecord?uid=${uid}`);
+export const GetLotteryRecord = async (uid) =>
+  await alovaInst.Get(`/dice/draw?uid=${uid}`);
--- a/src/app.config.js
+++ b/src/app.config.js
@@ -0,0 +1,14 @@
+export default defineAppConfig({
+  pages: [
+    "pages/index/index",
+    "pages/about/index",
+    "pages/bet_record/index",
+    "pages/lottery_record/index",
+  ],
+  window: {
+    backgroundTextStyle: "light",
+    navigationBarBackgroundColor: "#fff",
+    navigationBarTitleText: "WeChat",
+    navigationBarTextStyle: "black",
+  },
+});
--- a/src/app.js
+++ b/src/app.js
@@ -0,0 +1,10 @@
+import { createApp } from "vue";
+import '@icon-park/vue-next/styles/index.css';
+import "./app.scss";
+
+const App = createApp({
+  onShow(options) {},
+  // 入口组件不需要实现 render 方法，即使实现了也会被 taro 所覆盖
+});
+
+export default App;
--- a/src/app.scss
+++ b/src/app.scss
@@ -0,0 +1,3 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
--- a/src/index.html
+++ b/src/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+    <meta
+      content="width=device-width,initial-scale=1,user-scalable=no"
+      name="viewport"
+    />
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-touch-fullscreen" content="yes" />
+    <meta name="format-detection" content="telephone=no,address=no" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="white" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.16.3/skins/default/aliplayer-min.css" />
+    <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.16.3/aliplayer-min.js"></script>
+    <title>实况摇球机</title>
+    <script>
+      <%= htmlWebpackPlugin.options.script %>
+    </script>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
--- a/src/pages/about/index.config.js
+++ b/src/pages/about/index.config.js
@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: "玩法说明",
+});
--- a/src/pages/about/index.scss
+++ b/src/pages/about/index.scss
--- a/src/pages/about/index.vue
+++ b/src/pages/about/index.vue
@@ -0,0 +1,12 @@
+<template>
+  <rich-text :nodes="nodes"></rich-text>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import "./index.scss";
+
+const nodes = ref(`<div>这里是说明</div>`);
+</script>
+
+<style lang="scss"></style>
--- a/src/pages/bet_record/index.config.js
+++ b/src/pages/bet_record/index.config.js
@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: "投注记录",
+});
--- a/src/pages/bet_record/index.scss
+++ b/src/pages/bet_record/index.scss
@@ -0,0 +1,4 @@
+.line {
+  border-bottom: #f2f2f2 2px solid;
+  margin-bottom: 10px;
+}
--- a/src/pages/bet_record/index.vue
+++ b/src/pages/bet_record/index.vue
@@ -0,0 +1,96 @@
+<template>
+  <view>
+    <view class="p-[30px]">
+      <view class="h-[155px] line" v-for="(item, index) in data" :key="index">
+        <view class="flex justify-between text-[#959BB1] text-[28px]">
+          <view>{{ item.qs }}</view>
+          <view>{{ item.t }}</view>
+        </view>
+        <view class="flex mt-[20px] justify-between items-center">
+          <view class="flex justify-between items-center">
+            <view
+              class="m-[5px] rounded-full w-[44px] h-[44px] text-[28px] text-center leading-[44px]"
+              v-for="(itm, index) in item.hm"
+              :key="index"
+            >
+              <view
+                class="mr-[10] text-[28px] text-[#959BB1]"
+                v-if="item.type !== 2"
+                >{{ itm }}
+              </view>
+              <view
+                v-else
+                class="rounded-full border-[1px] border-[#000] text-[28px] text-center leading-[44px]"
+                :style="{
+                  color: itm.color,
+                }"
+                >{{ itm.num }}</view
+              >
+            </view>
+          </view>
+          <view v-if="item.j" class="text-[#088207] text-[28px]"
+            >- {{ item.j }} 豆子</view
+          >
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import Taro from "@tarojs/taro";
+import { GetBetRecord } from "../../api";
+import "./index.scss";
+
+const uid = ref("");
+
+// const data = ref([
+//   {
+//     type: 1,
+//     qs: "第2024157期",
+//     hm: ["头1", "头2"],
+//     t: "06-23  20:35:02",
+//     j: 2000,
+//   },
+//   {
+//     type: 2,
+//     qs: "第2024158期",
+//     hm: [
+//       {
+//         num: "04",
+//         color: "#0500FA",
+//       },
+//     ],
+//     t: "06-23  20:35:02",
+//     j: 200,
+//   },
+//   {
+//     type: 3,
+//     qs: "第2024159期",
+//     hm: ["单"],
+//     t: "06-23  20:35:02",
+//     j: 300,
+//   },
+// ]);
+const data = ref([]);
+
+Taro.useLoad((opt) => {
+  uid.value = opt.uid;
+  getList();
+});
+
+const getList = async () => {
+  const res = await GetBetRecord(uid.value);
+  // console.log(res);
+  data.value = res.data.map((item) => ({
+    type: 1,
+    qs: `第${item.Periods}期`,
+    hm: [item.Name],
+    t: item.DrawTime,
+    j: item.Number,
+  }))
+};
+</script>
+
+<style lang="scss"></style>
--- a/src/pages/index/index.config.js
+++ b/src/pages/index/index.config.js
@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '实况摇球机'
+})
--- a/src/pages/index/index.scss
+++ b/src/pages/index/index.scss
@@ -0,0 +1,34 @@
+// * {
+//   object-fit: cover;
+// }
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: #fff;
+}
+
+.aft::before {
+  content: "";
+  width: 2px;
+  height: 90px;
+  background-color: #dbdbdb;
+  position: absolute;
+  top: 50%;
+  right: -30px;
+  transform: translateY(-50%);
+}
+
+.nut-popover-content {
+  width: 150px;
+  font-size: 30px;
+}
+
+.popover .nut-popover-content {
+  width: 1000px;
+  height: 700px;
+  font-size: 30px;
+  overflow: auto;
+  border-radius: 0px;
+}
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
--- a/src/pages/lottery_record/index.config.js
+++ b/src/pages/lottery_record/index.config.js
@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: "开奖记录",
+});
--- a/src/pages/lottery_record/index.scss
+++ b/src/pages/lottery_record/index.scss
@@ -0,0 +1,4 @@
+.line {
+  border-bottom: #f2f2f2 2px solid;
+  margin-bottom: 10px;
+}
--- a/src/pages/lottery_record/index.vue
+++ b/src/pages/lottery_record/index.vue
@@ -0,0 +1,78 @@
+<template>
+  <view>
+    <view class="p-[30px]">
+      <view class="h-[155px] line" v-for="(item, index) in data" :key="index">
+        <view class="flex justify-between text-[#959BB1] text-[28px]">
+          <view>{{ item.qs }}</view>
+          <view>{{ item.t }}</view>
+        </view>
+        <view class="flex mt-[20px] justify-between items-center">
+          <view class="flex justify-between items-center">
+            <view
+              class="m-[5px] rounded-full w-[44px] h-[44px] text-white text-[28px] text-center leading-[44px]"
+              v-for="(itm, index) in item.hm"
+              :key="index"
+            >
+              <view v-if="!itm.num" class="m-[5px]">
+                <plus-cross theme="filled" size="20" fill="#333333" />
+              </view>
+              <view
+                class="rounded-full"
+                :style="{
+                  backgroundColor: itm.color,
+                }"
+                >{{ itm.num }}</view
+              >
+            </view>
+          </view>
+          <view v-if="item.w" class="text-[#EB1313] text-[28px]"
+            >得 {{ item.w }} 积分</view
+          >
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import Taro from "@tarojs/taro";
+import { PlusCross } from "@icon-park/vue-next";
+import { GetLotteryRecord } from "../../api";
+import "./index.scss";
+
+const uid = ref("");
+
+const data = ref([]);
+
+Taro.useLoad((opt) => {
+  uid.value = opt.uid;
+  getList();
+});
+
+const getList = async () => {
+  const res = await GetLotteryRecord(uid.value);
+  data.value = res.data.map((item) => {
+    return {
+      qs: `第${item.Periods}期`,
+      hm: [
+        {
+          num: item.A,
+          color: "#088207",
+        },
+        { num: item.B, color: "#0500FA" },
+        { num: item.C, color: "#0500FA" },
+        { num: item.D, color: "#088207" },
+        { num: item.E, color: "#FF0204" },
+        { num: item.F, color: "#0500FA" },
+        {},
+        { num: item.G, color: "#FF0204" },
+      ],
+      t: item.DrawTime,
+      w: item.Win,
+    };
+  });
+};
+</script>
+
+<style lang="scss"></style>
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -0,0 +1,28 @@
+import { getStorageSync, showToast } from "@tarojs/taro";
+import { createAlova } from "alova";
+import AdapterTaroVue from "@alova/adapter-taro/vue";
+
+const alovaInst = createAlova({
+  baseURL: process.env.TARO_APP_API,
+  ...AdapterTaroVue(),
+  beforeRequest: (instance) => {
+    instance.config.headers = {
+      "Content-Type": "application/json",
+      token: getStorageSync("token"),
+    };
+  },
+  responded: {
+    onSuccess({ data }) {
+      if (data.code === 200) return data.data;
+      return Promise.reject(data.msg);
+    },
+    onError() {
+      showToast({
+        title: "请求失败",
+        icon: "none",
+      });
+    },
+  },
+});
+
+export default alovaInst;
--- a/src/utils/srs.sdk.js
+++ b/src/utils/srs.sdk.js
@@ -0,0 +1,764 @@
+import adapter from "webrtc-adapter";
+
+function SrsError(name, message) {
+  this.name = name;
+  this.message = message;
+  this.stack = new Error().stack;
+}
+SrsError.prototype = Object.create(Error.prototype);
+SrsError.prototype.constructor = SrsError;
+
+// Depends on adapter-7.4.0.min.js from https://github.com/webrtc/adapter
+// Async-awat-prmise based SRS RTC Publisher.
+function SrsRtcPublisherAsync() {
+  var self = {};
+
+  // https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
+  self.constraints = {
+    audio: true,
+    video: {
+      width: { ideal: 320, max: 576 },
+    },
+  };
+
+  // @see https://github.com/rtcdn/rtcdn-draft
+  // @url The WebRTC url to play with, for example:
+  //      webrtc://r.ossrs.net/live/livestream
+  // or specifies the API port:
+  //      webrtc://r.ossrs.net:11985/live/livestream
+  // or autostart the publish:
+  //      webrtc://r.ossrs.net/live/livestream?autostart=true
+  // or change the app from live to myapp:
+  //      webrtc://r.ossrs.net:11985/myapp/livestream
+  // or change the stream from livestream to mystream:
+  //      webrtc://r.ossrs.net:11985/live/mystream
+  // or set the api server to myapi.domain.com:
+  //      webrtc://myapi.domain.com/live/livestream
+  // or set the candidate(eip) of answer:
+  //      webrtc://r.ossrs.net/live/livestream?candidate=39.107.238.185
+  // or force to access https API:
+  //      webrtc://r.ossrs.net/live/livestream?schema=https
+  // or use plaintext, without SRTP:
+  //      webrtc://r.ossrs.net/live/livestream?encrypt=false
+  // or any other information, will pass-by in the query:
+  //      webrtc://r.ossrs.net/live/livestream?vhost=xxx
+  //      webrtc://r.ossrs.net/live/livestream?token=xxx
+  self.publish = async function (url) {
+    var conf = self.__internal.prepareUrl(url);
+    self.pc.addTransceiver("audio", { direction: "sendonly" });
+    self.pc.addTransceiver("video", { direction: "sendonly" });
+    //self.pc.addTransceiver("video", {direction: "sendonly"});
+    //self.pc.addTransceiver("audio", {direction: "sendonly"});
+
+    if (
+      !navigator.mediaDevices &&
+      window.location.protocol === "http:" &&
+      window.location.hostname !== "localhost"
+    ) {
+      throw new SrsError(
+        "HttpsRequiredError",
+        `Please use HTTPS or localhost to publish, read https://github.com/ossrs/srs/issues/2762#issuecomment-983147576`
+      );
+    }
+    var stream = await navigator.mediaDevices.getUserMedia(self.constraints);
+
+    // @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrack
+    stream.getTracks().forEach(function (track) {
+      self.pc.addTrack(track);
+
+      // Notify about local track when stream is ok.
+      self.ontrack && self.ontrack({ track: track });
+    });
+
+    var offer = await self.pc.createOffer();
+    await self.pc.setLocalDescription(offer);
+    var session = await new Promise(function (resolve, reject) {
+      // @see https://github.com/rtcdn/rtcdn-draft
+      var data = {
+        api: conf.apiUrl,
+        tid: conf.tid,
+        streamurl: conf.streamUrl,
+        clientip: null,
+        sdp: offer.sdp,
+      };
+      console.log("Generated offer: ", data);
+
+      const xhr = new XMLHttpRequest();
+      xhr.onload = function () {
+        if (xhr.readyState !== xhr.DONE) return;
+        if (xhr.status !== 200 && xhr.status !== 201) return reject(xhr);
+        const data = JSON.parse(xhr.responseText);
+        console.log("Got answer: ", data);
+        return data.code ? reject(xhr) : resolve(data);
+      };
+      xhr.open("POST", conf.apiUrl, true);
+      xhr.setRequestHeader("Content-type", "application/json");
+      xhr.send(JSON.stringify(data));
+    });
+    await self.pc.setRemoteDescription(
+      new RTCSessionDescription({ type: "answer", sdp: session.sdp })
+    );
+    session.simulator =
+      conf.schema +
+      "//" +
+      conf.urlObject.server +
+      ":" +
+      conf.port +
+      "/rtc/v1/nack/";
+
+    return session;
+  };
+
+  // Close the publisher.
+  self.close = function () {
+    self.pc && self.pc.close();
+    self.pc = null;
+  };
+
+  // The callback when got local stream.
+  // @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrack
+  self.ontrack = function (event) {
+    // Add track to stream of SDK.
+    self.stream.addTrack(event.track);
+  };
+
+  // Internal APIs.
+  self.__internal = {
+    defaultPath: "/rtc/v1/publish/",
+    prepareUrl: function (webrtcUrl) {
+      var urlObject = self.__internal.parse(webrtcUrl);
+
+      // If user specifies the schema, use it as API schema.
+      var schema = urlObject.user_query.schema;
+      schema = schema ? schema + ":" : window.location.protocol;
+
+      var port = urlObject.port || 1985;
+      if (schema === "https:") {
+        port = urlObject.port || 443;
+      }
+
+      // @see https://github.com/rtcdn/rtcdn-draft
+      var api = urlObject.user_query.play || self.__internal.defaultPath;
+      if (api.lastIndexOf("/") !== api.length - 1) {
+        api += "/";
+      }
+
+      var apiUrl = schema + "//" + urlObject.server + ":" + port + api;
+      for (var key in urlObject.user_query) {
+        if (key !== "api" && key !== "play") {
+          apiUrl += "&" + key + "=" + urlObject.user_query[key];
+        }
+      }
+      // Replace /rtc/v1/play/&k=v to /rtc/v1/play/?k=v
+      apiUrl = apiUrl.replace(api + "&", api + "?");
+
+      var streamUrl = urlObject.url;
+
+      return {
+        apiUrl: apiUrl,
+        streamUrl: streamUrl,
+        schema: schema,
+        urlObject: urlObject,
+        port: port,
+        tid: Number(parseInt(new Date().getTime() * Math.random() * 100))
+          .toString(16)
+          .slice(0, 7),
+      };
+    },
+    parse: function (url) {
+      // @see: http://stackoverflow.com/questions/10469575/how-to-use-location-object-to-parse-url-without-redirecting-the-page-in-javascri
+      var a = document.createElement("a");
+      a.href = url
+        .replace("rtmp://", "http://")
+        .replace("webrtc://", "http://")
+        .replace("rtc://", "http://");
+
+      var vhost = a.hostname;
+      var app = a.pathname.substring(1, a.pathname.lastIndexOf("/"));
+      var stream = a.pathname.slice(a.pathname.lastIndexOf("/") + 1);
+
+      // parse the vhost in the params of app, that srs supports.
+      app = app.replace("...vhost...", "?vhost=");
+      if (app.indexOf("?") >= 0) {
+        var params = app.slice(app.indexOf("?"));
+        app = app.slice(0, app.indexOf("?"));
+
+        if (params.indexOf("vhost=") > 0) {
+          vhost = params.slice(params.indexOf("vhost=") + "vhost=".length);
+          if (vhost.indexOf("&") > 0) {
+            vhost = vhost.slice(0, vhost.indexOf("&"));
+          }
+        }
+      }
+
+      // when vhost equals to server, and server is ip,
+      // the vhost is __defaultVhost__
+      if (a.hostname === vhost) {
+        var re = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;
+        if (re.test(a.hostname)) {
+          vhost = "__defaultVhost__";
+        }
+      }
+
+      // parse the schema
+      var schema = "rtmp";
+      if (url.indexOf("://") > 0) {
+        schema = url.slice(0, url.indexOf("://"));
+      }
+
+      var port = a.port;
+      if (!port) {
+        // Finger out by webrtc url, if contains http or https port, to overwrite default 1985.
+        if (schema === "webrtc" && url.indexOf(`webrtc://${a.host}:`) === 0) {
+          port = url.indexOf(`webrtc://${a.host}:80`) === 0 ? 80 : 443;
+        }
+
+        // Guess by schema.
+        if (schema === "http") {
+          port = 80;
+        } else if (schema === "https") {
+          port = 443;
+        } else if (schema === "rtmp") {
+          port = 1935;
+        }
+      }
+
+      var ret = {
+        url: url,
+        schema: schema,
+        server: a.hostname,
+        port: port,
+        vhost: vhost,
+        app: app,
+        stream: stream,
+      };
+      self.__internal.fill_query(a.search, ret);
+
+      // For webrtc API, we use 443 if page is https, or schema specified it.
+      if (!ret.port) {
+        if (schema === "webrtc" || schema === "rtc") {
+          if (ret.user_query.schema === "https") {
+            ret.port = 443;
+          } else if (window.location.href.indexOf("https://") === 0) {
+            ret.port = 443;
+          } else {
+            // For WebRTC, SRS use 1985 as default API port.
+            ret.port = 1985;
+          }
+        }
+      }
+
+      return ret;
+    },
+    fill_query: function (query_string, obj) {
+      // pure user query object.
+      obj.user_query = {};
+
+      if (query_string.length === 0) {
+        return;
+      }
+
+      // split again for angularjs.
+      if (query_string.indexOf("?") >= 0) {
+        query_string = query_string.split("?")[1];
+      }
+
+      var queries = query_string.split("&");
+      for (var i = 0; i < queries.length; i++) {
+        var elem = queries[i];
+
+        var query = elem.split("=");
+        obj[query[0]] = query[1];
+        obj.user_query[query[0]] = query[1];
+      }
+
+      // alias domain for vhost.
+      if (obj.domain) {
+        obj.vhost = obj.domain;
+      }
+    },
+  };
+
+  self.pc = new RTCPeerConnection(null);
+
+  // To keep api consistent between player and publisher.
+  // @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrack
+  // @see https://webrtc.org/getting-started/media-devices
+  self.stream = new MediaStream();
+
+  return self;
+}
+
+// Depends on adapter-7.4.0.min.js from https://github.com/webrtc/adapter
+// Async-await-promise based SRS RTC Player.
+function SrsRtcPlayerAsync() {
+  var self = {};
+
+  // @see https://github.com/rtcdn/rtcdn-draft
+  // @url The WebRTC url to play with, for example:
+  //      webrtc://r.ossrs.net/live/livestream
+  // or specifies the API port:
+  //      webrtc://r.ossrs.net:11985/live/livestream
+  //      webrtc://r.ossrs.net:80/live/livestream
+  // or autostart the play:
+  //      webrtc://r.ossrs.net/live/livestream?autostart=true
+  // or change the app from live to myapp:
+  //      webrtc://r.ossrs.net:11985/myapp/livestream
+  // or change the stream from livestream to mystream:
+  //      webrtc://r.ossrs.net:11985/live/mystream
+  // or set the api server to myapi.domain.com:
+  //      webrtc://myapi.domain.com/live/livestream
+  // or set the candidate(eip) of answer:
+  //      webrtc://r.ossrs.net/live/livestream?candidate=39.107.238.185
+  // or force to access https API:
+  //      webrtc://r.ossrs.net/live/livestream?schema=https
+  // or use plaintext, without SRTP:
+  //      webrtc://r.ossrs.net/live/livestream?encrypt=false
+  // or any other information, will pass-by in the query:
+  //      webrtc://r.ossrs.net/live/livestream?vhost=xxx
+  //      webrtc://r.ossrs.net/live/livestream?token=xxx
+  self.play = async function (url) {
+    var conf = self.__internal.prepareUrl(url);
+    self.pc.addTransceiver("audio", { direction: "recvonly" });
+    self.pc.addTransceiver("video", { direction: "recvonly" });
+    //self.pc.addTransceiver("video", {direction: "recvonly"});
+    //self.pc.addTransceiver("audio", {direction: "recvonly"});
+
+    var offer = await self.pc.createOffer();
+    await self.pc.setLocalDescription(offer);
+    var session = await new Promise(function (resolve, reject) {
+      // @see https://github.com/rtcdn/rtcdn-draft
+      var data = {
+        api: conf.apiUrl,
+        tid: conf.tid,
+        streamurl: conf.streamUrl,
+        clientip: null,
+        sdp: offer.sdp,
+      };
+      console.log("Generated offer: ", data);
+
+      const xhr = new XMLHttpRequest();
+      xhr.onload = function () {
+        if (xhr.readyState !== xhr.DONE) return;
+        if (xhr.status !== 200 && xhr.status !== 201) return reject(xhr);
+        const data = JSON.parse(xhr.responseText);
+        console.log("Got answer: ", data);
+        return data.code ? reject(xhr) : resolve(data);
+      };
+      xhr.open("POST", conf.apiUrl, true);
+      xhr.setRequestHeader("Content-type", "application/json");
+      xhr.send(JSON.stringify(data));
+    });
+    await self.pc.setRemoteDescription(
+      new RTCSessionDescription({ type: "answer", sdp: session.sdp })
+    );
+    session.simulator =
+      conf.schema +
+      "//" +
+      conf.urlObject.server +
+      ":" +
+      conf.port +
+      "/rtc/v1/nack/";
+
+    return session;
+  };
+
+  // Close the player.
+  self.close = function () {
+    self.pc && self.pc.close();
+    self.pc = null;
+  };
+
+  // The callback when got remote track.
+  // Note that the onaddstream is deprecated, @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/onaddstream
+  self.ontrack = function (event) {
+    // https://webrtc.org/getting-started/remote-streams
+    self.stream.addTrack(event.track);
+  };
+
+  // Internal APIs.
+  self.__internal = {
+    defaultPath: "/rtc/v1/play/",
+    prepareUrl: function (webrtcUrl) {
+      var urlObject = self.__internal.parse(webrtcUrl);
+      // If user specifies the schema, use it as API schema.
+      var schema = urlObject.user_query.schema;
+      schema = schema ? schema + ":" : window.location.protocol;
+
+      var port = urlObject.port || 1985;
+      if (schema === "https:") {
+        port = urlObject.port || 443;
+      }
+
+      // @see https://github.com/rtcdn/rtcdn-draft
+      var api = urlObject.user_query.play || self.__internal.defaultPath;
+      if (api.lastIndexOf("/") !== api.length - 1) {
+        api += "/";
+      }
+
+      var apiUrl = schema + "//" + urlObject.server + ":" + port + api;
+      for (var key in urlObject.user_query) {
+        if (key !== "api" && key !== "play") {
+          apiUrl += "&" + key + "=" + urlObject.user_query[key];
+        }
+      }
+      // Replace /rtc/v1/play/&k=v to /rtc/v1/play/?k=v
+      apiUrl = apiUrl.replace(api + "&", api + "?");
+
+      var streamUrl = urlObject.url;
+
+      return {
+        apiUrl: apiUrl,
+        streamUrl: streamUrl,
+        schema: schema,
+        urlObject: urlObject,
+        port: port,
+        tid: Number(parseInt(new Date().getTime() * Math.random() * 100))
+          .toString(16)
+          .slice(0, 7),
+      };
+    },
+    parse: function (url) {
+      // @see: http://stackoverflow.com/questions/10469575/how-to-use-location-object-to-parse-url-without-redirecting-the-page-in-javascri
+      var a = document.createElement("a");
+      a.href = url
+        .replace("rtmp://", "http://")
+        .replace("webrtc://", "http://")
+        .replace("rtc://", "http://");
+
+      var vhost = a.hostname;
+      var app = a.pathname.substring(1, a.pathname.lastIndexOf("/"));
+      var stream = a.pathname.slice(a.pathname.lastIndexOf("/") + 1);
+
+      // parse the vhost in the params of app, that srs supports.
+      app = app.replace("...vhost...", "?vhost=");
+      if (app.indexOf("?") >= 0) {
+        var params = app.slice(app.indexOf("?"));
+        app = app.slice(0, app.indexOf("?"));
+
+        if (params.indexOf("vhost=") > 0) {
+          vhost = params.slice(params.indexOf("vhost=") + "vhost=".length);
+          if (vhost.indexOf("&") > 0) {
+            vhost = vhost.slice(0, vhost.indexOf("&"));
+          }
+        }
+      }
+
+      // when vhost equals to server, and server is ip,
+      // the vhost is __defaultVhost__
+      if (a.hostname === vhost) {
+        var re = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;
+        if (re.test(a.hostname)) {
+          vhost = "__defaultVhost__";
+        }
+      }
+
+      // parse the schema
+      var schema = "rtmp";
+      if (url.indexOf("://") > 0) {
+        schema = url.slice(0, url.indexOf("://"));
+      }
+
+      var port = a.port;
+      if (!port) {
+        // Finger out by webrtc url, if contains http or https port, to overwrite default 1985.
+        if (schema === "webrtc" && url.indexOf(`webrtc://${a.host}:`) === 0) {
+          port = url.indexOf(`webrtc://${a.host}:80`) === 0 ? 80 : 443;
+        }
+
+        // Guess by schema.
+        if (schema === "http") {
+          port = 80;
+        } else if (schema === "https") {
+          port = 443;
+        } else if (schema === "rtmp") {
+          port = 1935;
+        }
+      }
+
+      var ret = {
+        url: url,
+        schema: schema,
+        server: a.hostname,
+        port: port,
+        vhost: vhost,
+        app: app,
+        stream: stream,
+      };
+      self.__internal.fill_query(a.search, ret);
+
+      // For webrtc API, we use 443 if page is https, or schema specified it.
+      if (!ret.port) {
+        if (schema === "webrtc" || schema === "rtc") {
+          if (ret.user_query.schema === "https") {
+            ret.port = 443;
+          } else if (window.location.href.indexOf("https://") === 0) {
+            ret.port = 443;
+          } else {
+            // For WebRTC, SRS use 1985 as default API port.
+            ret.port = 1985;
+          }
+        }
+      }
+      return ret;
+    },
+    fill_query: function (query_string, obj) {
+      // pure user query object.
+      obj.user_query = {};
+
+      if (query_string.length === 0) {
+        return;
+      }
+
+      // split again for angularjs.
+      if (query_string.indexOf("?") >= 0) {
+        query_string = query_string.split("?")[1];
+      }
+
+      var queries = query_string.split("&");
+      for (var i = 0; i < queries.length; i++) {
+        var elem = queries[i];
+
+        var query = elem.split("=");
+        obj[query[0]] = query[1];
+        obj.user_query[query[0]] = query[1];
+      }
+
+      // alias domain for vhost.
+      if (obj.domain) {
+        obj.vhost = obj.domain;
+      }
+    },
+  };
+
+  self.pc = new RTCPeerConnection(null);
+
+  // Create a stream to add track to the stream, @see https://webrtc.org/getting-started/remote-streams
+  self.stream = new MediaStream();
+
+  // https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/ontrack
+  self.pc.ontrack = function (event) {
+    if (self.ontrack) {
+      self.ontrack(event);
+    }
+  };
+
+  return self;
+}
+
+// Depends on adapter-7.4.0.min.js from https://github.com/webrtc/adapter
+// Async-awat-prmise based SRS RTC Publisher by WHIP.
+function SrsRtcWhipWhepAsync() {
+  var self = {};
+
+  // https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
+  self.constraints = {
+    audio: true,
+    video: {
+      width: { ideal: 320, max: 576 },
+    },
+  };
+
+  // See https://datatracker.ietf.org/doc/draft-ietf-wish-whip/
+  // @url The WebRTC url to publish with, for example:
+  //      http://localhost:1985/rtc/v1/whip/?app=live&stream=livestream
+  // @options The options to control playing, supports:
+  //      videoOnly: boolean, whether only play video, default to false.
+  //      audioOnly: boolean, whether only play audio, default to false.
+  self.publish = async function (url, options) {
+    if (url.indexOf("/whip/") === -1)
+      throw new Error(`无效的 WHIP 链接 ${url}`);
+    if (options?.videoOnly && options?.audioOnly)
+      throw new Error(`选项中的videoOnly和audioOnly不能同时为true`);
+
+    if (!options?.videoOnly) {
+      self.pc.addTransceiver("audio", { direction: "sendonly" });
+    } else {
+      self.constraints.audio = false;
+    }
+
+    if (!options?.audioOnly) {
+      self.pc.addTransceiver("video", { direction: "sendonly" });
+    } else {
+      self.constraints.video = false;
+    }
+
+    if (
+      !navigator.mediaDevices &&
+      window.location.protocol === "http:" &&
+      window.location.hostname !== "localhost"
+    ) {
+      throw new SrsError(
+        "请求错误",
+        `请使用 HTTPS 或者 localhost 发布, 建议阅读 https://github.com/ossrs/srs/issues/2762#issuecomment-983147576`
+      );
+    }
+    var stream = await navigator.mediaDevices.getUserMedia(self.constraints);
+
+    // @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrack
+    stream.getTracks().forEach(function (track) {
+      self.pc.addTrack(track);
+
+      // Notify about local track when stream is ok.
+      self.ontrack && self.ontrack({ track: track });
+    });
+
+    var offer = await self.pc.createOffer();
+    await self.pc.setLocalDescription(offer);
+    const answer = await new Promise(function (resolve, reject) {
+      console.log(`生成 sdp: ${offer.sdp}`);
+
+      const xhr = new XMLHttpRequest();
+      xhr.onload = function () {
+        if (xhr.readyState !== xhr.DONE) return;
+        if (xhr.status !== 200 && xhr.status !== 201) return reject(xhr);
+        const data = xhr.responseText;
+        console.log("Got answer: ", data);
+        return data.code ? reject(xhr) : resolve(data);
+      };
+      xhr.open("POST", url, true);
+      xhr.setRequestHeader("Content-type", "application/sdp");
+      xhr.send(offer.sdp);
+    });
+    await self.pc.setRemoteDescription(
+      new RTCSessionDescription({ type: "answer", sdp: answer })
+    );
+
+    return self.__internal.parseId(url, offer.sdp, answer);
+  };
+
+  // See https://datatracker.ietf.org/doc/draft-ietf-wish-whip/
+  // @url The WebRTC url to play with, for example:
+  //      http://localhost:1985/rtc/v1/whep/?app=live&stream=livestream
+  // @options The options to control playing, supports:
+  //      videoOnly: boolean, whether only play video, default to false.
+  //      audioOnly: boolean, whether only play audio, default to false.
+  self.play = async function (url, options) {
+    if (url.indexOf("/whip-play/") === -1 && url.indexOf("/whep/") === -1)
+      throw new Error(`invalid WHEP url ${url}`);
+    if (options?.videoOnly && options?.audioOnly)
+      throw new Error(`选项中的videoOnly和audioOnly不能同时为true`);
+
+    if (!options?.videoOnly)
+      self.pc.addTransceiver("audio", { direction: "recvonly" });
+    if (!options?.audioOnly)
+      self.pc.addTransceiver("video", { direction: "recvonly" });
+
+    var offer = await self.pc.createOffer();
+    await self.pc.setLocalDescription(offer);
+    const answer = await new Promise(function (resolve, reject) {
+      console.log(`Generated offer: ${offer.sdp}`);
+
+      const xhr = new XMLHttpRequest();
+      xhr.onload = function () {
+        if (xhr.readyState !== xhr.DONE) return;
+        if (xhr.status !== 200 && xhr.status !== 201) return reject(xhr);
+        const data = xhr.responseText;
+        console.log("Got answer: ", data);
+        return data.code ? reject(xhr) : resolve(data);
+      };
+      xhr.open("POST", url, true);
+      xhr.setRequestHeader("Content-type", "application/sdp");
+      xhr.send(offer.sdp);
+    });
+    await self.pc.setRemoteDescription(
+      new RTCSessionDescription({ type: "answer", sdp: answer })
+    );
+
+    return self.__internal.parseId(url, offer.sdp, answer);
+  };
+
+  // Close the publisher.
+  self.close = function () {
+    self.pc && self.pc.close();
+    self.pc = null;
+  };
+
+  // The callback when got local stream.
+  // @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrack
+  self.ontrack = function (event) {
+    // Add track to stream of SDK.
+    self.stream.addTrack(event.track);
+  };
+
+  self.pc = new RTCPeerConnection(null);
+
+  // To keep api consistent between player and publisher.
+  // @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrack
+  // @see https://webrtc.org/getting-started/media-devices
+  self.stream = new MediaStream();
+
+  // Internal APIs.
+  self.__internal = {
+    parseId: (url, offer, answer) => {
+      let sessionid = offer.substr(
+        offer.indexOf("a=ice-ufrag:") + "a=ice-ufrag:".length
+      );
+      sessionid = sessionid.substr(0, sessionid.indexOf("\n") - 1) + ":";
+      sessionid += answer.substr(
+        answer.indexOf("a=ice-ufrag:") + "a=ice-ufrag:".length
+      );
+      sessionid = sessionid.substr(0, sessionid.indexOf("\n"));
+
+      const a = document.createElement("a");
+      a.href = url;
+      return {
+        sessionid: sessionid, // Should be ice-ufrag of answer:offer.
+        simulator: a.protocol + "//" + a.host + "/rtc/v1/nack/",
+      };
+    },
+  };
+
+  // https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/ontrack
+  self.pc.ontrack = function (event) {
+    if (self.ontrack) {
+      self.ontrack(event);
+    }
+  };
+
+  return self;
+}
+
+// Format the codec of RTCRtpSender, kind(audio/video) is optional filter.
+// https://developer.mozilla.org/en-US/docs/Web/Media/Formats/WebRTC_codecs#getting_the_supported_codecs
+function SrsRtcFormatSenders(senders, kind) {
+  var codecs = [];
+  senders.forEach(function (sender) {
+    var params = sender.getParameters();
+    params &&
+      params.codecs &&
+      params.codecs.forEach(function (c) {
+        if (kind && sender.track.kind !== kind) {
+          return;
+        }
+
+        if (
+          c.mimeType.indexOf("/red") > 0 ||
+          c.mimeType.indexOf("/rtx") > 0 ||
+          c.mimeType.indexOf("/fec") > 0
+        ) {
+          return;
+        }
+
+        var s = "";
+
+        s += c.mimeType.replace("audio/", "").replace("video/", "");
+        s += ", " + c.clockRate + "HZ";
+        if (sender.track.kind === "audio") {
+          s += ", channels: " + c.channels;
+        }
+        s += ", pt: " + c.payloadType;
+
+        codecs.push(s);
+      });
+  });
+  return codecs.join(", ");
+}
+
+export default {
+  SrsRtcPublisherAsync,
+  SrsRtcWhipWhepAsync,
+  SrsRtcPlayerAsync,
+  SrsRtcFormatSenders,
+  SrsError,
+};
--- a/src/utils/webRtcPlugin.js
+++ b/src/utils/webRtcPlugin.js
@@ -0,0 +1,312 @@
+import { BasePlugin, Events } from "xgplayer";
+// import adapter from "webrtc-adapter";
+
+function SrsError(name, message) {
+  this.name = name;
+  this.message = message;
+  this.stack = new Error().stack;
+}
+SrsError.prototype = Object.create(Error.prototype);
+SrsError.prototype.constructor = SrsError;
+
+export default class webRtcPlugin extends BasePlugin {
+  /**
+   * （必须声明）插件的名称，将作为插件实例的唯一key值
+   * 该参数还最为播放器上该插件的配置透传key值，例如：
+   * var p = new player({
+   *   webRtcPlugin: {
+   *     text: '这是插件webRtcPlugin的配置信息'
+   *   }
+   * })
+   * 在插件afterCreate之后可以通过this.config.text获取到改配置参数
+   **/
+  static get pluginName() {
+    return "webRtcPlugin";
+  }
+
+  static get defaultConfig() {
+    return {
+      text: "这是插件webRtcPlugin的默认Text",
+    };
+  }
+
+  constructor(args) {
+    super(args);
+  }
+
+  afterPlayerInit() {
+    // TODO 播放器调用start初始化播放源之后的逻辑
+  }
+
+  async afterCreate() {
+    // 在afterCreate中可以加入DOM的事件监听
+    console.log(this.player.config);
+    console.log(this.el);
+    const sdk = this.SrsRtcPlayerAsync();
+
+    this.player.root.ssrcObject = sdk.stream;
+
+    await sdk.play(this.player.config.url);
+
+    this.on(Events.PLAY, () => {
+      console.log("播放播放回调");
+    });
+  }
+
+  SrsRtcPlayerAsync() {
+    var self = {};
+
+    // @see https://github.com/rtcdn/rtcdn-draft
+    // @url The WebRTC url to play with, for example:
+    //      webrtc://r.ossrs.net/live/livestream
+    // or specifies the API port:
+    //      webrtc://r.ossrs.net:11985/live/livestream
+    //      webrtc://r.ossrs.net:80/live/livestream
+    // or autostart the play:
+    //      webrtc://r.ossrs.net/live/livestream?autostart=true
+    // or change the app from live to myapp:
+    //      webrtc://r.ossrs.net:11985/myapp/livestream
+    // or change the stream from livestream to mystream:
+    //      webrtc://r.ossrs.net:11985/live/mystream
+    // or set the api server to myapi.domain.com:
+    //      webrtc://myapi.domain.com/live/livestream
+    // or set the candidate(eip) of answer:
+    //      webrtc://r.ossrs.net/live/livestream?candidate=39.107.238.185
+    // or force to access https API:
+    //      webrtc://r.ossrs.net/live/livestream?schema=https
+    // or use plaintext, without SRTP:
+    //      webrtc://r.ossrs.net/live/livestream?encrypt=false
+    // or any other information, will pass-by in the query:
+    //      webrtc://r.ossrs.net/live/livestream?vhost=xxx
+    //      webrtc://r.ossrs.net/live/livestream?token=xxx
+    self.play = async function (url) {
+      var conf = self.__internal.prepareUrl(url);
+      self.pc.addTransceiver("audio", { direction: "recvonly" });
+      self.pc.addTransceiver("video", { direction: "recvonly" });
+
+      var offer = await self.pc.createOffer();
+      await self.pc.setLocalDescription(offer);
+      var session = await new Promise(function (resolve, reject) {
+        // @see https://github.com/rtcdn/rtcdn-draft
+        var data = {
+          api: conf.apiUrl,
+          tid: conf.tid,
+          streamurl: conf.streamUrl,
+          clientip: null,
+          sdp: offer.sdp,
+        };
+        console.log("Generated offer: ", data);
+
+        const xhr = new XMLHttpRequest();
+        xhr.onload = function () {
+          if (xhr.readyState !== xhr.DONE) return;
+          if (xhr.status !== 200 && xhr.status !== 201) return reject(xhr);
+          const data = JSON.parse(xhr.responseText);
+          console.log("Got answer: ", data);
+          return data.code ? reject(xhr) : resolve(data);
+        };
+        xhr.open("POST", conf.apiUrl, true);
+        xhr.setRequestHeader("Content-type", "application/json");
+        xhr.send(JSON.stringify(data));
+      });
+      await self.pc.setRemoteDescription(
+        new RTCSessionDescription({ type: "answer", sdp: session.sdp })
+      );
+      session.simulator =
+        conf.schema +
+        "//" +
+        conf.urlObject.server +
+        ":" +
+        conf.port +
+        "/rtc/v1/nack/";
+
+      return session;
+    };
+
+    // Close the player.
+    self.close = function () {
+      self.pc && self.pc.close();
+      self.pc = null;
+    };
+
+    // The callback when got remote track.
+    // Note that the onaddstream is deprecated, @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/onaddstream
+    self.ontrack = function (event) {
+      // https://webrtc.org/getting-started/remote-streams
+      self.stream.addTrack(event.track);
+    };
+
+    // Internal APIs.
+    self.__internal = {
+      defaultPath: "/rtc/v1/play/",
+      prepareUrl: function (webrtcUrl) {
+        var urlObject = self.__internal.parse(webrtcUrl);
+        // If user specifies the schema, use it as API schema.
+        var schema = urlObject.user_query.schema;
+        schema = schema ? schema + ":" : window.location.protocol;
+
+        var port = urlObject.port || 1985;
+        if (schema === "https:") {
+          port = urlObject.port || 443;
+        }
+
+        // @see https://github.com/rtcdn/rtcdn-draft
+        var api = urlObject.user_query.play || self.__internal.defaultPath;
+        if (api.lastIndexOf("/") !== api.length - 1) {
+          api += "/";
+        }
+
+        var apiUrl = schema + "//" + urlObject.server + ":" + port + api;
+        for (var key in urlObject.user_query) {
+          if (key !== "api" && key !== "play") {
+            apiUrl += "&" + key + "=" + urlObject.user_query[key];
+          }
+        }
+        // Replace /rtc/v1/play/&k=v to /rtc/v1/play/?k=v
+        apiUrl = apiUrl.replace(api + "&", api + "?");
+
+        var streamUrl = urlObject.url;
+
+        return {
+          apiUrl: apiUrl,
+          streamUrl: streamUrl,
+          schema: schema,
+          urlObject: urlObject,
+          port: port,
+          tid: Number(parseInt(new Date().getTime() * Math.random() * 100))
+            .toString(16)
+            .slice(0, 7),
+        };
+      },
+      parse: function (url) {
+        // @see: http://stackoverflow.com/questions/10469575/how-to-use-location-object-to-parse-url-without-redirecting-the-page-in-javascri
+        var a = document.createElement("a");
+        a.href = url
+          .replace("rtmp://", "http://")
+          .replace("webrtc://", "http://")
+          .replace("rtc://", "http://");
+
+        var vhost = a.hostname;
+        var app = a.pathname.substring(1, a.pathname.lastIndexOf("/"));
+        var stream = a.pathname.slice(a.pathname.lastIndexOf("/") + 1);
+
+        // parse the vhost in the params of app, that srs supports.
+        app = app.replace("...vhost...", "?vhost=");
+        if (app.indexOf("?") >= 0) {
+          var params = app.slice(app.indexOf("?"));
+          app = app.slice(0, app.indexOf("?"));
+
+          if (params.indexOf("vhost=") > 0) {
+            vhost = params.slice(params.indexOf("vhost=") + "vhost=".length);
+            if (vhost.indexOf("&") > 0) {
+              vhost = vhost.slice(0, vhost.indexOf("&"));
+            }
+          }
+        }
+
+        // when vhost equals to server, and server is ip,
+        // the vhost is __defaultVhost__
+        if (a.hostname === vhost) {
+          var re = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;
+          if (re.test(a.hostname)) {
+            vhost = "__defaultVhost__";
+          }
+        }
+
+        // parse the schema
+        var schema = "rtmp";
+        if (url.indexOf("://") > 0) {
+          schema = url.slice(0, url.indexOf("://"));
+        }
+
+        var port = a.port;
+        if (!port) {
+          // Finger out by webrtc url, if contains http or https port, to overwrite default 1985.
+          if (schema === "webrtc" && url.indexOf(`webrtc://${a.host}:`) === 0) {
+            port = url.indexOf(`webrtc://${a.host}:80`) === 0 ? 80 : 443;
+          }
+
+          // Guess by schema.
+          if (schema === "http") {
+            port = 80;
+          } else if (schema === "https") {
+            port = 443;
+          } else if (schema === "rtmp") {
+            port = 1935;
+          }
+        }
+
+        var ret = {
+          url: url,
+          schema: schema,
+          server: a.hostname,
+          port: port,
+          vhost: vhost,
+          app: app,
+          stream: stream,
+        };
+        self.__internal.fill_query(a.search, ret);
+
+        // For webrtc API, we use 443 if page is https, or schema specified it.
+        if (!ret.port) {
+          if (schema === "webrtc" || schema === "rtc") {
+            if (ret.user_query.schema === "https") {
+              ret.port = 443;
+            } else if (window.location.href.indexOf("https://") === 0) {
+              ret.port = 443;
+            } else {
+              // For WebRTC, SRS use 1985 as default API port.
+              ret.port = 1985;
+            }
+          }
+        }
+        return ret;
+      },
+      fill_query: function (query_string, obj) {
+        // pure user query object.
+        obj.user_query = {};
+
+        if (query_string.length === 0) {
+          return;
+        }
+
+        // split again for angularjs.
+        if (query_string.indexOf("?") >= 0) {
+          query_string = query_string.split("?")[1];
+        }
+
+        var queries = query_string.split("&");
+        for (var i = 0; i < queries.length; i++) {
+          var elem = queries[i];
+
+          var query = elem.split("=");
+          obj[query[0]] = query[1];
+          obj.user_query[query[0]] = query[1];
+        }
+
+        // alias domain for vhost.
+        if (obj.domain) {
+          obj.vhost = obj.domain;
+        }
+      },
+    };
+
+    self.pc = new RTCPeerConnection(null);
+
+    // Create a stream to add track to the stream, @see https://webrtc.org/getting-started/remote-streams
+    self.stream = new MediaStream();
+
+    // https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/ontrack
+    self.pc.ontrack = function (event) {
+      if (self.ontrack) {
+        self.ontrack(event);
+      }
+    };
+
+    return self;
+  }
+
+  destroy() {
+    // 播放器销毁的时候一些逻辑
+  }
+}