trtc-cloud-js-sdk 1.0.13 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc.js +88 -0
- package/.prettierrc +5 -0
- package/CHANGELOG.md +58 -0
- package/build/jsdoc/clean-doc.js +12 -0
- package/build/jsdoc/fix-doc.js +141 -0
- package/build/jsdoc/jsdoc.json +42 -0
- package/build/package-bundle.js +29 -0
- package/build/rollup.config.dev.js +88 -0
- package/build/rollup.config.prod.js +93 -0
- package/build/rollup.js +359 -0
- package/build/template/npm-package/package.json +24 -0
- package/coverage/Chrome 103.0.5060 (Mac OS X 10.15.7)/base.css +213 -0
- package/coverage/Chrome 103.0.5060 (Mac OS X 10.15.7)/index.html +80 -0
- package/coverage/Chrome 103.0.5060 (Mac OS X 10.15.7)/prettify.css +1 -0
- package/coverage/Chrome 103.0.5060 (Mac OS X 10.15.7)/prettify.js +1 -0
- package/coverage/Chrome 103.0.5060 (Mac OS X 10.15.7)/sort-arrow-sprite.png +0 -0
- package/coverage/Chrome 103.0.5060 (Mac OS X 10.15.7)/sorter.js +158 -0
- package/examples/apiExample/.env +2 -0
- package/examples/apiExample/README.md +70 -0
- package/examples/apiExample/package-lock.json +30915 -0
- package/examples/apiExample/package.json +51 -0
- package/examples/apiExample/public/audio.js +195 -0
- package/examples/apiExample/public/audio.js.map +7 -0
- package/examples/apiExample/public/av_processing.js +1 -0
- package/examples/apiExample/public/basic/av_processing.wasm +0 -0
- package/examples/apiExample/public/basic/worker.js +10434 -0
- package/examples/apiExample/public/favicon.ico +0 -0
- package/examples/apiExample/public/index.html +47 -0
- package/examples/apiExample/public/logo192.png +0 -0
- package/examples/apiExample/public/logo512.png +0 -0
- package/examples/apiExample/public/manifest.json +25 -0
- package/examples/apiExample/public/robots.txt +3 -0
- package/examples/apiExample/src/App.css +37 -0
- package/examples/apiExample/src/App.js +25 -0
- package/examples/apiExample/src/api/http.js +127 -0
- package/examples/apiExample/src/api/nav.js +44 -0
- package/examples/apiExample/src/components/BasicInfoComponent.css +16 -0
- package/examples/apiExample/src/components/BasicInfoComponent.js +27 -0
- package/examples/apiExample/src/config/gen-test-user-sig.js +64 -0
- package/examples/apiExample/src/config/lib-generate-test-usersig.min.js +7052 -0
- package/examples/apiExample/src/config/nav.js +136 -0
- package/examples/apiExample/src/home.js +16 -0
- package/examples/apiExample/src/index.css +21 -0
- package/examples/apiExample/src/index.js +12 -0
- package/examples/apiExample/src/logo.svg +1 -0
- package/examples/apiExample/src/page/basic/screen-share/index.css +52 -0
- package/examples/apiExample/src/page/basic/screen-share/index.js +223 -0
- package/examples/apiExample/src/page/basic/setDevice/index.js +262 -0
- package/examples/apiExample/src/page/basic/setDevice/index.scss +93 -0
- package/examples/apiExample/src/page/basic/video-call/index.js +521 -0
- package/examples/apiExample/src/page/basic/video-call/index.scss +93 -0
- package/examples/apiExample/src/page/basic/video-call-init/index.js +382 -0
- package/examples/apiExample/src/page/basic/video-call-init/index.scss +93 -0
- package/examples/apiExample/src/page/basic/video-live/index.css +37 -0
- package/examples/apiExample/src/page/basic/video-live/index.js +188 -0
- package/examples/apiExample/src/page/layout.js +22 -0
- package/examples/apiExample/src/page/layout.scss +76 -0
- package/examples/apiExample/src/utils/utils.js +35 -0
- package/examples/jsExample/assets/css/bootstrap-material-design.css +12169 -0
- package/examples/jsExample/assets/css/bootstrap-material-design.min.css +8 -0
- package/examples/jsExample/assets/css/common.css +48 -0
- package/examples/jsExample/assets/icon/iconfont.js +1 -0
- package/examples/jsExample/assets/js/bootstrap-material-design.js +6939 -0
- package/examples/jsExample/assets/js/bootstrap-material-design.js.map +1 -0
- package/examples/jsExample/assets/js/bootstrap-material-design.min.js +1 -0
- package/examples/jsExample/assets/js/graph.js +695 -0
- package/examples/jsExample/assets/js/jquery-3.2.1.min.js +4 -0
- package/examples/jsExample/assets/js/jquery-3.2.1.slim.min.js +4 -0
- package/examples/jsExample/assets/js/lib-generate-test-usersig.min.js +2 -0
- package/examples/jsExample/assets/js/popper.js +2442 -0
- package/examples/jsExample/index.html +57 -0
- package/examples/jsExample/rtc/css/common.css +82 -0
- package/examples/jsExample/rtc/index.html +107 -0
- package/examples/jsExample/rtc/js/index.js +142 -0
- package/examples/vueDemo/LICENSE +21 -0
- package/examples/vueDemo/README.md +144 -0
- package/examples/vueDemo/README_EN.md +136 -0
- package/examples/vueDemo/av_processing.wasm +0 -0
- package/examples/vueDemo/index.html +23 -0
- package/examples/vueDemo/package-lock.json +1375 -0
- package/examples/vueDemo/package.json +36 -0
- package/examples/vueDemo/src/App.vue +12 -0
- package/examples/vueDemo/src/api/index.js +59 -0
- package/examples/vueDemo/src/assets/css/color-dark.css +28 -0
- package/examples/vueDemo/src/assets/css/icon.css +4 -0
- package/examples/vueDemo/src/assets/css/main.css +177 -0
- package/examples/vueDemo/src/assets/img/img.jpg +0 -0
- package/examples/vueDemo/src/assets/img/login-bg.jpg +0 -0
- package/examples/vueDemo/src/components/Header.vue +172 -0
- package/examples/vueDemo/src/components/Sidebar.vue +117 -0
- package/examples/vueDemo/src/components/Tags.vue +174 -0
- package/examples/vueDemo/src/components/tendency.vue +206 -0
- package/examples/vueDemo/src/components/trtc/main-menu.vue +50 -0
- package/examples/vueDemo/src/components/trtc/nav-bar.vue +53 -0
- package/examples/vueDemo/src/components/trtc/show-screen-capture.vue +118 -0
- package/examples/vueDemo/src/components/trtc/trtc-state-check.vue +117 -0
- package/examples/vueDemo/src/config/gen-test-user-sig.js +67 -0
- package/examples/vueDemo/src/config/lib-generate-test-usersig.min.js +7052 -0
- package/examples/vueDemo/src/main.js +11 -0
- package/examples/vueDemo/src/plugins/element.js +17 -0
- package/examples/vueDemo/src/router/index.js +73 -0
- package/examples/vueDemo/src/store/sidebar.js +17 -0
- package/examples/vueDemo/src/store/tags.js +48 -0
- package/examples/vueDemo/src/utils/i18n.js +24 -0
- package/examples/vueDemo/src/utils/request.js +34 -0
- package/examples/vueDemo/src/utils/utils.js +35 -0
- package/examples/vueDemo/src/views/Home.vue +46 -0
- package/examples/vueDemo/src/views/I18n.vue +40 -0
- package/examples/vueDemo/src/views/Icon.vue +229 -0
- package/examples/vueDemo/src/views/basic/trtc.vue +194 -0
- package/examples/vueDemo/src/views/feature/index.vue +259 -0
- package/examples/vueDemo/src/views/github/index.vue +243 -0
- package/examples/vueDemo/src/views/improve/live-index.vue +256 -0
- package/examples/vueDemo/src/views/improve/live-room-anchor.vue +689 -0
- package/examples/vueDemo/src/views/improve/live-room-audience.vue +383 -0
- package/examples/vueDemo/src/views/sdkAppId/index.vue +284 -0
- package/examples/vueDemo/vite.config.js +18 -0
- package/examples/vueDemo/worker.js +22 -0
- package/karma.conf.js +99 -0
- package/package.json +57 -7
- package/scripts/publish.js +86 -0
- package/src/Camera.ts +80 -0
- package/src/Mic.ts +145 -0
- package/src/common/IError.ts +6 -0
- package/src/common/ITRTCCloud.ts +68 -0
- package/src/common/constants.ts +116 -0
- package/src/common/trtc-code.ts +43 -0
- package/src/common/trtc-define.ts +1007 -0
- package/src/common/trtc-event.ts +29 -0
- package/src/index.ts +1672 -0
- package/src/utils/environment.js +297 -0
- package/src/utils/raf.js +131 -0
- package/src/utils/time.js +22 -0
- package/src/utils/utils.ts +71 -0
- package/src/utils/uuid.js +12 -0
- package/test/unit/env.test.js +25 -0
- package/test/unit/get-user-media.test.js +40 -0
- package/test/unit/ice-parser.test.js +23 -0
- package/test/unit/sdp.test.js +45 -0
- package/test/unit/signal.test.js +78 -0
- package/tsconfig.json +32 -0
- package/trtc-cloud-js-sdk.js +0 -1
- /package/{README.md → build/template/npm-package/README.md} +0 -0
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<!-- Required meta tags -->
|
|
6
|
+
<meta charset="utf-8">
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
8
|
+
|
|
9
|
+
<!-- Material Design for Bootstrap fonts and icons -->
|
|
10
|
+
<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons"> -->
|
|
11
|
+
|
|
12
|
+
<!-- Material Design for Bootstrap CSS -->
|
|
13
|
+
<link rel="stylesheet" href="./assets/css/bootstrap-material-design.min.css">
|
|
14
|
+
<link rel="stylesheet" href="./assets/css/common.css">
|
|
15
|
+
|
|
16
|
+
<title>TRTC Web SDK Samples </title>
|
|
17
|
+
</head>
|
|
18
|
+
|
|
19
|
+
<body>
|
|
20
|
+
<nav class="navbar navbar-light fixed-top rtc-primary-bg">
|
|
21
|
+
<h5>TRTC Web SDK Samples</h5>
|
|
22
|
+
</nav>
|
|
23
|
+
<div class="custom-container container">
|
|
24
|
+
<p> <a href="./rtc/index.html" target="_blank">实时音视频通话</a> </p>
|
|
25
|
+
<!-- <p> <a href="./live/index.html" target="_blank">互动直播,观众连麦</a> </p>
|
|
26
|
+
<p> <a href="./rtc-screen/index.html" target="_blank">实时音视频通话+屏幕分享</a> </p>
|
|
27
|
+
<p> <a href="./screenshare/index.html" target="_blank">屏幕分享</a> </p>
|
|
28
|
+
<p> <a href="./add-remove-track/index.html" target="_blank">进房默认只推音频,通过addTrack/removeTrack增加或删除视频通话</a> </p>
|
|
29
|
+
<p> <a href="./add-remove-audio/index.html" target="_blank">进房默认只推视频,通过addTrack/removeTrack增加或删除音频通话</a> </p>
|
|
30
|
+
<p> <a href="./replace-track/index.html" target="_blank">用replaceTrack()替换音视频轨道</a> </p>
|
|
31
|
+
<p> <a href="./proxy/index.html" target="_blank">代理服务器+TURN服务器设置</a> </p>
|
|
32
|
+
<p> <a href="./switch-device/index.html" target="_blank">切换摄像头、麦克风</a> </p>
|
|
33
|
+
<p> <a href="./bwe/index.html" target="_blank">带宽/视频码率设置 - (Internal Test Only)</a> </p>
|
|
34
|
+
<p> <a href="./subscribe/index.html" target="_blank"> 远端流订阅 - (Internal Test Only)</a> </p>
|
|
35
|
+
<p> <a href="./capture-stream-video/index.html" target="_blank">从videoElement捕获stream并推流</a> </p>
|
|
36
|
+
<p> <a href="./capture-stream-canvas/index.html" target="_blank">从canvas捕获stream并推流</a> </p>
|
|
37
|
+
<p> <a href="./custom-capture-render/index.html" target="_blank">自定义采集和渲染</a> </p>
|
|
38
|
+
<p> <a href="./take-snapshot/index.html" target="_blank">截屏</a> </p>
|
|
39
|
+
<p> <a href="./audio-bitrate/index.html" target="_blank">音频码率设置</a> </p>
|
|
40
|
+
<p> <a href="./streaming/index.html" target="_blank">旁路直播 | 录制回调</a> </p>
|
|
41
|
+
<p> <a href="./push-black-frame/index.html" target="_blank">关闭摄像头,推黑帧</a> </p>
|
|
42
|
+
<p> <a href="./mix-mcu/index.html" target="_blank">混流转码</a> </p>
|
|
43
|
+
<p> <a href="./set-video-profile/index.html" target="_blank">动态设置视频属性</a> </p> -->
|
|
44
|
+
<br>
|
|
45
|
+
<br>
|
|
46
|
+
</div>
|
|
47
|
+
|
|
48
|
+
<!-- Optional JavaScript -->
|
|
49
|
+
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
|
50
|
+
<!-- <script src="/assets/js/jquery-3.2.1.slim.min.js"></script> -->
|
|
51
|
+
<script src="./assets/js/jquery-3.2.1.min.js"></script>
|
|
52
|
+
<script src="./assets/js/popper.js"></script>
|
|
53
|
+
<script src="./assets/js/bootstrap-material-design.js"></script>
|
|
54
|
+
<script>$(document).ready(function () { $('body').bootstrapMaterialDesign(); });</script>
|
|
55
|
+
</body>
|
|
56
|
+
|
|
57
|
+
</html>
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
html, body {
|
|
2
|
+
margin: 0;
|
|
3
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
|
4
|
+
-webkit-font-smoothing: antialiased;
|
|
5
|
+
-moz-osx-font-smoothing: grayscale;
|
|
6
|
+
height: 100%;
|
|
7
|
+
background: #fafafa; }
|
|
8
|
+
|
|
9
|
+
.rtc-primary-bg {
|
|
10
|
+
color: #fff;
|
|
11
|
+
background-color: #1E88E5 !important;
|
|
12
|
+
align-items: center; }
|
|
13
|
+
|
|
14
|
+
.custom-row-container {
|
|
15
|
+
display: flex;
|
|
16
|
+
margin: 0 15px; }
|
|
17
|
+
|
|
18
|
+
.navbar {
|
|
19
|
+
display: flex;
|
|
20
|
+
align-content: center;
|
|
21
|
+
height: 54px; }
|
|
22
|
+
|
|
23
|
+
h5 {
|
|
24
|
+
margin: 0; }
|
|
25
|
+
|
|
26
|
+
.card-body.rtc-expand-card {
|
|
27
|
+
color: #fff !important;
|
|
28
|
+
background-color: #9e9b9b !important; }
|
|
29
|
+
|
|
30
|
+
.btn.rtc-expand-btn {
|
|
31
|
+
width: 398px;
|
|
32
|
+
color: #fff !important;
|
|
33
|
+
transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
|
34
|
+
background-color: #6b6363 !important;
|
|
35
|
+
display: flex;
|
|
36
|
+
padding: 0 24px 0 24px;
|
|
37
|
+
min-height: 48px;
|
|
38
|
+
transition: min-height 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
|
39
|
+
text-decoration: none;
|
|
40
|
+
margin: 0; }
|
|
41
|
+
|
|
42
|
+
.custom-container {
|
|
43
|
+
margin: left;
|
|
44
|
+
margin: 0 15px;
|
|
45
|
+
margin-top: 88px;
|
|
46
|
+
box-sizing: border-box; }
|
|
47
|
+
|
|
48
|
+
.card.custom-card {
|
|
49
|
+
width: 398px;
|
|
50
|
+
padding-right: 15px;
|
|
51
|
+
padding-left: 15px;
|
|
52
|
+
margin-bottom: 10px; }
|
|
53
|
+
|
|
54
|
+
.video-grid {
|
|
55
|
+
margin-left: 25px;
|
|
56
|
+
display: grid;
|
|
57
|
+
grid-gap: 20px;
|
|
58
|
+
grid-template-columns: repeat(2, auto);
|
|
59
|
+
grid-template-rows: auto; }
|
|
60
|
+
|
|
61
|
+
.card {
|
|
62
|
+
width: 398px; }
|
|
63
|
+
|
|
64
|
+
.radio-list {
|
|
65
|
+
display: flex;
|
|
66
|
+
margin: auto;
|
|
67
|
+
margin-top: 10px; }
|
|
68
|
+
|
|
69
|
+
.radio-list > .radio {
|
|
70
|
+
margin: 0 10px;
|
|
71
|
+
width: 50px; }
|
|
72
|
+
|
|
73
|
+
#local_stream {
|
|
74
|
+
position: relative; }
|
|
75
|
+
|
|
76
|
+
#local_video_info {
|
|
77
|
+
position: absolute; }
|
|
78
|
+
|
|
79
|
+
.video-view,
|
|
80
|
+
#local_stream, #local_video_info {
|
|
81
|
+
width: 480px;
|
|
82
|
+
height: 320px; }
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<!-- Required meta tags -->
|
|
6
|
+
<meta charset="utf-8">
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
8
|
+
|
|
9
|
+
<!-- Material Design for Bootstrap fonts and icons -->
|
|
10
|
+
<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons"> -->
|
|
11
|
+
|
|
12
|
+
<!-- Material Design for Bootstrap CSS -->
|
|
13
|
+
<link rel="stylesheet" href="../assets/css/bootstrap-material-design.min.css">
|
|
14
|
+
<link rel="stylesheet" href="./css/common.css">
|
|
15
|
+
|
|
16
|
+
<title>TRTC Web SDK Samples - 基础音视频通话</title>
|
|
17
|
+
</head>
|
|
18
|
+
|
|
19
|
+
<body>
|
|
20
|
+
<nav class="navbar navbar-light fixed-top rtc-primary-bg">
|
|
21
|
+
<h5>基础音视频通话</h5>
|
|
22
|
+
</nav>
|
|
23
|
+
<form id="form">
|
|
24
|
+
<div class="custom-container container">
|
|
25
|
+
<div class="row">
|
|
26
|
+
<div class="custom-row-container">
|
|
27
|
+
<div class="row">
|
|
28
|
+
<div class="col-ms">
|
|
29
|
+
<div class="card custom-card">
|
|
30
|
+
<div class="form-group">
|
|
31
|
+
<label for="sdkAppId" class="bmd-label-floating">sdkAppId:</label>
|
|
32
|
+
<input type="text" class="form-control" name="sdkAppId" id="sdkAppId">
|
|
33
|
+
</div>
|
|
34
|
+
<div class="form-group bmd-form-group">
|
|
35
|
+
<label for="userSig" class="bmd-label-floating">userSig:</label>
|
|
36
|
+
<input type="text" class="form-control" name="userSig" id="userSig">
|
|
37
|
+
</div>
|
|
38
|
+
<div class="form-group">
|
|
39
|
+
<label for="userId" class="bmd-label-floating">userID:</label>
|
|
40
|
+
<input type="text" class="form-control" name="userId" id="userId">
|
|
41
|
+
</div>
|
|
42
|
+
<div class="form-group bmd-form-group">
|
|
43
|
+
<label for="roomId" class="bmd-label-floating">roomID:</label>
|
|
44
|
+
<input type="text" class="form-control" name="roomId" id="roomId">
|
|
45
|
+
</div>
|
|
46
|
+
<div class="form-group bmd-form-group">
|
|
47
|
+
<button id="join" type="button" class="btn btn-raised btn-primary rtc-primary-bg">JOIN</button>
|
|
48
|
+
<button id="leave" type="button" class="btn btn-raised btn-primary rtc-primary-bg">LEAVE</button>
|
|
49
|
+
<button id="enableAudioVolumeEvaluation" type="button"
|
|
50
|
+
class="btn btn-raised btn-primary rtc-primary-bg">enableAudioVolumeEvaluation</button>
|
|
51
|
+
|
|
52
|
+
<br>
|
|
53
|
+
<button id="startAudio" type="button" class="btn btn-raised btn-primary rtc-primary-bg">打开音频</button>
|
|
54
|
+
<button id="stopAudio" type="button" class="btn btn-raised btn-primary rtc-primary-bg">关闭音频</button>
|
|
55
|
+
|
|
56
|
+
<br>
|
|
57
|
+
<button id="muteAllRemoteAudio" type="button"
|
|
58
|
+
class="btn btn-raised btn-primary rtc-primary-bg">打开/关闭远端所有音频</button>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
<div class="card">
|
|
62
|
+
<!-- <button class="btn btn-raised rtc-expand-btn" id="settings" data-toggle="collapse"
|
|
63
|
+
data-target="#setting-collapse" aria-expanded="false" aria-controls="collapse">
|
|
64
|
+
Settings
|
|
65
|
+
</button> -->
|
|
66
|
+
<div id="setting-collapse" class="collapse" aria-labelledby="setting-collapse">
|
|
67
|
+
<div class="card-body">
|
|
68
|
+
<div class="form-group">
|
|
69
|
+
<label for="cameraId" class="bmd-label-floating">CAMERA</label>
|
|
70
|
+
<select class="form-control" id="cameraId" name="cameraId">
|
|
71
|
+
</select>
|
|
72
|
+
</div>
|
|
73
|
+
<div class="form-group">
|
|
74
|
+
<label for="microphoneId" class="bmd-label-floating">MICROPHONE</label>
|
|
75
|
+
<select class="form-control" id="microphoneId" name="microphoneId">
|
|
76
|
+
</select>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
</form>
|
|
87
|
+
<div class="video-grid" id="video_grid">
|
|
88
|
+
<div id="local_stream" class="video-placeholder">
|
|
89
|
+
<div id="local_video_info" class="video-info"></div>
|
|
90
|
+
</div>
|
|
91
|
+
<div id="remote_stream" class="video-placeholder">
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
|
|
95
|
+
<!-- Optional JavaScript -->
|
|
96
|
+
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
|
97
|
+
<!-- <script src="/assets/js/jquery-3.2.1.slim.min.js"></script> -->
|
|
98
|
+
<script src="../assets/js/jquery-3.2.1.min.js"></script>
|
|
99
|
+
<script src="../assets/js/popper.js"></script>
|
|
100
|
+
<script src="../assets/js/bootstrap-material-design.js"></script>
|
|
101
|
+
<script>$(document).ready(function () { $('body').bootstrapMaterialDesign(); });</script>
|
|
102
|
+
<!-- <script src="../dist/trtc-cloud-js-sdk.js"></script> -->
|
|
103
|
+
<script src="https://web.sdk.qcloud.com/trtc/webrtc/trtcCloud/download/trtc-cloud-js-sdk.js"></script>
|
|
104
|
+
<script src="./js/index.js"></script>
|
|
105
|
+
</body>
|
|
106
|
+
|
|
107
|
+
</html>
|
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
/* global $ TRTC */
|
|
2
|
+
/* eslint-disable require-jsdoc */
|
|
3
|
+
|
|
4
|
+
const trtcCloud = new TRTCCloud();
|
|
5
|
+
|
|
6
|
+
const LOG_PREFIX = '[Video Call]';
|
|
7
|
+
const sdkAppId = 0;
|
|
8
|
+
const userSig = '';
|
|
9
|
+
$('#sdkAppId').val(sdkAppId);
|
|
10
|
+
$('#userSig').val(userSig);
|
|
11
|
+
$('#userId').val('testUserId');
|
|
12
|
+
$('#roomId').val('49332');
|
|
13
|
+
let isMuteAllRemoteAudio = false;
|
|
14
|
+
|
|
15
|
+
$('#sdkAppId').on('change', (e) => {
|
|
16
|
+
e.preventDefault();
|
|
17
|
+
console.log('sdkAppId changed');
|
|
18
|
+
});
|
|
19
|
+
$('#userSig').on('input', (e) => {
|
|
20
|
+
e.preventDefault();
|
|
21
|
+
console.log('userSig changed');
|
|
22
|
+
});
|
|
23
|
+
$('#userId').on('change', (e) => {
|
|
24
|
+
e.preventDefault();
|
|
25
|
+
console.log('userId changed');
|
|
26
|
+
});
|
|
27
|
+
$('#roomId').on('input', (e) => {
|
|
28
|
+
e.preventDefault();
|
|
29
|
+
const validateVal = e.target.value.replace(/[^\d]/g, '');
|
|
30
|
+
$('#roomId').val(validateVal);
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
// 进房
|
|
34
|
+
async function enterRoom() {
|
|
35
|
+
subscribeEvents();
|
|
36
|
+
const localVideoWrapper = document.getElementById('local_stream');
|
|
37
|
+
await trtcCloud.startLocalPreview(localVideoWrapper);
|
|
38
|
+
const trtcParams = new TRTCParams();
|
|
39
|
+
trtcParams.userId = $('#userId').val();
|
|
40
|
+
trtcParams.sdkAppId = +$('#sdkAppId').val();
|
|
41
|
+
trtcParams.userSig = $('#userSig').val();
|
|
42
|
+
trtcParams.roomId = +$('#roomId').val();
|
|
43
|
+
await trtcCloud.enterRoom(trtcParams, 0);
|
|
44
|
+
}
|
|
45
|
+
// 退房
|
|
46
|
+
function exitRoom() {
|
|
47
|
+
trtcCloud.stopLocalPreview();
|
|
48
|
+
trtcCloud.stopLocalAudio();
|
|
49
|
+
unsubscribeEvents();
|
|
50
|
+
trtcCloud.exitRoom();
|
|
51
|
+
}
|
|
52
|
+
// 注册事件
|
|
53
|
+
function subscribeEvents() {
|
|
54
|
+
trtcCloud.on('onError', onError);
|
|
55
|
+
trtcCloud.on('onEnterRoom', onEnterRoom);
|
|
56
|
+
trtcCloud.on('onExitRoom', onExitRoom);
|
|
57
|
+
trtcCloud.on('onRemoteUserEnterRoom', onRemoteUserEnterRoom);
|
|
58
|
+
trtcCloud.on('onRemoteUserLeaveRoom', onRemoteUserLeaveRoom);
|
|
59
|
+
trtcCloud.on('onUserVideoAvailable', onUserVideoAvailable);
|
|
60
|
+
trtcCloud.on('onUserAudioAvailable', handleUserAudioAvailable);
|
|
61
|
+
trtcCloud.on('onFirstVideoFrame', onFirstVideoFrame);
|
|
62
|
+
trtcCloud.on('onUserVoiceVolume', handleUserVoiceVolume);
|
|
63
|
+
}
|
|
64
|
+
// 注销事件
|
|
65
|
+
function unsubscribeEvents() {
|
|
66
|
+
trtcCloud.off('*');
|
|
67
|
+
};
|
|
68
|
+
function onEnterRoom(elapsed) {
|
|
69
|
+
console.warn(`${LOG_PREFIX} onEnterRoom: elapsed: ${elapsed}`);
|
|
70
|
+
if (elapsed < 0) {
|
|
71
|
+
return;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
function onExitRoom(reason) {
|
|
75
|
+
console.warn(`${LOG_PREFIX} onExitRoom: reason: ${reason}`);
|
|
76
|
+
}
|
|
77
|
+
function onError(errCode, errMsg) {
|
|
78
|
+
console.warn(`${LOG_PREFIX} onError: errCode: ${errCode}, errMsg: ${errMsg}`);
|
|
79
|
+
}
|
|
80
|
+
function onRemoteUserEnterRoom(userId) {
|
|
81
|
+
console.warn(`${LOG_PREFIX} onRemoteUserEnterRoom: userId: ${userId}`);
|
|
82
|
+
}
|
|
83
|
+
function onRemoteUserLeaveRoom(userId, reason) {
|
|
84
|
+
console.warn(`${LOG_PREFIX} onRemoteUserLeaveRoom: userId: ${userId}, ${reason}`);
|
|
85
|
+
}
|
|
86
|
+
function onUserVideoAvailable(userId, available) {
|
|
87
|
+
console.warn(`${LOG_PREFIX} onUserVideoAvailable: userId: ${userId}, available: ${available}`);
|
|
88
|
+
if (available) {
|
|
89
|
+
const remoteVideoWrapper = document.getElementById('remote_stream');
|
|
90
|
+
// trtcCloud.startRemoteView(userId, remoteVideoWrapper, TRTCVideoStreamType.TRTCVideoStreamTypeBig);
|
|
91
|
+
} else {
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
// audio available callback
|
|
95
|
+
function handleUserAudioAvailable(userId, available) {
|
|
96
|
+
console.warn('-- audio available callback = ', userId, available);
|
|
97
|
+
if (available) {
|
|
98
|
+
const remoteVideoWrapper = document.getElementById('remote_stream');
|
|
99
|
+
// trtcCloud.startRemoteView(userId, remoteVideoWrapper);
|
|
100
|
+
} else {
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
function onFirstVideoFrame(userId, streamType, width, height) {
|
|
104
|
+
console.warn(`${LOG_PREFIX} onFirstVideoFrame: userId: ${userId} streamType: ${streamType} width: ${width} height: ${height}`);
|
|
105
|
+
if (userId) {
|
|
106
|
+
// 远程用户(remote user)
|
|
107
|
+
} else {
|
|
108
|
+
// 本地用户(local user)
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
function handleUserVoiceVolume(userVolumes) {
|
|
113
|
+
console.warn('--------', userVolumes);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
$('#join').on('click', async (e) => {
|
|
117
|
+
e.preventDefault();
|
|
118
|
+
await enterRoom();
|
|
119
|
+
});
|
|
120
|
+
$('#leave').on('click', async (e) => {
|
|
121
|
+
e.preventDefault();
|
|
122
|
+
await exitRoom();
|
|
123
|
+
});
|
|
124
|
+
|
|
125
|
+
// 启用或关闭音量大小提示
|
|
126
|
+
$('#enableAudioVolumeEvaluation').on('click', async (e) => {
|
|
127
|
+
await trtcCloud.enableAudioVolumeEvaluation(1000);
|
|
128
|
+
});
|
|
129
|
+
|
|
130
|
+
// 打开音频
|
|
131
|
+
$('#startAudio').on('click', async (e) => {
|
|
132
|
+
await trtcCloud.startLocalAudio();
|
|
133
|
+
});
|
|
134
|
+
// 打开音频
|
|
135
|
+
$('#stopAudio').on('click', async (e) => {
|
|
136
|
+
await trtcCloud.stopLocalAudio();
|
|
137
|
+
});
|
|
138
|
+
// 打开、关闭远端所有音频
|
|
139
|
+
$('#muteAllRemoteAudio').on('click', async (e) => {
|
|
140
|
+
isMuteAllRemoteAudio = !isMuteAllRemoteAudio;
|
|
141
|
+
await trtcCloud.muteAllRemoteAudio(isMuteAllRemoteAudio);
|
|
142
|
+
});
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2016-2021 vue-manage-system
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
# vue-manage-system
|
|
2
|
+
|
|
3
|
+
<a href="https://github.com/vuejs/vue">
|
|
4
|
+
<img src="https://img.shields.io/badge/vue-3.1.2-brightgreen.svg" alt="vue">
|
|
5
|
+
</a>
|
|
6
|
+
<a href="https://github.com/vuejs/pinia">
|
|
7
|
+
<img src="https://img.shields.io/badge/pinia-2.0.14-brightgreen.svg" alt="pinia">
|
|
8
|
+
</a>
|
|
9
|
+
<a href="https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE">
|
|
10
|
+
<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
|
|
11
|
+
</a>
|
|
12
|
+
<a href="https://github.com/lin-xin/vue-manage-system/releases">
|
|
13
|
+
<img src="https://img.shields.io/github/release/lin-xin/vue-manage-system.svg" alt="GitHub release">
|
|
14
|
+
</a>
|
|
15
|
+
<a href="https://lin-xin.gitee.io/example/work/#/donate">
|
|
16
|
+
<img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate">
|
|
17
|
+
</a>
|
|
18
|
+
|
|
19
|
+
基于 Vue3 + pinia + Element Plus 的后台管理系统解决方案。[线上地址](https://lin-xin.gitee.io/example/work/)
|
|
20
|
+
|
|
21
|
+
> Vue2 版本请看 [tag-V4.2.0](https://github.com/lin-xin/vue-manage-system/tree/V4.2.0)
|
|
22
|
+
|
|
23
|
+
[English document](https://github.com/lin-xin/manage-system/blob/master/README_EN.md)
|
|
24
|
+
|
|
25
|
+
## 项目截图
|
|
26
|
+
|
|
27
|
+
### 登录
|
|
28
|
+
|
|
29
|
+

|
|
30
|
+
|
|
31
|
+
### 首页
|
|
32
|
+
|
|
33
|
+

|
|
34
|
+
|
|
35
|
+
## 赞助商
|
|
36
|
+
|
|
37
|
+
### 好问
|
|
38
|
+
|
|
39
|
+
[<img src="https://static.bestqa.net/logo/bestqa_haowen.png" width="220" height="100">](https://www.bestqa.net/home/index.html)
|
|
40
|
+
|
|
41
|
+
专业问卷服务,一对一客服,按需定制
|
|
42
|
+
|
|
43
|
+
## 赞赏
|
|
44
|
+
|
|
45
|
+
请作者喝杯咖啡吧!(微信号:linxin_20)
|
|
46
|
+
|
|
47
|
+

|
|
48
|
+
|
|
49
|
+
## 前言
|
|
50
|
+
|
|
51
|
+
该方案作为一套多功能的后台框架模板,适用于绝大部分的后台管理系统(Web Management System)开发。基于 Vue3 + pinia,引用 Element Plus 组件库,方便开发快速简洁好看的组件。分离颜色样式,支持手动切换主题色,而且很方便使用自定义主题色。
|
|
52
|
+
|
|
53
|
+
## 功能
|
|
54
|
+
|
|
55
|
+
- [x] Element Plus
|
|
56
|
+
- [x] 登录/注销
|
|
57
|
+
- [x] Dashboard
|
|
58
|
+
- [x] 表格
|
|
59
|
+
- [x] Tab 选项卡
|
|
60
|
+
- [x] 表单
|
|
61
|
+
- [x] 图表 :bar_chart:
|
|
62
|
+
- [x] 富文本编辑器
|
|
63
|
+
- [x] 图片拖拽/裁剪上传
|
|
64
|
+
- [x] 权限测试
|
|
65
|
+
- [x] 404 / 403
|
|
66
|
+
- [x] 三级菜单
|
|
67
|
+
- [x] 自定义图标
|
|
68
|
+
- [x] 国际化
|
|
69
|
+
- [x] vite
|
|
70
|
+
- [x] pinia
|
|
71
|
+
|
|
72
|
+
## 安装步骤
|
|
73
|
+
|
|
74
|
+
```
|
|
75
|
+
git clone https://github.com/lin-xin/vue-manage-system.git // 把模板下载到本地
|
|
76
|
+
cd vue-manage-system // 进入模板目录
|
|
77
|
+
npm install // 安装项目依赖,等待安装完成之后,安装失败可用 cnpm 或 yarn
|
|
78
|
+
|
|
79
|
+
// 开启服务器,浏览器访问 http://localhost:8080
|
|
80
|
+
npm run dev
|
|
81
|
+
|
|
82
|
+
// 执行构建命令,生成的dist文件夹放在服务器下即可访问
|
|
83
|
+
npm run build
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
## 组件使用说明与演示
|
|
87
|
+
|
|
88
|
+
### vue-schart
|
|
89
|
+
|
|
90
|
+
vue.js 封装 sChart.js 的图表组件。访问地址:[vue-schart](https://github.com/lin-xin/vue-schart#/)
|
|
91
|
+
|
|
92
|
+
<p><a href="https://www.npmjs.com/package/vue-schart"><img src="https://img.shields.io/npm/dm/vue-schart.svg" alt="Downloads"></a></p>
|
|
93
|
+
|
|
94
|
+
```html
|
|
95
|
+
<template>
|
|
96
|
+
<div>
|
|
97
|
+
<schart class="wrapper" canvasId="myCanvas" :options="options"></schart>
|
|
98
|
+
</div>
|
|
99
|
+
</template>
|
|
100
|
+
|
|
101
|
+
<script>
|
|
102
|
+
import Schart from "vue-schart"; // 导入Schart组件
|
|
103
|
+
export default {
|
|
104
|
+
data() {
|
|
105
|
+
return {
|
|
106
|
+
options: {
|
|
107
|
+
type: "bar",
|
|
108
|
+
title: {
|
|
109
|
+
text: "最近一周各品类销售图",
|
|
110
|
+
},
|
|
111
|
+
labels: ["周一", "周二", "周三", "周四", "周五"],
|
|
112
|
+
datasets: [
|
|
113
|
+
{
|
|
114
|
+
label: "家电",
|
|
115
|
+
data: [234, 278, 270, 190, 230],
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
label: "百货",
|
|
119
|
+
data: [164, 178, 190, 135, 160],
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
label: "食品",
|
|
123
|
+
data: [144, 198, 150, 235, 120],
|
|
124
|
+
},
|
|
125
|
+
],
|
|
126
|
+
},
|
|
127
|
+
};
|
|
128
|
+
},
|
|
129
|
+
components: {
|
|
130
|
+
Schart,
|
|
131
|
+
},
|
|
132
|
+
};
|
|
133
|
+
</script>
|
|
134
|
+
<style>
|
|
135
|
+
.wrapper {
|
|
136
|
+
width: 7rem;
|
|
137
|
+
height: 5rem;
|
|
138
|
+
}
|
|
139
|
+
</style>
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
## License
|
|
143
|
+
|
|
144
|
+
[MIT](https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE)
|