trtc-cloud-js-sdk 1.0.13 → 2.0.0

package/examples/apiExample/src/page/layout.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import './layout.scss';
+
+function Layout(props) {
+  let previewRef = React.createRef();
+
+  return (
+    <div className="example-item">
+      <div ref={previewRef} className="preview-section" id="preview-wrapper">
+        {React.Children.map(props.children, (child) => {
+          // checking isValidElement is the safe way and avoids a typescript error too
+          if (React.isValidElement(child)) {
+            return React.cloneElement(child);
+          }
+          return child;
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default Layout;

package/examples/apiExample/src/page/layout.scss

@@ -0,0 +1,76 @@
+.example-item {
+  padding: 0px 20px;
+  margin: 0 auto;
+  overflow: auto;
+
+  .example-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    line-height: 1.5;
+  }
+
+  .example-desc {
+    margin-bottom: 1rem;
+    font-size: 1rem;
+  }
+
+  .example-button-bar {
+    margin: 0.5rem 0;
+    button {
+      margin: 0 0.5rem;
+      font-size: 1.12rem;
+    }
+  }
+
+  .video-view-preview {
+    /* padding: 1rem 2rem; */
+    /* display: flex;
+    flex-direction: column;
+    justify-content: space-around; */
+  }
+
+  .video-wrapper {
+    flex: 0 0 auto;
+    width: 50%;
+    padding: 0 0.5rem;
+
+    .user-desc {
+      margin-bottom: 1rem;
+    }
+
+    #localVideoWrapper,
+    #remoteVideoWrapper {
+      width: 320px;
+      height: 184px;
+      box-shadow: 2px 2px 18px 4px #c0c0c0;
+      background-color: lightblue;
+    }
+
+    .local-statistic,
+    .remote-statistic{
+      margin-top: 1rem;
+    }
+  }
+
+  .config-form {
+    margin: 1rem 0;
+    .form-line {
+      padding: 0.5rem 0.25rem;
+    }
+
+    input[type="radio"] + label {
+      margin-right: 0.5rem;
+      &:last-child {
+        margin-right: 0;
+      }
+
+      &:hover {
+        color: blue;
+      }
+    }
+
+    input[type="range"] {
+      width: 12rem;
+    }
+  }
+}

package/examples/apiExample/src/utils/utils.js

@@ -0,0 +1,35 @@
+export function validParams(userId, roomId, sdkAppId, userSignature) {
+  const errors = [];
+  if (!userId) {
+    errors.push('"userId" is not valid');
+  }
+  if (roomId === 0) {
+    errors.push('"roomId" is not valid');
+  }
+  if (sdkAppId === 0) {
+    errors.push('"sdkAppId" is not valid');
+  }
+  if (userSignature === '') {
+    errors.push('"userSignature" is not valid');
+  }
+  if (errors.length) {
+    console.error(errors);
+    return false;
+  }
+  return true;
+}
+
+/**
+ * 从 window.location.href 中获取指定key的value
+ * @param {*} key 要获取的 key
+ * @returns window.location.href 中指定key对应的value
+ * @example
+ * const value = getUrlParam(key);
+ */
+export function getUrlParam(key) {
+  const url = window.location.href.replace(/^[^?]*\?/, '');
+  const regexp = new RegExp(`(^|&)${key}=([^&#]*)(&|$|)`, 'i');
+  const paramMatch = url.match(regexp);
+
+  return paramMatch ? paramMatch[2] : null;
+}