├── .github └── workflows │ └── sync2gitee.yml ├── .gitignore ├── 404.html ├── README.md ├── favicon.ico ├── package.json └── src ├── .DS_Store ├── Examples ├── AdvancedAudioProcessing │ ├── AEC_ANS_AGC │ │ ├── index.css │ │ ├── index.html │ │ └── index.js │ ├── AiDenoise │ │ ├── index.css │ │ ├── index.html │ │ └── index.js │ ├── AudioMixing │ │ ├── index.css │ │ ├── index.html │ │ └── index.js │ ├── CustomAudioCaptureAndRendering │ │ ├── index.css │ │ ├── index.html │ │ └── index.js │ ├── EarReturnAndChannelSettings │ │ ├── index.css │ │ ├── index.html │ │ └── index.js │ ├── SoundLevelAndAudioSpectrum │ │ ├── index.css │ │ ├── index.html │ │ └── index.js │ └── VoiceChanger │ │ ├── index.css │ │ ├── index.html │ │ └── index.js ├── AdvancedStreaming │ ├── LowLatencyLive │ │ ├── index.css │ │ ├── index.html │ │ └── index.js │ ├── PublishingMultipleStreams │ │ ├── index.css │ │ ├── index.html │ │ └── index.js │ ├── StreamByCDN │ │ ├── index.css │ │ ├── index.html │ │ └── index.js │ ├── StreamByH265CDN │ │ ├── index.css │ │ ├── index.html │ │ └── index.js │ └── StreamMonitoring │ │ ├── index.css │ │ ├── index.html │ │ └── index.js ├── AdvancedVideoProcessing │ ├── CustomVideoCapture │ │ ├── index.css │ │ ├── index.html │ │ └── index.js │ └── EncodingAndDecoding │ │ ├── index.css │ │ ├── index.html │ │ └── index.js ├── CommonFeatures │ ├── CommonVideoConfig │ │ ├── index.css │ │ ├── index.html │ │ └── index.js │ └── RoomMessage │ │ ├── index.css │ │ ├── index.html │ │ └── index.js ├── DebugAndConfig │ ├── InitSettings │ │ ├── index.css │ │ ├── index.html │ │ └── index.js │ └── LogAndVersionAndDebug │ │ ├── index.css │ │ ├── index.html │ │ └── index.js ├── Framework │ ├── .DS_Store │ ├── Angular │ │ ├── .DS_Store │ │ ├── angular │ │ │ ├── .DS_Store │ │ │ ├── README.md │ │ │ ├── angular.json │ │ │ ├── karma.conf.js │ │ │ ├── package-lock.json │ │ │ ├── package.json │ │ │ ├── src │ │ │ │ ├── .DS_Store │ │ │ │ ├── app │ │ │ │ │ ├── app.component.css │ │ │ │ │ ├── app.component.html │ │ │ │ │ ├── app.component.spec.ts │ │ │ │ │ ├── app.component.ts │ │ │ │ │ ├── app.module.ts │ │ │ │ │ └── device.ts │ │ │ │ ├── assets │ │ │ │ │ ├── .DS_Store │ │ │ │ │ ├── .gitkeep │ │ │ │ │ ├── css │ │ │ │ │ │ ├── animate.css │ │ │ │ │ │ ├── bootstrap.min.css │ │ │ │ │ │ ├── spinners.css │ │ │ │ │ │ └── style.css │ │ │ │ │ ├── js │ │ │ │ │ │ ├── bootstrap.min.js │ │ │ │ │ │ ├── custom.js │ │ │ │ │ │ ├── jquery.i18n.properties.min.js │ │ │ │ │ │ ├── jquery.min.js │ │ │ │ │ │ ├── jquery.slimscroll.min.js │ │ │ │ │ │ ├── left-menu.js │ │ │ │ │ │ ├── metisMenu.min.js │ │ │ │ │ │ ├── util.ts │ │ │ │ │ │ └── vconsole.min.js │ │ │ │ │ └── translate │ │ │ │ │ │ ├── en.properties │ │ │ │ │ │ ├── en_en.properties │ │ │ │ │ │ ├── zh.properties │ │ │ │ │ │ └── zh_zh.properties │ │ │ │ ├── environments │ │ │ │ │ ├── environment.prod.ts │ │ │ │ │ └── environment.ts │ │ │ │ ├── favicon.ico │ │ │ │ ├── index.html │ │ │ │ ├── main.ts │ │ │ │ ├── polyfills.ts │ │ │ │ ├── styles.css │ │ │ │ └── test.ts │ │ │ ├── tsconfig.app.json │ │ │ ├── tsconfig.json │ │ │ └── tsconfig.spec.json │ │ └── dist │ │ │ ├── 3rdpartylicenses.txt │ │ │ ├── assets │ │ │ ├── css │ │ │ │ ├── animate.css │ │ │ │ ├── bootstrap.min.css │ │ │ │ ├── spinners.css │ │ │ │ └── style.css │ │ │ ├── js │ │ │ │ ├── bootstrap.min.js │ │ │ │ ├── custom.js │ │ │ │ ├── jquery.i18n.properties.min.js │ │ │ │ ├── jquery.min.js │ │ │ │ ├── jquery.slimscroll.min.js │ │ │ │ ├── left-menu.js │ │ │ │ ├── metisMenu.min.js │ │ │ │ ├── util.ts │ │ │ │ └── vconsole.min.js │ │ │ └── translate │ │ │ │ ├── en.properties │ │ │ │ ├── en_en.properties │ │ │ │ ├── zh.properties │ │ │ │ └── zh_zh.properties │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── main-es2017.ddd61ac5ccf4634d5882.js │ │ │ ├── main-es5.ddd61ac5ccf4634d5882.js │ │ │ ├── polyfills-es2017.52ee53f040a1d3566330.js │ │ │ ├── polyfills-es5.6e690d62ba58fb060582.js │ │ │ ├── runtime-es2017.f4b61b4c4d8dfd9ce2c4.js │ │ │ ├── runtime-es5.f4b61b4c4d8dfd9ce2c4.js │ │ │ └── styles.dda1603ecef20c7afb8a.css │ ├── React │ │ ├── index.css │ │ ├── index.html │ │ └── index.js │ └── Vue │ │ ├── index.css │ │ ├── index.html │ │ └── index.js ├── Others │ ├── DeviceDetection │ │ ├── index.css │ │ ├── index.html │ │ └── index.js │ ├── EffectsBeauty │ │ ├── index.css │ │ ├── index.html │ │ └── index.js │ ├── MediaTrackReplacement │ │ ├── index.css │ │ ├── index.html │ │ └── index.js │ ├── NetworkDetection │ │ ├── index.css │ │ ├── index.html │ │ └── index.js │ ├── RangeAudio │ │ ├── index.css │ │ ├── index.html │ │ └── index.js │ ├── ScreenSharing │ │ ├── index.css │ │ ├── index.html │ │ └── index.js │ ├── StreamCompositor │ │ ├── assets │ │ │ ├── web.data │ │ │ ├── zego-wasm-simd.wasm │ │ │ └── zego-wasm.wasm │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── test.jpg │ ├── StreamMixing │ │ ├── index.css │ │ ├── index.html │ │ └── index.js │ └── VirtualBackground │ │ ├── assets │ │ ├── web.data │ │ ├── zego-wasm-simd.wasm │ │ └── zego-wasm.wasm │ │ ├── index.css │ │ ├── index.html │ │ ├── index.js │ │ └── test.jpg ├── QuickStart │ ├── CommonUsage │ │ ├── index.css │ │ ├── index.html │ │ └── index.js │ ├── Playing │ │ ├── index.css │ │ ├── index.html │ │ └── index.js │ ├── Publishing │ │ ├── index.css │ │ ├── index.html │ │ └── index.js │ └── VideoTalk │ │ ├── index.css │ │ ├── index.html │ │ └── index.js └── Scenes │ └── VideoForMultipleUsers │ ├── index.css │ ├── index.html │ └── index.js ├── KeyCenter.js └── assets ├── 16183688734997.mp3 ├── css ├── animate.css ├── bootstrap.min.css ├── spinners.css └── style.css ├── images └── custom-select.png ├── js ├── babel.min.js ├── bootstrap.min.js ├── custom.js ├── express_player │ ├── 343.ZegoExpressPlayer-1.2.0.js │ ├── 509.ZegoExpressPlayer-1.2.0.js │ ├── ZegoExpressPlayer-1.2.0.js │ └── asset │ │ ├── 7ae283b5a729f59ff472.gz │ │ └── ae8d4204f60cf371e4a8.js ├── express_sdk │ ├── ZegoExpressWebRTC.js │ ├── aidenoise.js │ ├── background-process.js │ ├── background-process │ │ └── assets │ │ │ ├── web.data │ │ │ ├── zego-wasm-simd.wasm │ │ │ └── zego-wasm.wasm │ ├── copyrighted-music.js │ ├── stream-compositor.js │ └── voice-changer.js ├── flv.min.js ├── jquery.i18n.properties.min.js ├── jquery.min.js ├── jquery.slimscroll.min.js ├── left-menu.js ├── metisMenu.min.js ├── react-dom.min.js ├── react.min.js ├── vconsole.min.js └── vue.min.js └── translate ├── en.properties ├── en_en.properties ├── zh.properties └── zh_zh.properties /.github/workflows/sync2gitee.yml: -------------------------------------------------------------------------------- 1 | # 通过 Github action， 在仓库的每一次 commit 后自动同步到 Gitee 上. 2 | name: sync2gitee 3 | on: 4 | push: 5 | branches: 6 | - master 7 | jobs: 8 | repo-sync: 9 | env: 10 | dst_key: ${{ secrets.GITEE_PRIVATE_KEY }} 11 | dst_token: ${{ secrets.GITEE_TOKEN }} 12 | gitee_user: ${{ secrets.GITEE_USER }} 13 | runs-on: ubuntu-latest 14 | steps: 15 | - uses: actions/checkout@v2 16 | with: 17 | persist-credentials: false 18 | 19 | - name: sync github -> gitee 20 | uses: Yikun/hub-mirror-action@master 21 | if: env.dst_key && env.dst_token && env.gitee_user 22 | with: 23 | # 必选，需要同步的 Github 用户（源）。 24 | src: 'github/${{ github.repository_owner }}' 25 | # 必选，需要同步到的 Gitee 用户（目的） 26 | dst: 'gitee/${{ secrets.GITEE_USER }}' 27 | # 必选，Gitee公钥对应的私钥，https://gitee.com/profile/sshkeys 28 | dst_key: ${{ secrets.GITEE_PRIVATE_KEY }} 29 | # 必选，Gitee对应的用于创建仓库的token，https://gitee.com/profile/personal_access_tokens 30 | dst_token: ${{ secrets.GITEE_TOKEN }} 31 | # 如果是组织，指定组织即可，默认为用户 user 32 | # account_type: org 33 | # 直接取当前项目的仓库名 34 | static_list: ${{ github.event.repository.name }} 35 | # 还有黑、白名单，静态名单机制，可以用于更新某些指定库 36 | # static_list: 'repo_name,repo_name2' 37 | # black_list: 'repo_name,repo_name2' 38 | # white_list: 'repo_name,repo_name2' 39 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /.idea/ 2 | /.vscode/ 3 | **/*/node_modules 4 | **/*/.DS_Store 5 | cert.pem 6 | key.pem -------------------------------------------------------------------------------- /404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Not found 8 | 9 | 10 | 13 | 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Zego Express Example Web 2 | 3 | This is Express Example (Sample topic Demo) Web repositories 4 | 5 | ## Preparation before development 6 | 7 | 1. Jquery.i18n is used in the project for internationalization, and it is necessary to simulate the server environment to read the configuration file. You can use a vscode plug-in Live Server to simulate. 8 | 9 | Check out this [article](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) to learn how to use 10 | 11 | 2. Need to fill in appID and Server and tokenUrl in `/src/keyCenter.js ` 12 | 13 | ## Directory structure diagram 14 | 15 | ### Coding 16 | 17 | ````tree 18 | express-demo-web 19 | ├── README.md 20 | ... 21 | └── src # Source folder 22 | ├── Examples # Examples code 23 | │ ├── AdvancedAudioProcessing # Audio advanced functions 24 | │ │ ├── AEC_ANS_AGC # Audio 3A processing 25 | │ │ ├── AudioMixing # Audio Mixing 26 | │ │ ├── CustomAudioCaptureAndRendering # Custom audio capture and rendering 27 | │ │ ├── EarReturnAndChannelSettings # Ear return and channel settings 28 | │ │ └── SoundLevelAndAudioSpectrum # Volume change 29 | │ ├── AdvancedStreaming # Push-pull streaming advanced 30 | │ │ ├── LowLatencyLive # Low Latency Live 31 | │ │ ├── PublishingMultipleStreams # Simultaneously push multiple streams 32 | │ │ ├── StreamByCDN # Push and pull streams through CND 33 | │ │ └── StreamMonitoring # Push stream, pull stream information monitoring 34 | │ ├── AdvancedVideoProcessing # Video advanced functions 35 | │ │ ├── CustomVideoCapture # Set video encoding properties 36 | │ │ └── EncodingAndDecoding # Custom video capture 37 | │ ├── CommonFeatures # Common features 38 | │ │ ├── CommonVideoConfig # Common video configuration 39 | │ │ └── RoomMessage # Room real-time message 40 | │ ├── DebugAndConfig # Debug and configure 41 | │ │ ├── InitSettings # Initialize settings 42 | │ │ └── LogAndVersionAndDebug # log, version number, debugging information 43 | │ ├── Framework # Best practices/framework related 44 | │ │ ├── Angular # Use Angular to implement audio and video functions 45 | │ │ ├── React # Use React to implement audio and video functions 46 | │ │ └── Vue # Use Vue to implement audio and video functions 47 | │ ├── Others # Other functions 48 | │ │ ├── DeviceDetection # Device detection 49 | │ │ ├── EffectsBeauty # Basic Beauty 50 | │ │ ├── MediaTrackReplacement # Audio and video track replacement 51 | │ │ ├── NetworkDetection # Network detection 52 | │ │ ├── RangeAudio # Range audio 53 | │ │ ├── ScreenSharing # Screen sharing 54 | │ │ └── StreamMixing # Mixing streams 55 | │ ├── QuickStart # Quick start 56 | │ │ ├── CommonUsage # Implementation process 57 | │ │ ├── Playing # Pull flow 58 | │ │ ├── Publishing # Push stream 59 | │ │ └── VideoTalk # Video call 60 | │ └── Scenes # Best practices/scenario related 61 | │ └── VideoForMultipleUsers # Multi-person video call 62 | ├── assets # Resource folder, storing resource files shared by the project 63 | │ ├── css # CSS file shared by the project 64 | │ ├── images # Static image resources 65 | │ ├── js # js files shared by the project, including sdk, various dependent libraries, etc. 66 | │ └── translate # translate related configuration files 67 | └── KeyCenter.js # Configure related files, you can configure appID, server address, etc. 68 | ```` 69 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zegoim/express-demo-web/b22b120bdb83cebc121bbf316499952220fb9e1f/favicon.ico -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "zego-express-webrtc-example", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": {} 13 | } 14 | -------------------------------------------------------------------------------- /src/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zegoim/express-demo-web/b22b120bdb83cebc121bbf316499952220fb9e1f/src/.DS_Store -------------------------------------------------------------------------------- /src/Examples/AdvancedAudioProcessing/AudioMixing/index.css: -------------------------------------------------------------------------------- 1 | .pushlishInfo-title { 2 | font-weight: 500; 3 | } 4 | 5 | .preview-content { 6 | position: relative; 7 | width: auto; 8 | height: 200px; 9 | border: 1px solid #ccc; 10 | } 11 | 12 | .preview-content>video, 13 | #localVideo { 14 | width: 100%; 15 | height: 100%; 16 | } 17 | 18 | audio { 19 | display: inline-block; 20 | } 21 | 22 | .preview-action { 23 | position: absolute; 24 | width: 100%; 25 | height: 100%; 26 | background-color: rgba(0, 0, 0, .1); 27 | z-index: 1; 28 | } 29 | 30 | .preview-info { 31 | opacity: 1; 32 | color: #000; 33 | font-size: 8px; 34 | font-weight: 400; 35 | line-height: 1; 36 | } 37 | 38 | .preview-video-action { 39 | position: absolute; 40 | display: flex; 41 | justify-content: center; 42 | flex-wrap: wrap; 43 | left: 0; 44 | bottom: 0; 45 | width: 100%; 46 | color: #fff; 47 | /* font-weight: 400; */ 48 | font-size: 10px; 49 | /* height: 100%; */ 50 | background-color: rgba(0, 0, 0, .5); 51 | } 52 | 53 | .col-6 { 54 | padding-left: 5px; 55 | padding-right: 5px; 56 | } 57 | 58 | .preview-roomInfo { 59 | font-weight: 500; 60 | } 61 | 62 | #roomInfo-id { 63 | display: inline-block; 64 | font-weight: normal; 65 | } 66 | 67 | #roomInfo-state { 68 | display: inline-block; 69 | font-weight: normal; 70 | } 71 | 72 | 73 | .logger-wrapper { 74 | margin-top: 20px; 75 | width: 100%; 76 | height: 250px; 77 | background-color: #ccc; 78 | color: rgb(252, 250, 250); 79 | overflow: scroll; 80 | } 81 | 82 | .btn-wrapper { 83 | display: flex; 84 | width: 100%; 85 | background-color: rgb(252, 250, 250); 86 | border-radius: 10px; 87 | height: 30px; 88 | justify-content: center; 89 | align-items: center; 90 | } 91 | 92 | .action-step { 93 | margin: 10px 0; 94 | } 95 | 96 | .action-content { 97 | width: 100%; 98 | background-color: rgb(252, 250, 250); 99 | border-radius: 10px; 100 | padding: 10px; 101 | min-height: 250px; 102 | } 103 | 104 | .action-title { 105 | font-weight: 700px; 106 | color: black; 107 | } 108 | 109 | .action-info { 110 | font-size: 14px; 111 | } 112 | 113 | .cuBtn { 114 | display: inline-block; 115 | padding: 0 12px; 116 | font-size: 13px; 117 | cursor: pointer; 118 | height: 21px; 119 | } 120 | 121 | .action-room { 122 | display: flex; 123 | align-items: center; 124 | justify-content: space-between; 125 | flex-wrap: wrap; 126 | padding-bottom: 10px; 127 | } 128 | 129 | .form-wrap { 130 | margin: 6px 0; 131 | } 132 | 133 | .form-wrap .form-item { 134 | display: flex; 135 | } 136 | 137 | .form-wrap .form-item input { 138 | flex: 1; 139 | } 140 | 141 | .login-wrapper { 142 | padding: 15px; 143 | background-color: #fff; 144 | } 145 | 146 | .login-desc { 147 | font-size: 14px; 148 | } 149 | 150 | .icon-question { 151 | display: inline-block; 152 | text-align: center; 153 | line-height: 16px; 154 | width: 16px; 155 | height: 16px; 156 | border-radius: 50%; 157 | background-color: #0575ff; 158 | color: #fff; 159 | cursor: pointer; 160 | font-weight: bold; 161 | } 162 | 163 | /* Tooltip text */ 164 | .icon-question .pop-box { 165 | visibility: hidden; 166 | width: 120px; 167 | background-color: #fff; 168 | box-shadow: 0 0 10px #dfdfdf; 169 | color: #000; 170 | text-align: center; 171 | border-radius: 6px; 172 | padding: 4px; 173 | /* Position the tooltip text - see examples below! */ 174 | position: absolute; 175 | z-index: 3; 176 | font-weight: 100; 177 | font-size: 12px; 178 | } 179 | 180 | /* Show the tooltip text when you mouse over the tooltip container */ 181 | .icon-question:hover .pop-box { 182 | visibility: visible; 183 | } 184 | 185 | .f-b-5 { 186 | flex-basis: 50%; 187 | } 188 | 189 | .f-b-3 { 190 | flex-basis: 33.3%; 191 | } 192 | 193 | .t-a-r { 194 | text-align: right; 195 | } 196 | 197 | .drop-item { 198 | display: flex; 199 | align-items: center; 200 | font-size: 12px; 201 | padding: 5px 5px; 202 | } 203 | 204 | .t-nowrap { 205 | overflow: hidden; 206 | text-overflow: ellipsis; 207 | white-space: nowrap; 208 | } 209 | 210 | 211 | 212 | 213 | .videoQuality { 214 | display: flex; 215 | align-items: center; 216 | justify-content: space-between; 217 | flex-wrap: wrap; 218 | padding-bottom: 15px; 219 | } 220 | 221 | input { 222 | width: 40%; 223 | height: 21px; 224 | border: 1px solid #ced4da; 225 | border-radius: .25rem; 226 | color: #495057; 227 | } 228 | 229 | .publish-setting { 230 | display: flex; 231 | /* justify-content: space-between; */ 232 | align-items: center; 233 | } 234 | 235 | .publish-check { 236 | /* flex-basis: 50%; */ 237 | display: flex; 238 | justify-content: space-around; 239 | } 240 | 241 | .check-wrappre { 242 | /* flex-basis: 50%; */ 243 | text-align: center; 244 | display: flex; 245 | align-items: center; 246 | } 247 | 248 | .check-input { 249 | display: inline-block; 250 | width: auto !important; 251 | height: auto !important; 252 | } 253 | 254 | select { 255 | width: 45% !important; 256 | height: 21px !important; 257 | min-height: 10px !important; 258 | padding: 0 !important; 259 | font-size: 12px !important; 260 | } 261 | 262 | .select-wrapper { 263 | flex-basis: 50%; 264 | display: flex; 265 | align-items: center; 266 | white-space: nowrap; 267 | } 268 | 269 | option { 270 | height: 21px !important; 271 | font-size: 14px; 272 | } 273 | 274 | .flex-c { 275 | margin: 5px 0; 276 | display: flex; 277 | align-items: center; 278 | justify-content: flex-start; 279 | } 280 | 281 | .configBtn { 282 | margin: auto; 283 | width: 90%; 284 | } 285 | 286 | @media (max-width: 375px) { 287 | .preview-playInfo { 288 | margin-top: 0 !important; 289 | } 290 | 291 | .configBtn { 292 | width: 90%; 293 | } 294 | } -------------------------------------------------------------------------------- /src/Examples/AdvancedAudioProcessing/CustomAudioCaptureAndRendering/index.css: -------------------------------------------------------------------------------- 1 | .pushlishInfo-title { 2 | font-weight: 500; 3 | } 4 | 5 | .preview-content { 6 | position: relative; 7 | width: auto; 8 | height: 200px; 9 | border: 1px solid #ccc; 10 | } 11 | 12 | .preview-content > video { 13 | width: 100%; 14 | height: 100%; 15 | } 16 | 17 | .preview-action { 18 | position: absolute; 19 | width: 100%; 20 | height: 100%; 21 | background-color: rgba(0,0,0,.1); 22 | z-index: 1; 23 | } 24 | 25 | .preview-info { 26 | opacity: 1; 27 | color: #000; 28 | font-size: 8px; 29 | font-weight: 400; 30 | line-height: 1; 31 | } 32 | 33 | .preview-video-action { 34 | position: absolute; 35 | display: flex; 36 | justify-content: center; 37 | flex-wrap: wrap; 38 | left: 0; 39 | bottom: 0; 40 | width: 100%; 41 | color: #fff; 42 | /* font-weight: 400; */ 43 | font-size: 10px; 44 | /* height: 100%; */ 45 | background-color: rgba(0,0,0,.5); 46 | } 47 | 48 | .col-6 { 49 | padding-left: 5px; 50 | padding-right: 5px; 51 | } 52 | 53 | .preview-roomInfo { 54 | font-weight: 500; 55 | } 56 | 57 | #roomInfo-id { 58 | display: inline-block; 59 | font-weight: normal; 60 | } 61 | 62 | #roomInfo-state { 63 | display: inline-block; 64 | font-weight: normal; 65 | } 66 | 67 | 68 | .logger-wrapper { 69 | margin-top: 20px; 70 | width: 100%; 71 | height: 250px; 72 | background-color: #ccc; 73 | color: rgb(252, 250, 250); 74 | overflow: scroll; 75 | } 76 | 77 | .btn-wrapper { 78 | display: flex; 79 | width: 100%; 80 | background-color: rgb(252, 250, 250); 81 | border-radius: 10px; 82 | height: 30px; 83 | justify-content: center; 84 | align-items: center; 85 | } 86 | 87 | .action-step { 88 | margin: 10px 0; 89 | } 90 | 91 | .action-content { 92 | width: 100%; 93 | background-color: rgb(252, 250, 250); 94 | border-radius: 10px; 95 | padding: 10px; 96 | min-height: 250px; 97 | } 98 | 99 | .action-title { 100 | font-weight: 700px; 101 | color: black; 102 | } 103 | .action-info { 104 | font-size: 14px; 105 | } 106 | 107 | .cuBtn { 108 | display: inline-block; 109 | padding: 0 12px; 110 | font-size: 13px; 111 | cursor: pointer; 112 | height: 21px; 113 | } 114 | 115 | .action-room { 116 | display: flex; 117 | align-items: center; 118 | justify-content: space-between; 119 | flex-wrap: wrap; 120 | padding-bottom: 10px; 121 | } 122 | 123 | 124 | .form-wrap { 125 | margin: 6px 0; 126 | } 127 | .form-wrap .form-item { 128 | display: flex; 129 | } 130 | .form-wrap .form-item input { 131 | flex: 1; 132 | } 133 | 134 | .login-wrapper { 135 | padding: 15px; 136 | background-color: #fff; 137 | } 138 | .login-desc { 139 | font-size: 14px; 140 | } 141 | .icon-question { 142 | display: inline-block; 143 | text-align: center; 144 | line-height: 16px; 145 | width: 16px; 146 | height: 16px; 147 | border-radius: 50%; 148 | background-color: #0575ff; 149 | color: #fff; 150 | cursor: pointer; 151 | font-weight: bold; 152 | } 153 | /* Tooltip text */ 154 | .icon-question .pop-box { 155 | visibility: hidden; 156 | width: 120px; 157 | background-color: #fff; 158 | box-shadow: 0 0 10px #dfdfdf; 159 | color: #000; 160 | text-align: center; 161 | border-radius: 6px; 162 | padding: 4px; 163 | /* Position the tooltip text - see examples below! */ 164 | position: absolute; 165 | z-index: 3; 166 | font-weight: 100; 167 | font-size: 12px; 168 | } 169 | /* Show the tooltip text when you mouse over the tooltip container */ 170 | .icon-question:hover .pop-box { 171 | visibility: visible; 172 | } 173 | 174 | .f-b-5 { 175 | flex-basis: 50%; 176 | } 177 | .f-b-3 { 178 | flex-basis: 33.3%; 179 | } 180 | .t-a-r { 181 | text-align: right; 182 | } 183 | .drop-item { 184 | display: flex; 185 | align-items: center; 186 | font-size: 12px; 187 | padding: 5px 5px; 188 | } 189 | .t-nowrap { 190 | overflow: hidden; 191 | text-overflow:ellipsis; 192 | white-space: nowrap; 193 | } 194 | 195 | 196 | 197 | 198 | .videoQuality { 199 | display: flex; 200 | align-items: center; 201 | justify-content: space-between; 202 | flex-wrap: wrap; 203 | padding-bottom: 15px; 204 | } 205 | 206 | input { 207 | width: 40% ; 208 | height: 21px ; 209 | border: 1px solid #ced4da; 210 | border-radius: .25rem; 211 | color: #495057; 212 | } 213 | 214 | .publish-setting { 215 | display: flex; 216 | /* justify-content: space-between; */ 217 | align-items: center; 218 | } 219 | 220 | .publish-check { 221 | /* flex-basis: 50%; */ 222 | display: flex; 223 | justify-content: space-around; 224 | } 225 | 226 | .check-wrappre { 227 | /* flex-basis: 50%; */ 228 | text-align: center; 229 | display: flex; 230 | align-items: center; 231 | } 232 | 233 | .check-input { 234 | display: inline-block; 235 | width: auto !important; 236 | height: auto !important; 237 | } 238 | 239 | select { 240 | width: 45% !important; 241 | height: 21px !important; 242 | min-height: 10px !important; 243 | padding: 0 !important; 244 | font-size: 12px !important; 245 | } 246 | 247 | .select-wrapper { 248 | flex-basis: 50%; 249 | display: flex; 250 | align-items: center; 251 | white-space: nowrap; 252 | } 253 | 254 | option { 255 | height: 21px !important; 256 | font-size: 14px; 257 | } 258 | 259 | .flex-c { 260 | margin: 5px 0; 261 | display: flex; 262 | align-items: center; 263 | } 264 | 265 | .configBtn { 266 | margin: auto; 267 | width: 90%; 268 | } 269 | 270 | @media (max-width: 375px) { 271 | .preview-playInfo { 272 | margin-top: 0 !important; 273 | } 274 | .configBtn { 275 | width: 90%; 276 | } 277 | } -------------------------------------------------------------------------------- /src/Examples/AdvancedStreaming/LowLatencyLive/index.css: -------------------------------------------------------------------------------- 1 | .pushlishInfo-title { 2 | font-weight: 500; 3 | } 4 | 5 | .preview-content { 6 | width: auto; 7 | height: 200px; 8 | border: 1px solid #ccc; 9 | } 10 | 11 | .preview-content>video, 12 | #remoteVideo, 13 | #localVideo { 14 | width: 100%; 15 | height: 100%; 16 | } 17 | 18 | .preview-roomInfo { 19 | font-weight: 500; 20 | } 21 | 22 | #roomInfo-id { 23 | display: inline-block; 24 | font-weight: normal; 25 | } 26 | 27 | #roomInfo-state { 28 | display: inline-block; 29 | font-weight: normal; 30 | } 31 | 32 | 33 | .logger-wrapper { 34 | margin-top: 20px; 35 | width: 100%; 36 | height: 250px; 37 | background-color: #ccc; 38 | color: rgb(252, 250, 250); 39 | overflow: scroll; 40 | } 41 | 42 | .btn-wrapper { 43 | display: flex; 44 | width: 100%; 45 | background-color: rgb(252, 250, 250); 46 | border-radius: 10px; 47 | height: 30px; 48 | justify-content: center; 49 | align-items: center; 50 | } 51 | 52 | .action-step { 53 | margin: 10px 0; 54 | } 55 | 56 | .action-content { 57 | width: 100%; 58 | background-color: rgb(252, 250, 250); 59 | border-radius: 10px; 60 | padding: 10px; 61 | } 62 | 63 | .action-title { 64 | font-weight: 700px; 65 | color: black; 66 | } 67 | 68 | .action-info { 69 | font-size: 14px; 70 | } 71 | 72 | .cuBtn { 73 | display: block; 74 | padding: 0 12px; 75 | font-size: 13px; 76 | cursor: pointer; 77 | height: 30px; 78 | width: 95%; 79 | } 80 | 81 | .action-room { 82 | padding-bottom: 15px; 83 | } 84 | 85 | .action-room>div+div { 86 | margin-top: 4px; 87 | } 88 | 89 | .icon-question { 90 | display: inline-block; 91 | text-align: center; 92 | line-height: 16px; 93 | width: 16px; 94 | height: 16px; 95 | border-radius: 50%; 96 | background-color: #0575ff; 97 | color: #fff; 98 | cursor: pointer; 99 | font-weight: bold; 100 | } 101 | 102 | /* Tooltip text */ 103 | .icon-question .pop-box { 104 | visibility: hidden; 105 | width: 120px; 106 | background-color: #fff; 107 | box-shadow: 0 0 10px #dfdfdf; 108 | color: #000; 109 | text-align: center; 110 | border-radius: 6px; 111 | padding: 4px; 112 | /* Position the tooltip text - see examples below! */ 113 | position: absolute; 114 | z-index: 1; 115 | font-weight: 100; 116 | font-size: 12px; 117 | } 118 | 119 | /* Show the tooltip text when you mouse over the tooltip container */ 120 | .icon-question:hover .pop-box { 121 | visibility: visible; 122 | } 123 | 124 | input { 125 | width: 40%; 126 | height: 21px; 127 | border: 1px solid #ced4da; 128 | border-radius: .25rem; 129 | color: #495057; 130 | } 131 | 132 | .f-b-3 { 133 | flex-basis: 30%; 134 | } 135 | 136 | .f-b-7 { 137 | flex-basis: 70%; 138 | } 139 | 140 | .t-a-r { 141 | text-align: right; 142 | } 143 | 144 | .w-70 { 145 | width: 70%; 146 | } 147 | 148 | .publish-setting { 149 | display: flex; 150 | /* justify-content: space-between; */ 151 | align-items: center; 152 | } 153 | 154 | .publish-check { 155 | /* flex-basis: 50%; */ 156 | display: flex; 157 | justify-content: space-around; 158 | } 159 | 160 | .check-wrappre { 161 | /* flex-basis: 50%; */ 162 | text-align: center; 163 | display: flex; 164 | align-items: center; 165 | } 166 | 167 | .check-input { 168 | display: inline-block; 169 | width: auto !important; 170 | height: auto !important; 171 | } 172 | 173 | select { 174 | width: 45% !important; 175 | height: 21px !important; 176 | padding: 0 !important; 177 | font-size: 12px !important; 178 | } 179 | 180 | .select-wrapper { 181 | flex-basis: 50%; 182 | display: flex; 183 | align-items: center; 184 | white-space: nowrap; 185 | } 186 | 187 | option { 188 | height: 21px !important; 189 | font-size: 14px; 190 | } 191 | 192 | @media (max-width: 375px) { 193 | .preview-playInfo { 194 | margin-top: 0 !important; 195 | } 196 | } -------------------------------------------------------------------------------- /src/Examples/AdvancedVideoProcessing/CustomVideoCapture/index.css: -------------------------------------------------------------------------------- 1 | .pushlishInfo-title { 2 | font-weight: 500; 3 | } 4 | 5 | .preview-content { 6 | position: relative; 7 | width: auto; 8 | height: 200px; 9 | border: 1px solid #ccc; 10 | } 11 | 12 | .preview-content>video, 13 | #localVideo { 14 | width: 100%; 15 | height: 100%; 16 | } 17 | 18 | .preview-action { 19 | position: absolute; 20 | width: 100%; 21 | height: 0%; 22 | background-color: rgba(0, 0, 0, .1); 23 | z-index: 1; 24 | } 25 | 26 | .preview-info { 27 | opacity: 1; 28 | color: #000; 29 | font-size: 8px; 30 | font-weight: 400; 31 | line-height: 1; 32 | } 33 | 34 | .preview-video-action { 35 | position: absolute; 36 | display: flex; 37 | justify-content: center; 38 | flex-wrap: wrap; 39 | left: 0; 40 | bottom: 0; 41 | width: 100%; 42 | color: #fff; 43 | /* font-weight: 400; */ 44 | font-size: 10px; 45 | /* height: 100%; */ 46 | background-color: rgba(0, 0, 0, .5); 47 | } 48 | 49 | .col-6 { 50 | padding-left: 5px; 51 | padding-right: 5px; 52 | } 53 | 54 | .preview-roomInfo { 55 | font-weight: 500; 56 | } 57 | 58 | #roomInfo-id { 59 | display: inline-block; 60 | font-weight: normal; 61 | } 62 | 63 | #roomInfo-state { 64 | display: inline-block; 65 | font-weight: normal; 66 | } 67 | 68 | 69 | .logger-wrapper { 70 | margin-top: 20px; 71 | width: 100%; 72 | height: 250px; 73 | background-color: #ccc; 74 | color: rgb(252, 250, 250); 75 | overflow: scroll; 76 | } 77 | 78 | .btn-wrapper { 79 | display: flex; 80 | width: 100%; 81 | background-color: rgb(252, 250, 250); 82 | border-radius: 10px; 83 | height: 30px; 84 | justify-content: center; 85 | align-items: center; 86 | } 87 | 88 | .action-step { 89 | margin: 10px 0; 90 | } 91 | 92 | .action-content { 93 | width: 100%; 94 | background-color: rgb(252, 250, 250); 95 | border-radius: 10px; 96 | padding: 10px; 97 | min-height: 250px; 98 | } 99 | 100 | .action-title { 101 | font-weight: 700px; 102 | color: black; 103 | } 104 | 105 | .action-info { 106 | font-size: 14px; 107 | } 108 | 109 | .cuBtn { 110 | display: inline-block; 111 | padding: 0 12px; 112 | font-size: 13px; 113 | cursor: pointer; 114 | height: 21px; 115 | } 116 | 117 | .action-room { 118 | display: flex; 119 | align-items: center; 120 | justify-content: space-between; 121 | flex-wrap: wrap; 122 | padding-bottom: 10px; 123 | } 124 | 125 | .form-wrap { 126 | margin: 6px 0; 127 | } 128 | 129 | .form-wrap .form-item { 130 | display: flex; 131 | } 132 | 133 | .form-wrap .form-item input { 134 | flex: 1; 135 | } 136 | 137 | .login-wrapper { 138 | padding: 15px; 139 | background-color: #fff; 140 | } 141 | 142 | .login-desc { 143 | font-size: 14px; 144 | } 145 | 146 | .icon-question { 147 | display: inline-block; 148 | text-align: center; 149 | line-height: 16px; 150 | width: 16px; 151 | height: 16px; 152 | border-radius: 50%; 153 | background-color: #0575ff; 154 | color: #fff; 155 | cursor: pointer; 156 | font-weight: bold; 157 | } 158 | 159 | /* Tooltip text */ 160 | .icon-question .pop-box { 161 | visibility: hidden; 162 | width: 120px; 163 | background-color: #fff; 164 | box-shadow: 0 0 10px #dfdfdf; 165 | color: #000; 166 | text-align: center; 167 | border-radius: 6px; 168 | padding: 4px; 169 | /* Position the tooltip text - see examples below! */ 170 | position: absolute; 171 | z-index: 3; 172 | font-weight: 100; 173 | font-size: 12px; 174 | } 175 | 176 | /* Show the tooltip text when you mouse over the tooltip container */ 177 | .icon-question:hover .pop-box { 178 | visibility: visible; 179 | } 180 | 181 | .f-b-5 { 182 | flex-basis: 50%; 183 | } 184 | 185 | .f-b-3 { 186 | flex-basis: 33.3%; 187 | } 188 | 189 | .t-a-r { 190 | text-align: right; 191 | } 192 | 193 | .drop-item { 194 | display: flex; 195 | align-items: center; 196 | font-size: 12px; 197 | padding: 5px 5px; 198 | } 199 | 200 | .t-nowrap { 201 | overflow: hidden; 202 | text-overflow: ellipsis; 203 | white-space: nowrap; 204 | } 205 | 206 | 207 | 208 | 209 | .videoQuality { 210 | display: flex; 211 | align-items: center; 212 | justify-content: space-between; 213 | flex-wrap: wrap; 214 | padding-bottom: 15px; 215 | } 216 | 217 | input { 218 | width: 40%; 219 | height: 21px; 220 | border: 1px solid #ced4da; 221 | border-radius: .25rem; 222 | color: #495057; 223 | } 224 | 225 | .publish-setting { 226 | display: flex; 227 | /* justify-content: space-between; */ 228 | align-items: center; 229 | } 230 | 231 | .publish-check { 232 | /* flex-basis: 50%; */ 233 | display: flex; 234 | justify-content: space-around; 235 | } 236 | 237 | .check-wrappre { 238 | /* flex-basis: 50%; */ 239 | text-align: center; 240 | display: flex; 241 | align-items: center; 242 | } 243 | 244 | .check-input { 245 | display: inline-block; 246 | width: auto !important; 247 | height: auto !important; 248 | } 249 | 250 | select { 251 | width: 45% !important; 252 | height: 21px !important; 253 | min-height: 10px !important; 254 | padding: 0 !important; 255 | font-size: 12px !important; 256 | } 257 | 258 | .select-wrapper { 259 | flex-basis: 50%; 260 | display: flex; 261 | align-items: center; 262 | white-space: nowrap; 263 | } 264 | 265 | option { 266 | height: 21px !important; 267 | font-size: 14px; 268 | } 269 | 270 | .flex-c { 271 | margin: 5px 0; 272 | display: flex; 273 | align-items: center; 274 | } 275 | 276 | .configBtn { 277 | width: 50%; 278 | } 279 | 280 | @media (max-width: 375px) { 281 | .preview-playInfo { 282 | margin-top: 0 !important; 283 | } 284 | 285 | .configBtn { 286 | width: 90%; 287 | } 288 | } -------------------------------------------------------------------------------- /src/Examples/AdvancedVideoProcessing/EncodingAndDecoding/index.css: -------------------------------------------------------------------------------- 1 | .pushlishInfo-title { 2 | font-weight: 500; 3 | } 4 | 5 | .preview-content { 6 | position: relative; 7 | width: auto; 8 | height: 200px; 9 | border: 1px solid #ccc; 10 | } 11 | 12 | .preview-content>video, 13 | #localVideo, 14 | #remoteVideo { 15 | width: 100%; 16 | height: 100%; 17 | } 18 | 19 | .preview-action { 20 | position: absolute; 21 | width: 100%; 22 | height: 0%; 23 | background-color: rgba(0, 0, 0, .1); 24 | z-index: 1; 25 | } 26 | 27 | .preview-info { 28 | opacity: 1; 29 | color: #000; 30 | font-size: 8px; 31 | font-weight: 400; 32 | line-height: 1; 33 | } 34 | 35 | .preview-video-action { 36 | position: absolute; 37 | display: flex; 38 | justify-content: center; 39 | flex-wrap: wrap; 40 | left: 0; 41 | bottom: 0; 42 | width: 100%; 43 | color: #fff; 44 | /* font-weight: 400; */ 45 | font-size: 10px; 46 | /* height: 100%; */ 47 | background-color: rgba(0, 0, 0, .5); 48 | } 49 | 50 | .col-6 { 51 | padding-left: 5px; 52 | padding-right: 5px; 53 | } 54 | 55 | .preview-roomInfo { 56 | font-weight: 500; 57 | } 58 | 59 | #roomInfo-id { 60 | display: inline-block; 61 | font-weight: normal; 62 | } 63 | 64 | #roomInfo-state { 65 | display: inline-block; 66 | font-weight: normal; 67 | } 68 | 69 | 70 | .logger-wrapper { 71 | margin-top: 20px; 72 | width: 100%; 73 | height: 250px; 74 | background-color: #ccc; 75 | color: rgb(252, 250, 250); 76 | overflow: scroll; 77 | } 78 | 79 | .btn-wrapper { 80 | display: flex; 81 | width: 100%; 82 | background-color: rgb(252, 250, 250); 83 | border-radius: 10px; 84 | height: 30px; 85 | justify-content: center; 86 | align-items: center; 87 | } 88 | 89 | .action-step { 90 | margin: 10px 0; 91 | } 92 | 93 | .action-content { 94 | width: 100%; 95 | background-color: rgb(252, 250, 250); 96 | border-radius: 10px; 97 | padding: 10px; 98 | min-height: 250px; 99 | } 100 | 101 | .action-title { 102 | font-weight: 700px; 103 | color: black; 104 | } 105 | 106 | .action-info { 107 | font-size: 14px; 108 | } 109 | 110 | .cuBtn { 111 | display: block; 112 | padding: 0 12px; 113 | font-size: 13px; 114 | cursor: pointer; 115 | height: 30px; 116 | width: 95%; 117 | } 118 | 119 | .action-room { 120 | display: flex; 121 | align-items: center; 122 | justify-content: space-between; 123 | flex-wrap: wrap; 124 | padding-bottom: 10px; 125 | } 126 | 127 | .form-wrap { 128 | margin: 6px 0; 129 | } 130 | 131 | .form-wrap .form-item { 132 | display: flex; 133 | } 134 | 135 | .form-wrap .form-item input { 136 | flex: 1; 137 | } 138 | 139 | .login-wrapper { 140 | padding: 15px; 141 | background-color: #fff; 142 | } 143 | 144 | .login-desc { 145 | font-size: 14px; 146 | } 147 | 148 | .icon-question { 149 | display: inline-block; 150 | text-align: center; 151 | line-height: 16px; 152 | width: 16px; 153 | height: 16px; 154 | border-radius: 50%; 155 | background-color: #0575ff; 156 | color: #fff; 157 | cursor: pointer; 158 | font-weight: bold; 159 | } 160 | 161 | /* Tooltip text */ 162 | .icon-question .pop-box { 163 | visibility: hidden; 164 | width: 120px; 165 | background-color: #fff; 166 | box-shadow: 0 0 10px #dfdfdf; 167 | color: #000; 168 | text-align: center; 169 | border-radius: 6px; 170 | padding: 4px; 171 | /* Position the tooltip text - see examples below! */ 172 | position: absolute; 173 | z-index: 3; 174 | font-weight: 100; 175 | font-size: 12px; 176 | } 177 | 178 | /* Show the tooltip text when you mouse over the tooltip container */ 179 | .icon-question:hover .pop-box { 180 | visibility: visible; 181 | } 182 | 183 | .f-b-5 { 184 | flex-basis: 50%; 185 | } 186 | 187 | .f-b-3 { 188 | flex-basis: 33.3%; 189 | } 190 | 191 | .t-a-r { 192 | text-align: right; 193 | } 194 | 195 | .drop-item { 196 | display: flex; 197 | align-items: center; 198 | font-size: 12px; 199 | padding: 5px 5px; 200 | } 201 | 202 | .t-nowrap { 203 | overflow: hidden; 204 | text-overflow: ellipsis; 205 | white-space: nowrap; 206 | } 207 | 208 | 209 | 210 | 211 | .videoQuality { 212 | display: flex; 213 | align-items: center; 214 | justify-content: space-between; 215 | flex-wrap: wrap; 216 | padding-bottom: 15px; 217 | } 218 | 219 | input { 220 | width: 40%; 221 | height: 21px; 222 | border: 1px solid #ced4da; 223 | border-radius: .25rem; 224 | color: #495057; 225 | } 226 | 227 | .publish-setting { 228 | display: flex; 229 | /* justify-content: space-between; */ 230 | align-items: center; 231 | } 232 | 233 | .publish-check { 234 | /* flex-basis: 50%; */ 235 | display: flex; 236 | justify-content: space-around; 237 | } 238 | 239 | .check-wrappre { 240 | /* flex-basis: 50%; */ 241 | text-align: center; 242 | display: flex; 243 | align-items: center; 244 | } 245 | 246 | .check-input { 247 | display: inline-block; 248 | width: auto !important; 249 | height: auto !important; 250 | } 251 | 252 | select { 253 | width: 45% !important; 254 | height: 21px !important; 255 | min-height: 10px !important; 256 | padding: 0 !important; 257 | font-size: 12px !important; 258 | } 259 | 260 | .select-wrapper { 261 | flex-basis: 50%; 262 | display: flex; 263 | align-items: center; 264 | white-space: nowrap; 265 | } 266 | 267 | option { 268 | height: 21px !important; 269 | font-size: 14px; 270 | } 271 | 272 | .flex-c { 273 | margin: 5px 0; 274 | display: flex; 275 | align-items: center; 276 | } 277 | 278 | .configBtn { 279 | width: 50%; 280 | } 281 | 282 | @media (max-width: 375px) { 283 | .preview-playInfo { 284 | margin-top: 0 !important; 285 | } 286 | 287 | .configBtn { 288 | width: 90%; 289 | } 290 | } -------------------------------------------------------------------------------- /src/Examples/DebugAndConfig/InitSettings/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | word-break: break-all; 3 | } 4 | /* 房间状态样式 */ 5 | .preview-roomInfo { 6 | font-weight: 500; 7 | } 8 | #roomInfo-id { 9 | display: inline-block; 10 | font-weight: normal; 11 | } 12 | 13 | #roomInfo-state { 14 | display: inline-block; 15 | font-weight: normal; 16 | } 17 | 18 | /* 步骤样式 */ 19 | .action-step { 20 | margin: 10px 0; 21 | } 22 | 23 | .action-content { 24 | width: 100%; 25 | background-color: rgb(252, 250, 250); 26 | border-radius: 10px; 27 | padding: 10px; 28 | } 29 | 30 | .action-title { 31 | font-weight: 700px; 32 | color: black; 33 | } 34 | 35 | .action-info { 36 | font-size: 14px; 37 | } 38 | 39 | .action-form { 40 | display: flex; 41 | flex-direction: column; 42 | } 43 | 44 | .action-form .user-item { 45 | display: flex; 46 | justify-content: space-between; 47 | } 48 | 49 | .action-form .user-item + .user-item { 50 | margin-top: 5px; 51 | } 52 | .user-item .user-name { 53 | margin-right: 5px; 54 | } 55 | 56 | .play-pause-button { 57 | margin-top: 15px; 58 | } 59 | .enable-button.play-pause-button { 60 | margin: 0; 61 | width: 100px; 62 | height: 24; 63 | } 64 | 65 | .action-item { 66 | display: flex; 67 | justify-content: space-between; 68 | font-size: 16px; 69 | } 70 | .action-item input { 71 | flex: 2; 72 | } 73 | 74 | .action-item + .action-item { 75 | margin-top: 10px; 76 | } 77 | 78 | .action-subtitle { 79 | font-size: 14px; 80 | font-weight: bold; 81 | margin: 5px 0; 82 | } 83 | 84 | /* 控件样式 */ 85 | 86 | input { 87 | min-width: 80px; 88 | height: 21px; 89 | border: 1px solid #ced4da; 90 | border-radius: 0.25rem; 91 | color: #495057; 92 | } 93 | 94 | .publish-setting { 95 | display: flex; 96 | align-items: center; 97 | } 98 | 99 | .publish-check { 100 | flex-basis: 50%; 101 | display: flex; 102 | justify-content: space-around; 103 | } 104 | 105 | .check-wrapper { 106 | text-align: center; 107 | display: flex; 108 | align-items: center; 109 | } 110 | 111 | .check-input { 112 | display: inline-block; 113 | width: auto !important; 114 | height: auto !important; 115 | } 116 | 117 | select { 118 | width: 45% !important; 119 | height: 21px !important; 120 | padding: 0 !important; 121 | font-size: 12px !important; 122 | } 123 | 124 | .select-wrapper { 125 | flex-basis: 30%; 126 | display: flex; 127 | align-items: center; 128 | white-space: nowrap; 129 | } 130 | 131 | option { 132 | height: 21px !important; 133 | font-size: 14px; 134 | } 135 | 136 | /* 旋转盒子 */ 137 | .show_rotatebox { 138 | width: 100%; 139 | height: 250px; 140 | border: 1px solid #dfdfdf; 141 | transform-style: preserve-3d; 142 | transform: rotateX(180deg); 143 | perspective: 10000px; 144 | } 145 | 146 | .rotatebox { 147 | width: 140px; 148 | height: 140px; 149 | position: absolute; 150 | transform-style: preserve-3d; 151 | transition: transform 0.5s; 152 | left: 50%; 153 | top: 50%; 154 | } 155 | 156 | .rotatebox div { 157 | width: 140px; 158 | height: 140px; 159 | background-color: rgba(0, 255, 0, 0.9); 160 | position: absolute; 161 | text-align: center; 162 | line-height: 140px; 163 | font-size: 20px; 164 | font-weight: bold; 165 | } 166 | 167 | .rotatebox div:nth-of-type(1) { 168 | transform: translateZ(70px) rotateZ(180deg) rotateY(0deg); 169 | background-color: rgba(255, 152, 0, 0.9); 170 | } 171 | 172 | .rotatebox div:nth-of-type(2) { 173 | transform: translateZ(-70px) rotateZ(180deg) rotateY(180deg); 174 | background-color: rgba(255, 152, 0, 0.9); 175 | } 176 | 177 | .rotatebox div:nth-of-type(3) { 178 | transform: translateX(70px) rotateX(180deg) rotateY(90deg); 179 | background-color: rgba(0, 255, 255, 0.9); 180 | } 181 | 182 | .rotatebox div:nth-of-type(4) { 183 | transform: translateX(-70px) rotateX(180deg) rotateY(-90deg); 184 | background-color: rgba(0, 255, 255, 0.9); 185 | } 186 | 187 | .rotatebox div:nth-of-type(5) { 188 | transform: translateY(-70px) rotateX(90deg); 189 | background-color: rgba(255, 0, 0, 0.9); 190 | } 191 | 192 | .rotatebox div:nth-of-type(6) { 193 | transform: translateY(70px) rotateX(-90deg); 194 | background-color: rgba(255, 0, 0, 0.9); 195 | } 196 | 197 | .span-on { 198 | color: #009688; 199 | } 200 | .span-off { 201 | color: #ff5722; 202 | } 203 | 204 | @media (max-width: 375px) { 205 | .preview-playInfo { 206 | margin-top: 0 !important; 207 | } 208 | } 209 | 210 | /* 211 | 212 | .btn-wrapper { 213 | display: flex; 214 | width: 100%; 215 | background-color: rgb(252, 250, 250); 216 | border-radius: 10px; 217 | height: 30px; 218 | justify-content: center; 219 | align-items: center; 220 | } 221 | 222 | 223 | 224 | .cuBtn { 225 | display: block; 226 | padding: 0 12px; 227 | font-size: 13px; 228 | cursor: pointer; 229 | height: 30px; 230 | width: 95%; 231 | } 232 | 233 | 234 | */ 235 | -------------------------------------------------------------------------------- /src/Examples/DebugAndConfig/InitSettings/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Init Settings 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 |
21 | 22 |
23 | 24 | 25 |
26 |
27 |
28 |
29 |
30 |
31 | 32 | InitSettings 33 | 34 |
35 |
36 | 请输入即构控制台中项目对应的 AppID 及 Server（环境配置 - Web - Server），用以体验示例 demo。 37 | 点击打开ZEGO控制台 38 |
39 |
40 |
41 |
42 | AppID 43 | 44 |
45 |
46 | Server 47 | 48 |
49 |
50 | 53 |
54 |
55 |
56 |
57 |
58 |
59 | 60 |
61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /src/Examples/DebugAndConfig/InitSettings/index.js: -------------------------------------------------------------------------------- 1 | let appID,// 请从官网控制台获取对应的appID 2 | server // 请从官网控制台获取对应的server地址，否则可能登录失败 3 | 4 | let appInfo = {} 5 | if (!appID || !server) { 6 | try { 7 | const appInfoStr = localStorage.getItem("app_info") 8 | const parseAppInfo = JSON.parse(appInfoStr) 9 | appInfo = parseAppInfo || appInfo 10 | } catch (error) { 11 | localStorage.removeItem("app_info") 12 | } 13 | } else { 14 | localStorage.setItem("app_info", JSON.stringify({ 15 | appID, 16 | server 17 | })) 18 | } 19 | appID = appInfo.appID; 20 | server = appInfo.server; 21 | 22 | $("#AppID").val(appID) 23 | $("#Server").val(server) 24 | 25 | function setAppIDAndServer(newAppID, newServer) { 26 | if (isNaN(newAppID)) { 27 | alert("AppID is wrong") 28 | return false 29 | } else if (!newServer) { 30 | alert("Server is wrong") 31 | return false 32 | } else { 33 | appID = newAppID 34 | server = newServer 35 | localStorage.setItem("app_info", JSON.stringify({ 36 | appID, 37 | server 38 | })) 39 | } 40 | return true 41 | } 42 | 43 | $("#submit").click(() => { 44 | const newAppID = parseInt($("#AppID").val()) 45 | const newServer = $("#Server").val() 46 | const result = setAppIDAndServer(newAppID, newServer) 47 | if(result) { 48 | const isLink = confirm("Set successfully! Link to function page.") 49 | var baseURL = window.location.href.match(/.*\/Examples/)[0] 50 | if(isLink) { 51 | window.location.href = `${baseURL}/QuickStart/VideoTalk/index.html${location.search}` 52 | } 53 | } 54 | }) -------------------------------------------------------------------------------- /src/Examples/DebugAndConfig/LogAndVersionAndDebug/index.css: -------------------------------------------------------------------------------- 1 | select { 2 | flex: 0 1 45% !important; 3 | } 4 | 5 | .KeyCenter { 6 | font-size: 16px; 7 | font-weight: 500; 8 | color: #000; 9 | } 10 | 11 | .KeyCenterValue { 12 | font-size: 14px; 13 | font-weight: normal; 14 | } 15 | 16 | .debug-check { 17 | display: flex; 18 | align-items: center; 19 | } 20 | 21 | .debug-check > input[type="checkbox"] { 22 | height: 0; 23 | width: 0; 24 | visibility: hidden; 25 | } 26 | 27 | .debug-check > label { 28 | cursor: pointer; 29 | text-indent: -9999px; 30 | width: 40px; 31 | height: 20px; 32 | background: grey; 33 | display: inline-block; 34 | border-radius: 100px; 35 | position: relative; 36 | margin-bottom: 0; 37 | } 38 | 39 | .debug-check > label:after { 40 | content: ""; 41 | position: absolute; 42 | top: 2px; 43 | left: 2px; 44 | width: 16px; 45 | height: 16px; 46 | background: #fff; 47 | border-radius: 100%; 48 | transition: 0.3s; 49 | } 50 | 51 | .debug-check > input:checked + label { 52 | background: #009efb; 53 | } 54 | 55 | .debug-check > input:checked + label:after { 56 | left: calc(100% - 2px); 57 | transform: translateX(-100%); 58 | } 59 | 60 | .debug-check > label:active:after { 61 | width: 23px; 62 | } 63 | 64 | .switch-field { 65 | display: flex; 66 | margin-bottom: 36px; 67 | overflow: hidden; 68 | } 69 | 70 | .switch-field input { 71 | position: absolute !important; 72 | clip: rect(0, 0, 0, 0); 73 | height: 1px; 74 | width: 1px; 75 | border: 0; 76 | overflow: hidden; 77 | } 78 | 79 | .switch-field label { 80 | background-color: #e4e4e4; 81 | color: rgba(0, 0, 0, 0.6); 82 | font-size: 14px; 83 | line-height: 1; 84 | text-align: center; 85 | padding: 8px 32px; 86 | margin-right: -1px; 87 | border: 1px solid rgba(0, 0, 0, 0.2); 88 | box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); 89 | transition: all 0.1s ease-in-out; 90 | } 91 | 92 | .switch-field label:hover { 93 | cursor: pointer; 94 | } 95 | 96 | .switch-field input:checked + label { 97 | background-color: #009efb; 98 | box-shadow: none; 99 | color: #fff; 100 | } 101 | 102 | .switch-field label:first-of-type { 103 | border-radius: 4px 0 0 4px; 104 | } 105 | 106 | .switch-field label:last-of-type { 107 | border-radius: 0 4px 4px 0; 108 | } 109 | 110 | h4 { 111 | margin-top: 6px; 112 | } 113 | -------------------------------------------------------------------------------- /src/Examples/DebugAndConfig/LogAndVersionAndDebug/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Log,Version,Debug 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 |
21 | 22 |
23 | 24 | 25 |
26 |
27 |

Log Setting

28 |
29 |
30 | 31 |
32 | 40 |
41 |
42 |
43 | 44 |
45 | 52 |
53 | 65 |

Debug

66 |
67 | Debug Verbose  68 |
69 | 78 |

Version

79 |
80 |
81 |

Language switching

82 |
83 | 84 | 85 | 86 | 87 |
88 |

video Codec

89 |
90 | 91 | 92 | 93 | 94 |
95 |
    96 |
  • 97 | 更多文档，请跳转至即构   98 | 帮助文档 99 |
    • 100 |
101 |
102 |
103 | 104 |
105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | -------------------------------------------------------------------------------- /src/Examples/DebugAndConfig/LogAndVersionAndDebug/index.js: -------------------------------------------------------------------------------- 1 | let zg = new ZegoExpressEngine(appID, server); 2 | window.zg = zg; 3 | let videoCodec = localStorage.getItem('VideoCodec') === 'H.264' ? 'H264' : 'VP8' 4 | 5 | // setLogConfig 6 | function setLogConfig(logConfig) { 7 | zg.setLogConfig(logConfig); 8 | } 9 | 10 | // setDebugVerbose 11 | function setDebugVerbose(flag) { 12 | zg.setDebugVerbose(flag); 13 | } 14 | 15 | $('#SetLogConfig').on('click', function () { 16 | const logLevelList = ['debug', 'info', 'warn', 'error', 'report', 'disable']; 17 | const remoteLogLevelList = ['debug', 'info', 'warn', 'error', 'disable']; 18 | const logSelectIndex = $('#logLevel')[0].value; 19 | const remoreLogSelectIndex = $('#remoteLogLevel')[0].value; 20 | const config = { 21 | logLevel: logLevelList[logSelectIndex], 22 | remoteLogLevel: remoteLogLevelList[remoreLogSelectIndex], 23 | logURL: '' 24 | }; 25 | setLogConfig(config); 26 | localStorage.setItem('logLevel', logSelectIndex); 27 | localStorage.setItem('remoteLogLevel', remoreLogSelectIndex); 28 | localStorage.setItem('logConfig', JSON.stringify(config)); 29 | $('#successSvg').css('display', 'inline-block'); 30 | }); 31 | 32 | $('#logLevel').on('change', function () { 33 | $('#successSvg').css('display', 'none'); 34 | }) 35 | 36 | $('#remoteLogLevel').on('change', function () { 37 | $('#successSvg').css('display', 'none'); 38 | }) 39 | 40 | $('#debug-check').on('change', function () { 41 | $('#successSvg').css('display', 'none'); 42 | setDebugVerbose(this.checked); 43 | localStorage.setItem('DebugVerbose', this.checked); 44 | }); 45 | 46 | $('#radio-one').on('change', function ({ target }) { 47 | if (target.checked) { 48 | localStorage.setItem('Language', target.value); 49 | } 50 | setTimeout(() => { 51 | location.reload() 52 | }, 100) 53 | }); 54 | 55 | $('#radio-two').on('change', function ({ target }) { 56 | if (target.checked) { 57 | localStorage.setItem('Language', target.value); 58 | } 59 | setTimeout(() => { 60 | location.reload() 61 | }, 100) 62 | }); 63 | 64 | $('#radio-video-one').on('change', function ({ target }) { 65 | if (target.checked) { 66 | localStorage.setItem('VideoCodec', target.value); 67 | } 68 | setTimeout(() => { 69 | location.reload() 70 | }, 100) 71 | }); 72 | 73 | $('#radio-video-two').on('change', function ({ target }) { 74 | if (target.checked) { 75 | localStorage.setItem('VideoCodec', target.value); 76 | } 77 | setTimeout(() => { 78 | location.reload() 79 | }, 100) 80 | }); 81 | 82 | // render 83 | $(function render() { 84 | $('#AppID').text(appID); 85 | $('#Server').text(server); 86 | $('#SDKVersion').text(`SDK: ${zg.getVersion()}`); 87 | $('#DemoVersion').text(`Demo: ${zg.getVersion()}`); 88 | $('#debug-check')[0].checked = localStorage.getItem('DebugVerbose') === 'true' ? true : false; 89 | 90 | const selectLog = $('#logLevel')[0][localStorage.getItem('logLevel')]; 91 | $('#logLevel').val(!selectLog ? 0 : selectLog.value); 92 | const selectRemoteLog = $('#remoteLogLevel')[0][localStorage.getItem('remoteLogLevel')]; 93 | $('#remoteLogLevel').val(!selectRemoteLog ? 0 : selectRemoteLog.value); 94 | 95 | const language = localStorage.getItem('Language'); 96 | const flag = !language ? true : language === 'zh' ? true : false 97 | if (flag) { 98 | $('#radio-one').attr('checked', true) 99 | $('#radio-two').remove('checked') 100 | } else { 101 | $('#radio-two').attr('checked', true) 102 | $('#radio-one').remove('checked') 103 | } 104 | 105 | const videoCodec = localStorage.getItem('VideoCodec'); 106 | const flagVideo = !videoCodec ? true : videoCodec === 'VP8' ? true : false 107 | if (flagVideo) { 108 | $('#radio-video-one').attr('checked', true) 109 | $('#radio-video-two').remove('checked') 110 | } else { 111 | $('#radio-video-two').attr('checked', true) 112 | $('#radio-video-one').remove('checked') 113 | } 114 | }); 115 | -------------------------------------------------------------------------------- /src/Examples/Framework/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zegoim/express-demo-web/b22b120bdb83cebc121bbf316499952220fb9e1f/src/Examples/Framework/.DS_Store -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zegoim/express-demo-web/b22b120bdb83cebc121bbf316499952220fb9e1f/src/Examples/Framework/Angular/.DS_Store -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/angular/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zegoim/express-demo-web/b22b120bdb83cebc121bbf316499952220fb9e1f/src/Examples/Framework/Angular/angular/.DS_Store -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/angular/README.md: -------------------------------------------------------------------------------- 1 | # ZegoExpressDemo 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.1.4. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. 28 | -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/angular/angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "cli": { 4 | "analytics": false 5 | }, 6 | "version": 1, 7 | "newProjectRoot": "projects", 8 | "projects": { 9 | "zegoExpressDemo": { 10 | "projectType": "application", 11 | "schematics": { 12 | "@schematics/angular:application": { 13 | "strict": true 14 | } 15 | }, 16 | "root": "", 17 | "sourceRoot": "src", 18 | "prefix": "app", 19 | "architect": { 20 | "build": { 21 | "builder": "@angular-devkit/build-angular:browser", 22 | "options": { 23 | "allowedCommonJsDependencies":[ 24 | "zego-express-engine-webrtc" 25 | ], 26 | "outputPath": "../dist", 27 | "index": "src/index.html", 28 | "main": "src/main.ts", 29 | "polyfills": "src/polyfills.ts", 30 | "tsConfig": "tsconfig.app.json", 31 | "assets": [ 32 | "src/favicon.ico", 33 | "src/assets" 34 | ], 35 | "styles": [ 36 | "src/styles.css" 37 | ], 38 | "scripts": [] 39 | }, 40 | "configurations": { 41 | "production": { 42 | "budgets": [ 43 | { 44 | "type": "initial", 45 | "maximumWarning": "2mb", 46 | "maximumError": "5mb" 47 | }, 48 | { 49 | "type": "anyComponentStyle", 50 | "maximumWarning": "20kb", 51 | "maximumError": "40kb" 52 | } 53 | ], 54 | "fileReplacements": [ 55 | { 56 | "replace": "src/environments/environment.ts", 57 | "with": "src/environments/environment.prod.ts" 58 | } 59 | ], 60 | "outputHashing": "all" 61 | }, 62 | "development": { 63 | "buildOptimizer": false, 64 | "optimization": false, 65 | "vendorChunk": true, 66 | "extractLicenses": false, 67 | "sourceMap": true, 68 | "namedChunks": true 69 | } 70 | }, 71 | "defaultConfiguration": "production" 72 | }, 73 | "serve": { 74 | "builder": "@angular-devkit/build-angular:dev-server", 75 | "configurations": { 76 | "production": { 77 | "browserTarget": "zegoExpressDemo:build:production" 78 | }, 79 | "development": { 80 | "browserTarget": "zegoExpressDemo:build:development" 81 | } 82 | }, 83 | "defaultConfiguration": "development" 84 | }, 85 | "extract-i18n": { 86 | "builder": "@angular-devkit/build-angular:extract-i18n", 87 | "options": { 88 | "browserTarget": "zegoExpressDemo:build" 89 | } 90 | }, 91 | "test": { 92 | "builder": "@angular-devkit/build-angular:karma", 93 | "options": { 94 | "main": "src/test.ts", 95 | "polyfills": "src/polyfills.ts", 96 | "tsConfig": "tsconfig.spec.json", 97 | "karmaConfig": "karma.conf.js", 98 | "assets": [ 99 | "src/favicon.ico", 100 | "src/assets" 101 | ], 102 | "styles": [ 103 | "src/styles.css" 104 | ], 105 | "scripts": [] 106 | } 107 | } 108 | } 109 | } 110 | }, 111 | "defaultProject": "zegoExpressDemo" 112 | } 113 | -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/angular/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | jasmine: { 17 | // you can add configuration options for Jasmine here 18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html 19 | // for example, you can disable the random execution with `random: false` 20 | // or set a specific seed with `seed: 4321` 21 | }, 22 | clearContext: false // leave Jasmine Spec Runner output visible in browser 23 | }, 24 | jasmineHtmlReporter: { 25 | suppressAll: true // removes the duplicated traces 26 | }, 27 | coverageReporter: { 28 | dir: require('path').join(__dirname, './coverage/zegoExpressDemo'), 29 | subdir: '.', 30 | reporters: [ 31 | { type: 'html' }, 32 | { type: 'text-summary' } 33 | ] 34 | }, 35 | reporters: ['progress', 'kjhtml'], 36 | port: 9876, 37 | colors: true, 38 | logLevel: config.LOG_INFO, 39 | autoWatch: true, 40 | browsers: ['Chrome'], 41 | singleRun: false, 42 | restartOnFileChange: true 43 | }); 44 | }; 45 | -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "zego-express-demo", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "watch": "ng build --watch --configuration development", 9 | "test": "ng test" 10 | }, 11 | "private": true, 12 | "dependencies": { 13 | "@angular/animations": "~12.1.0", 14 | "@angular/common": "~12.1.0", 15 | "@angular/compiler": "~12.1.0", 16 | "@angular/core": "~12.1.0", 17 | "@angular/forms": "~12.1.0", 18 | "@angular/platform-browser": "~12.1.0", 19 | "@angular/platform-browser-dynamic": "~12.1.0", 20 | "@angular/router": "~12.1.0", 21 | "rxjs": "~6.6.0", 22 | "tslib": "^2.2.0", 23 | "zego-express-engine-webrtc": "^3.0.0", 24 | "zone.js": "~0.11.4" 25 | }, 26 | "devDependencies": { 27 | "@angular-devkit/build-angular": "~12.1.4", 28 | "@angular/cli": "~12.1.4", 29 | "@angular/compiler-cli": "~12.1.0", 30 | "@types/jasmine": "~3.8.0", 31 | "@types/node": "^12.11.1", 32 | "jasmine-core": "~3.8.0", 33 | "karma": "~6.3.0", 34 | "karma-chrome-launcher": "~3.1.0", 35 | "karma-coverage": "~2.0.3", 36 | "karma-jasmine": "~4.0.0", 37 | "karma-jasmine-html-reporter": "~1.7.0", 38 | "typescript": "~4.3.2" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/angular/src/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zegoim/express-demo-web/b22b120bdb83cebc121bbf316499952220fb9e1f/src/Examples/Framework/Angular/angular/src/.DS_Store -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/angular/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .pushlishInfo-title { 2 | font-weight: 500; 3 | } 4 | 5 | .preview-content { 6 | width: auto; 7 | height: 200px; 8 | border: 1px solid #ccc; 9 | } 10 | #localVideo{ 11 | width: auto; 12 | height: 100%; 13 | } 14 | 15 | .preview-content > video { 16 | width: 100%; 17 | height: 100%; 18 | } 19 | .preview-roomInfo { 20 | font-weight: 500; 21 | } 22 | 23 | #roomInfo-id { 24 | display: inline-block; 25 | font-weight: normal; 26 | } 27 | 28 | #roomInfo-state { 29 | display: inline-block; 30 | font-weight: normal; 31 | } 32 | 33 | 34 | .logger-wrapper { 35 | margin-top: 20px; 36 | width: 100%; 37 | height: 250px; 38 | background-color: #ccc; 39 | color: rgb(252, 250, 250); 40 | overflow: scroll; 41 | } 42 | 43 | .btn-wrapper { 44 | display: flex; 45 | width: 100%; 46 | background-color: rgb(252, 250, 250); 47 | border-radius: 10px; 48 | height: 30px; 49 | justify-content: center; 50 | align-items: center; 51 | } 52 | 53 | .action-step { 54 | margin: 10px 0; 55 | } 56 | 57 | .action-content { 58 | width: 100%; 59 | background-color: rgb(252, 250, 250); 60 | border-radius: 10px; 61 | padding: 10px; 62 | } 63 | 64 | .action-title { 65 | font-weight: 700px; 66 | color: black; 67 | } 68 | .action-info { 69 | font-size: 14px; 70 | } 71 | 72 | .cuBtn { 73 | display: block; 74 | padding: 0 12px; 75 | font-size: 13px; 76 | cursor: pointer; 77 | height: 30px; 78 | width: 95%; 79 | } 80 | 81 | .action-room { 82 | padding-bottom: 15px; 83 | } 84 | .action-room > div + div { 85 | margin-top: 4px; 86 | } 87 | .icon-question { 88 | display: inline-block; 89 | text-align: center; 90 | line-height: 16px; 91 | width: 16px; 92 | height: 16px; 93 | border-radius: 50%; 94 | background-color: #0575ff; 95 | color: #fff; 96 | cursor: pointer; 97 | font-weight: bold; 98 | } 99 | /* Tooltip text */ 100 | .icon-question .pop-box { 101 | visibility: hidden; 102 | width: 120px; 103 | background-color: #fff; 104 | box-shadow: 0 0 10px #dfdfdf; 105 | color: #000; 106 | text-align: center; 107 | border-radius: 6px; 108 | padding: 4px; 109 | /* Position the tooltip text - see examples below! */ 110 | position: absolute; 111 | z-index: 1; 112 | font-weight: 100; 113 | font-size: 12px; 114 | } 115 | /* Show the tooltip text when you mouse over the tooltip container */ 116 | .icon-question:hover .pop-box { 117 | visibility: visible; 118 | } 119 | 120 | .f-b-3 { 121 | flex-basis: 30%; 122 | } 123 | 124 | .f-b-7 { 125 | flex-basis: 70% !important; 126 | } 127 | 128 | input { 129 | width: 40%; 130 | height: 21px ; 131 | border: 1px solid #ced4da; 132 | border-radius: .25rem; 133 | color: #495057; 134 | } 135 | 136 | .w-70 { 137 | width: 70%; 138 | } 139 | 140 | .publish-setting { 141 | display: flex; 142 | /* justify-content: space-between; */ 143 | align-items: center; 144 | } 145 | 146 | .publish-check { 147 | flex-basis: 50%; 148 | display: flex; 149 | justify-content: space-around; 150 | } 151 | 152 | .check-wrappre { 153 | text-align: center; 154 | display: flex; 155 | align-items: center; 156 | } 157 | 158 | .check-input { 159 | display: inline-block; 160 | width: auto !important; 161 | height: auto !important; 162 | } 163 | 164 | select { 165 | width: 45% !important; 166 | height: 21px !important; 167 | padding: 0 !important; 168 | font-size: 12px !important; 169 | } 170 | 171 | .select-wrapper { 172 | flex-basis: 30%; 173 | display: flex; 174 | align-items: center; 175 | white-space: nowrap; 176 | } 177 | 178 | option { 179 | height: 21px !important; 180 | font-size: 14px; 181 | } 182 | 183 | .mirror{ 184 | transform: scale(-1,1); 185 | } 186 | 187 | @media (max-width: 375px) { 188 | .preview-playInfo { 189 | margin-top: 0 !important; 190 | } 191 | } -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/angular/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | 4 | describe('AppComponent', () => { 5 | beforeEach(async () => { 6 | await TestBed.configureTestingModule({ 7 | declarations: [ 8 | AppComponent 9 | ], 10 | }).compileComponents(); 11 | }); 12 | 13 | it('should create the app', () => { 14 | const fixture = TestBed.createComponent(AppComponent); 15 | const app = fixture.componentInstance; 16 | expect(app).toBeTruthy(); 17 | }); 18 | 19 | it(`should have as title 'zegoExpressDemo'`, () => { 20 | const fixture = TestBed.createComponent(AppComponent); 21 | const app = fixture.componentInstance; 22 | expect(app.title).toEqual('zegoExpressDemo'); 23 | }); 24 | 25 | it('should render title', () => { 26 | const fixture = TestBed.createComponent(AppComponent); 27 | fixture.detectChanges(); 28 | const compiled = fixture.nativeElement as HTMLElement; 29 | expect(compiled.querySelector('.content span')?.textContent).toContain('zegoExpressDemo app is running!'); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/angular/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { HttpClientModule } from '@angular/common/http' 5 | 6 | import { AppComponent } from './app.component'; 7 | 8 | @NgModule({ 9 | declarations: [ 10 | AppComponent 11 | ], 12 | imports: [ 13 | BrowserModule, 14 | FormsModule, 15 | HttpClientModule 16 | ], 17 | providers: [], 18 | bootstrap: [AppComponent] 19 | }) 20 | export class AppModule { } 21 | -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/angular/src/app/device.ts: -------------------------------------------------------------------------------- 1 | export interface DeviceInfo { 2 | deviceID:string, 3 | deviceName:string 4 | } -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/angular/src/assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zegoim/express-demo-web/b22b120bdb83cebc121bbf316499952220fb9e1f/src/Examples/Framework/Angular/angular/src/assets/.DS_Store -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/angular/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zegoim/express-demo-web/b22b120bdb83cebc121bbf316499952220fb9e1f/src/Examples/Framework/Angular/angular/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/angular/src/assets/js/jquery.i18n.properties.min.js: -------------------------------------------------------------------------------- 1 | (function(h){function v(a){a.debug&&(f("callbackIfComplete()"),f("totalFiles: "+a.totalFiles),f("filesLoaded: "+a.filesLoaded));a.async&&a.filesLoaded===a.totalFiles&&a.callback&&a.callback()}function n(a,c){c.debug&&f("loadAndParseFiles");null!==a&&0c.length)a.debug&&f("No language supplied. Pulling it from the browser ..."),c=navigator.languages&&0=b.outerHeight()?k=!0:(c.stop(!0, 11 | !0).fadeIn("fast"),a.railVisible&&m.stop(!0,!0).fadeIn("fast"))}function p(){a.alwaysVisible||(B=setTimeout(function(){a.disableFadeOut&&r||y||z||(c.fadeOut("slow"),m.fadeOut("slow"))},1E3))}var r,y,z,B,A,u,l,C,k=!1,b=e(this);if(b.parent().hasClass(a.wrapperClass)){var q=b.scrollTop(),c=b.siblings("."+a.barClass),m=b.siblings("."+a.railClass);x();if(e.isPlainObject(f)){if("height"in f&&"auto"==f.height){b.parent().css("height","auto");b.css("height","auto");var h=b.parent().parent().height();b.parent().css("height", 12 | h);b.css("height",h)}else"height"in f&&(h=f.height,b.parent().css("height",h),b.css("height",h));if("scrollTo"in f)q=parseInt(a.scrollTo);else if("scrollBy"in f)q+=parseInt(a.scrollBy);else if("destroy"in f){c.remove();m.remove();b.unwrap();return}n(q,!1,!0)}}else if(!(e.isPlainObject(f)&&"destroy"in f)){a.height="auto"==a.height?b.parent().height():a.height;q=e("
").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden", 13 | width:a.width,height:a.height});var m=e("
").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?"block":"none","border-radius":a.railBorderRadius,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=e("
").addClass(a.barClass).css({background:a.color,width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?"block":"none","border-radius":a.borderRadius,BorderRadius:a.borderRadius,MozBorderRadius:a.borderRadius, 14 | WebkitBorderRadius:a.borderRadius,zIndex:99}),h="right"==a.position?{right:a.distance}:{left:a.distance};m.css(h);c.css(h);b.wrap(q);b.parent().append(c);b.parent().append(m);a.railDraggable&&c.bind("mousedown",function(a){var b=e(document);z=!0;t=parseFloat(c.css("top"));pageY=a.pageY;b.bind("mousemove.slimscroll",function(a){currTop=t+a.pageY-pageY;c.css("top",currTop);n(0,c.position().top,!1)});b.bind("mouseup.slimscroll",function(a){z=!1;p();b.unbind(".slimscroll")});return!1}).bind("selectstart.slimscroll", 15 | function(a){a.stopPropagation();a.preventDefault();return!1});m.hover(function(){w()},function(){p()});c.hover(function(){y=!0},function(){y=!1});b.hover(function(){r=!0;w();p()},function(){r=!1;p()});b.bind("touchstart",function(a,b){a.originalEvent.touches.length&&(A=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){k||b.originalEvent.preventDefault();b.originalEvent.touches.length&&(n((A-b.originalEvent.touches[0].pageY)/a.touchScrollStep,!0),A=b.originalEvent.touches[0].pageY)}); 16 | x();"bottom"===a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),n(0,!0)):"top"!==a.start&&(n(e(a.start).position().top,null,!0),a.alwaysVisible||c.hide());window.addEventListener?(this.addEventListener("DOMMouseScroll",v,!1),this.addEventListener("mousewheel",v,!1)):document.attachEvent("onmousewheel",v)}});return this}});e.fn.extend({slimscroll:e.fn.slimScroll})})(jQuery); -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/angular/src/assets/js/metisMenu.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * metismenu https://github.com/onokumus/metismenu#readme 3 | * A jQuery menu plugin 4 | * @version 3.0.6 5 | * @author Osman Nuri Okumus (https://github.com/onokumus) 6 | * @license: MIT 7 | */ 8 | !function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("jquery")):"function"==typeof define&&define.amd?define(["jquery"],n):(e=e||self).metisMenu=n(e.jQuery)}(this,function(o){"use strict";function a(){return(a=Object.assign||function(e){for(var n=1;n{ 2 | const result:any = function () { 3 | var u = navigator.userAgent, app = navigator.appVersion; 4 | return { 5 | // ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), 6 | ios: u.indexOf('iPhone') > -1 || u.indexOf('iPad') > -1, 7 | android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 8 | }; 9 | }() 10 | 11 | for (let brow in result) { 12 | if (result[brow]) return brow 13 | } 14 | return 'web' 15 | } 16 | 17 | export default getBrow -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/angular/src/assets/translate/en.properties: -------------------------------------------------------------------------------- 1 | Quickstart = Quick Start 2 | Scenes = Scenes 3 | CommonFeatures = Common Features 4 | AdvancedStreaming = Advanced Streaming 5 | AdvancedVideoProcessing = Advanced Video Processing 6 | AdvancedAudioProcessing = Advanced Audio Processing 7 | Others = Others 8 | CommonUsage = Common Usage 9 | Publishing = Publishing 10 | Playing = Playing 11 | VideoForMultipleUsers = Video For Multiple Users 12 | CommonVideoConfig = Common Video Config 13 | VideoRotation = Video Rotation 14 | RoomMessage = Room Message 15 | StreamMonitoring = Stream Monitoring 16 | PublishingMultipleStreams = Publishing Multiple Streams 17 | StreamByCDN = Stream by CDN 18 | StreamByUrl = Play Stream by CDN 19 | CustomVideoCapture = Custom Video Capture 20 | EarReturnAndChannelSettings = Ear Return and Channel Settings 21 | SoundLevelAndAudioSpectrum = SoundLevel 22 | AudioMixing = Audio Mixing 23 | CustomAudioCaptureAndRendering = Custom Capture 24 | CustomAudioProcessing = Custom Audio Processing 25 | StreamMixing = Stream Mixing 26 | MultipleRooms = Multiple Rooms 27 | SetVideoProperties = Set Video Codec Properties 28 | ScreenSharing = Screen Sharing 29 | TurnPublishingCDN = Turn Publishing CDN 30 | DualChannel = Dual Channel 31 | CheckSystemRequirements = Check System Requirements 32 | LowLatencyLive = Low-Latency Live 33 | DebugAndConfig = Debug & Config 34 | Log_Version_Debug = Log,Version,Debug 35 | AEC_ANS_AGC = AEC,ANS,AGC 36 | OpenTheConsole = Open the console to view the callback information 37 | TurnPublishingCDNInfo = Forwarding a stream from ZEGO cloud-based real-time streaming server to the designated CDN 38 | Preview = Preview 39 | PlayStream = Play Stream 40 | HeadphoneMonitor = HeadphoneMonitor 41 | StereoChannel = Stereo Channel 42 | SetChannel = Set Channel 43 | Mono = Mono 44 | DualChannel = Dual Channel 45 | Volume = Volume 46 | AEC = AEC 47 | AGC = AGC 48 | ANS = ANS 49 | StartSoundLevelMonitor = Start SoundLevel Monitor 50 | SoundLevelChange = SoundLevel Change 51 | CaptureResolution = Capture Resolution 52 | FPS = FPS 53 | Bitrate = Bitrate 54 | Screen = Screen 55 | Camera = Camera 56 | CameraSwitch = Camera Switch 57 | Mirror = Mirror 58 | Microphone = Microphone 59 | MicrophoneSwitch = Microphone Switch 60 | Video = Video 61 | Audio = Audio 62 | PublishStream = Publish Stream 63 | MixStream = Mix Stream 64 | PlayMixedStream = Play Mixed Stream 65 | BroadcastMessageReceived = BroadcastMessage Received 66 | SendBroadcastMessage = Send BroadcastMessage 67 | BarrageMessageReceived = BarrageMessage Received 68 | SendBarrageMessage = Send BarrageMessage 69 | CustomCommandReceived = CustomCommand Received 70 | SendCustomCommand = Send CustomCommand 71 | RoomExtraInfo = RoomExtraInfo 72 | SetRoomExtraInfo = Set RoomExtraInfo 73 | AddPublishCdnUrl = AddPublishCdnUrl 74 | PublishCDNURL = Publish CDN URL 75 | PlayStreamFromURL = Play Stream From URL 76 | PlayFirstStream = Play First Stream 77 | PlaySecondStream = Play Second Stream 78 | AudioSource = Audio Source 79 | MediaTrackReplacement = Media Track Replacement 80 | VideoTrackReplacement = Video Track Replacement 81 | AudioTrackReplacement = Audio Track Replacement 82 | MoreDocs = For more documents, click to ZEGO 83 | HelpDocs = Help document 84 | EarReturnTips = Please plug in the earphones before experiencing the ear return function 85 | MixStreamTips = Support mixed multi-channel flow, please consult technical support for the specific maximum number of mixed streams supported 86 | HelpSettingsPage = Click to edit 87 | HelpDocsVideoCodec = The web video encoding uses VP8 by default, and the experience is interoperable with other terminals. Please modify it to H.264 on the debugging and configuration page. -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/angular/src/assets/translate/en_en.properties: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zegoim/express-demo-web/b22b120bdb83cebc121bbf316499952220fb9e1f/src/Examples/Framework/Angular/angular/src/assets/translate/en_en.properties -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/angular/src/assets/translate/zh.properties: -------------------------------------------------------------------------------- 1 | Quickstart = 快速开始 2 | Scenes = 最佳实践 3 | CommonFeatures = 常用功能 4 | AdvancedStreaming = 推拉流进阶 5 | AdvancedVideoProcessing = 视频进阶功能 6 | AdvancedAudioProcessing = 音频进阶功能 7 | Others = 其他功能 8 | CommonUsage = 实现流程 9 | Publishing = 推流 10 | Playing = 拉流 11 | VideoForMultipleUsers = 多人视频通话 12 | CommonVideoConfig = 常用视频配置 13 | VideoRotation = 视频旋转 14 | RoomMessage = 房间实时消息 15 | StreamMonitoring = 推拉流信息监测 16 | PublishingMultipleStreams = 推多路流 17 | StreamByCDN = 通过CDN推流拉流 18 | StreamByUrl = 通过CDN拉流 19 | CustomVideoCapture = 自定义视频采集 20 | EarReturnAndChannelSettings = 耳返与声道设置 21 | SoundLevelAndAudioSpectrum = 音量变化 22 | AudioMixing = 混音 23 | CustomAudioCaptureAndRendering = 自定义音频采集 24 | CustomAudioProcessing = 自定义音频处理 25 | StreamMixing = 多路混流 26 | MultipleRooms = 登录多房间 27 | SetVideoProperties = 设置视频编码属性 28 | ScreenSharing = 屏幕共享 29 | TurnPublishingCDN = 转推CDN 30 | DualChannel = 双声道 31 | CheckSystemRequirements = 检查浏览器支持 32 | LowLatencyLive = 低延迟直播 33 | DebugAndConfig = 调试与配置 34 | Log_Version_Debug = 日志、版本号、调试信息 35 | AEC_ANS_AGC = 音频3A处理 36 | VoiceChanger = 变声 37 | AiDenoise = Ai降噪 38 | OpenTheConsole = 打开控制台查看回调信息 39 | TurnPublishingCDNInfo = 将音视频流从 Zego 实时音视频转推到 CDN 40 | Preview = 预览 41 | PlayStream = 拉流 42 | HeadphoneMonitor = 耳返 43 | StereoChannel = 双声道立体声 44 | SetChannel = 设置声道 45 | Mono = 单声道 46 | DualChannel = 双声道 47 | Volume = 音量 48 | AEC = 回声消除 49 | AGC = 自动增益 50 | ANS = 噪声抑制 51 | StartSoundLevelMonitor = 开启声浪监听 52 | SoundLevelChange = 声浪变化 53 | CaptureResolution = 采集分辨率 54 | FPS = 视频帧率 55 | Bitrate = 视频码率 56 | Screen = 屏幕 57 | Camera = 摄像头 58 | CameraSwitch = 切换摄像头 59 | Mirror = 镜像模式 60 | Microphone = 麦克风 61 | MicrophoneSwitch = 切换麦克风 62 | Video = 视频 63 | Audio = 音频 64 | PublishStream = 推流 65 | MixStream = 混流 66 | PlayMixedStream = 播放混合流 67 | BroadcastMessageReceived = 收到广播消息 68 | SendBroadcastMessage = 发送广播消息 69 | BarrageMessageReceived = 收到弹幕消息 70 | SendBarrageMessage = 发送弹幕消息 71 | CustomCommandReceived = 收到自定义命令 72 | SendCustomCommand = 发送自定义命令 73 | RoomExtraInfo = 房间附件消息 74 | SetRoomExtraInfo = 设置房间附加消息 75 | AddPublishCdnUrl = 添加推流到 CDN 的 URL 76 | PublishCDNURL = 推流 CDN URL 77 | PlayStreamFromURL = 从 URL 拉流 78 | PublishCameraStream = 推摄像头获取的流 79 | PublishScreenStream = 推屏幕共享获取的流 80 | PlayFirstStream = 拉第一条流 81 | PlaySecondStream = 拉第二条流 82 | AudioSource = 音频源 83 | MediaTrackReplacement = 音视频轨道替换 84 | VideoTrackReplacement = 视频轨道替换 85 | AudioTrackReplacement = 音频轨道替换 86 | MoreDocs = 更多文档，请跳转至即构 87 | HelpDocs = 帮助文档 88 | EarReturnTips = 请插入耳机后再体验耳返功能 89 | MixStreamTips = 支持混合多路流，具体支持的最大混流条数请咨询技术支持 90 | HelpSettingsPage = 点击修改 91 | HelpDocsVideoCodec = Web 端视频编码默认使用 VP8。如果需要体验和其他端互通或者转推 CDN 功能，请在调试与配置页面修改为 H.264。 -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/angular/src/assets/translate/zh_zh.properties: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zegoim/express-demo-web/b22b120bdb83cebc121bbf316499952220fb9e1f/src/Examples/Framework/Angular/angular/src/assets/translate/zh_zh.properties -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/angular/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/angular/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/angular/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zegoim/express-demo-web/b22b120bdb83cebc121bbf316499952220fb9e1f/src/Examples/Framework/Angular/angular/src/favicon.ico -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/angular/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ZegoExpressDemo 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/angular/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/angular/src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/guide/browser-support 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** 22 | * IE11 requires the following for NgClass support on SVG elements 23 | */ 24 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 25 | 26 | /** 27 | * Web Animations `@angular/platform-browser/animations` 28 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. 29 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). 30 | */ 31 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 32 | 33 | /** 34 | * By default, zone.js will patch all possible macroTask and DomEvents 35 | * user can disable parts of macroTask/DomEvents patch by setting following flags 36 | * because those flags need to be set before `zone.js` being loaded, and webpack 37 | * will put import in the top of bundle, so user need to create a separate file 38 | * in this directory (for example: zone-flags.ts), and put the following flags 39 | * into that file, and then add the following code before importing zone.js. 40 | * import './zone-flags'; 41 | * 42 | * The flags allowed in zone-flags.ts are listed here. 43 | * 44 | * The following flags will work for all browsers. 45 | * 46 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 47 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 48 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 49 | * 50 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 51 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 52 | * 53 | * (window as any).__Zone_enable_cross_context_check = true; 54 | * 55 | */ 56 | 57 | /*************************************************************************************************** 58 | * Zone JS is required by default for Angular itself. 59 | */ 60 | import 'zone.js'; // Included with Angular CLI. 61 | 62 | 63 | /*************************************************************************************************** 64 | * APPLICATION IMPORTS 65 | */ 66 | -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/angular/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | @import url(./assets/css/bootstrap.min.css); 3 | @import url(./assets/css/animate.css); 4 | @import url(./assets/css/spinners.css); 5 | @import url(./assets/css/style.css); -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/angular/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: { 11 | context(path: string, deep?: boolean, filter?: RegExp): { 12 | keys(): string[]; 13 | (id: string): T; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting() 21 | ); 22 | // Then we find all the tests. 23 | const context = require.context('./', true, /\.spec\.ts$/); 24 | // And load the modules. 25 | context.keys().map(context); 26 | -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/angular/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts", 10 | "src/polyfills.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "allowJs": true, 6 | "baseUrl": "./", 7 | "outDir": "./dist/out-tsc", 8 | "forceConsistentCasingInFileNames": true, 9 | "strict": true, 10 | "noImplicitReturns": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "sourceMap": true, 13 | "declaration": false, 14 | "downlevelIteration": true, 15 | "experimentalDecorators": true, 16 | "moduleResolution": "node", 17 | "importHelpers": true, 18 | "target": "es2017", 19 | "module": "es2020", 20 | "lib": [ 21 | "es2018", 22 | "dom" 23 | ] 24 | }, 25 | "angularCompilerOptions": { 26 | "enableI18nLegacyMessageIdFormat": false, 27 | "strictInjectionParameters": true, 28 | "strictInputAccessModifiers": true, 29 | "strictTemplates": true 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/angular/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/dist/assets/js/jquery.i18n.properties.min.js: -------------------------------------------------------------------------------- 1 | (function(h){function v(a){a.debug&&(f("callbackIfComplete()"),f("totalFiles: "+a.totalFiles),f("filesLoaded: "+a.filesLoaded));a.async&&a.filesLoaded===a.totalFiles&&a.callback&&a.callback()}function n(a,c){c.debug&&f("loadAndParseFiles");null!==a&&0c.length)a.debug&&f("No language supplied. Pulling it from the browser ..."),c=navigator.languages&&0=b.outerHeight()?k=!0:(c.stop(!0, 11 | !0).fadeIn("fast"),a.railVisible&&m.stop(!0,!0).fadeIn("fast"))}function p(){a.alwaysVisible||(B=setTimeout(function(){a.disableFadeOut&&r||y||z||(c.fadeOut("slow"),m.fadeOut("slow"))},1E3))}var r,y,z,B,A,u,l,C,k=!1,b=e(this);if(b.parent().hasClass(a.wrapperClass)){var q=b.scrollTop(),c=b.siblings("."+a.barClass),m=b.siblings("."+a.railClass);x();if(e.isPlainObject(f)){if("height"in f&&"auto"==f.height){b.parent().css("height","auto");b.css("height","auto");var h=b.parent().parent().height();b.parent().css("height", 12 | h);b.css("height",h)}else"height"in f&&(h=f.height,b.parent().css("height",h),b.css("height",h));if("scrollTo"in f)q=parseInt(a.scrollTo);else if("scrollBy"in f)q+=parseInt(a.scrollBy);else if("destroy"in f){c.remove();m.remove();b.unwrap();return}n(q,!1,!0)}}else if(!(e.isPlainObject(f)&&"destroy"in f)){a.height="auto"==a.height?b.parent().height():a.height;q=e("
").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden", 13 | width:a.width,height:a.height});var m=e("
").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?"block":"none","border-radius":a.railBorderRadius,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=e("
").addClass(a.barClass).css({background:a.color,width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?"block":"none","border-radius":a.borderRadius,BorderRadius:a.borderRadius,MozBorderRadius:a.borderRadius, 14 | WebkitBorderRadius:a.borderRadius,zIndex:99}),h="right"==a.position?{right:a.distance}:{left:a.distance};m.css(h);c.css(h);b.wrap(q);b.parent().append(c);b.parent().append(m);a.railDraggable&&c.bind("mousedown",function(a){var b=e(document);z=!0;t=parseFloat(c.css("top"));pageY=a.pageY;b.bind("mousemove.slimscroll",function(a){currTop=t+a.pageY-pageY;c.css("top",currTop);n(0,c.position().top,!1)});b.bind("mouseup.slimscroll",function(a){z=!1;p();b.unbind(".slimscroll")});return!1}).bind("selectstart.slimscroll", 15 | function(a){a.stopPropagation();a.preventDefault();return!1});m.hover(function(){w()},function(){p()});c.hover(function(){y=!0},function(){y=!1});b.hover(function(){r=!0;w();p()},function(){r=!1;p()});b.bind("touchstart",function(a,b){a.originalEvent.touches.length&&(A=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){k||b.originalEvent.preventDefault();b.originalEvent.touches.length&&(n((A-b.originalEvent.touches[0].pageY)/a.touchScrollStep,!0),A=b.originalEvent.touches[0].pageY)}); 16 | x();"bottom"===a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),n(0,!0)):"top"!==a.start&&(n(e(a.start).position().top,null,!0),a.alwaysVisible||c.hide());window.addEventListener?(this.addEventListener("DOMMouseScroll",v,!1),this.addEventListener("mousewheel",v,!1)):document.attachEvent("onmousewheel",v)}});return this}});e.fn.extend({slimscroll:e.fn.slimScroll})})(jQuery); -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/dist/assets/js/metisMenu.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * metismenu https://github.com/onokumus/metismenu#readme 3 | * A jQuery menu plugin 4 | * @version 3.0.6 5 | * @author Osman Nuri Okumus (https://github.com/onokumus) 6 | * @license: MIT 7 | */ 8 | !function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("jquery")):"function"==typeof define&&define.amd?define(["jquery"],n):(e=e||self).metisMenu=n(e.jQuery)}(this,function(o){"use strict";function a(){return(a=Object.assign||function(e){for(var n=1;n{ 2 | const result:any = function () { 3 | var u = navigator.userAgent, app = navigator.appVersion; 4 | return { 5 | // ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), 6 | ios: u.indexOf('iPhone') > -1 || u.indexOf('iPad') > -1, 7 | android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 8 | }; 9 | }() 10 | 11 | for (let brow in result) { 12 | if (result[brow]) return brow 13 | } 14 | return 'web' 15 | } 16 | 17 | export default getBrow -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/dist/assets/translate/en.properties: -------------------------------------------------------------------------------- 1 | Quickstart = Quick Start 2 | Scenes = Scenes 3 | CommonFeatures = Common Features 4 | AdvancedStreaming = Advanced Streaming 5 | AdvancedVideoProcessing = Advanced Video Processing 6 | AdvancedAudioProcessing = Advanced Audio Processing 7 | Others = Others 8 | CommonUsage = Common Usage 9 | Publishing = Publishing 10 | Playing = Playing 11 | VideoForMultipleUsers = Video For Multiple Users 12 | CommonVideoConfig = Common Video Config 13 | VideoRotation = Video Rotation 14 | RoomMessage = Room Message 15 | StreamMonitoring = Stream Monitoring 16 | PublishingMultipleStreams = Publishing Multiple Streams 17 | StreamByCDN = Stream by CDN 18 | StreamByUrl = Play Stream by CDN 19 | CustomVideoCapture = Custom Video Capture 20 | EarReturnAndChannelSettings = Ear Return and Channel Settings 21 | SoundLevelAndAudioSpectrum = SoundLevel 22 | AudioMixing = Audio Mixing 23 | CustomAudioCaptureAndRendering = Custom Capture 24 | CustomAudioProcessing = Custom Audio Processing 25 | StreamMixing = Stream Mixing 26 | MultipleRooms = Multiple Rooms 27 | SetVideoProperties = Set Video Codec Properties 28 | ScreenSharing = Screen Sharing 29 | TurnPublishingCDN = Turn Publishing CDN 30 | DualChannel = Dual Channel 31 | CheckSystemRequirements = Check System Requirements 32 | LowLatencyLive = Low-Latency Live 33 | DebugAndConfig = Debug & Config 34 | Log_Version_Debug = Log,Version,Debug 35 | AEC_ANS_AGC = AEC,ANS,AGC 36 | OpenTheConsole = Open the console to view the callback information 37 | TurnPublishingCDNInfo = Forwarding a stream from ZEGO cloud-based real-time streaming server to the designated CDN 38 | Preview = Preview 39 | PlayStream = Play Stream 40 | HeadphoneMonitor = HeadphoneMonitor 41 | StereoChannel = Stereo Channel 42 | SetChannel = Set Channel 43 | Mono = Mono 44 | DualChannel = Dual Channel 45 | Volume = Volume 46 | AEC = AEC 47 | AGC = AGC 48 | ANS = ANS 49 | StartSoundLevelMonitor = Start SoundLevel Monitor 50 | SoundLevelChange = SoundLevel Change 51 | CaptureResolution = Capture Resolution 52 | FPS = FPS 53 | Bitrate = Bitrate 54 | Screen = Screen 55 | Camera = Camera 56 | CameraSwitch = Camera Switch 57 | Mirror = Mirror 58 | Microphone = Microphone 59 | MicrophoneSwitch = Microphone Switch 60 | Video = Video 61 | Audio = Audio 62 | PublishStream = Publish Stream 63 | MixStream = Mix Stream 64 | PlayMixedStream = Play Mixed Stream 65 | BroadcastMessageReceived = BroadcastMessage Received 66 | SendBroadcastMessage = Send BroadcastMessage 67 | BarrageMessageReceived = BarrageMessage Received 68 | SendBarrageMessage = Send BarrageMessage 69 | CustomCommandReceived = CustomCommand Received 70 | SendCustomCommand = Send CustomCommand 71 | RoomExtraInfo = RoomExtraInfo 72 | SetRoomExtraInfo = Set RoomExtraInfo 73 | AddPublishCdnUrl = AddPublishCdnUrl 74 | PublishCDNURL = Publish CDN URL 75 | PlayStreamFromURL = Play Stream From URL 76 | PlayFirstStream = Play First Stream 77 | PlaySecondStream = Play Second Stream 78 | AudioSource = Audio Source 79 | MediaTrackReplacement = Media Track Replacement 80 | VideoTrackReplacement = Video Track Replacement 81 | AudioTrackReplacement = Audio Track Replacement 82 | MoreDocs = For more documents, click to ZEGO 83 | HelpDocs = Help document 84 | EarReturnTips = Please plug in the earphones before experiencing the ear return function 85 | MixStreamTips = Support mixed multi-channel flow, please consult technical support for the specific maximum number of mixed streams supported 86 | HelpSettingsPage = Click to edit 87 | HelpDocsVideoCodec = The web video encoding uses VP8 by default, and the experience is interoperable with other terminals. Please modify it to H.264 on the debugging and configuration page. -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/dist/assets/translate/en_en.properties: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zegoim/express-demo-web/b22b120bdb83cebc121bbf316499952220fb9e1f/src/Examples/Framework/Angular/dist/assets/translate/en_en.properties -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/dist/assets/translate/zh.properties: -------------------------------------------------------------------------------- 1 | Quickstart = 快速开始 2 | Scenes = 最佳实践 3 | CommonFeatures = 常用功能 4 | AdvancedStreaming = 推拉流进阶 5 | AdvancedVideoProcessing = 视频进阶功能 6 | AdvancedAudioProcessing = 音频进阶功能 7 | Others = 其他功能 8 | CommonUsage = 实现流程 9 | Publishing = 推流 10 | Playing = 拉流 11 | VideoForMultipleUsers = 多人视频通话 12 | CommonVideoConfig = 常用视频配置 13 | VideoRotation = 视频旋转 14 | RoomMessage = 房间实时消息 15 | StreamMonitoring = 推拉流信息监测 16 | PublishingMultipleStreams = 推多路流 17 | StreamByCDN = 通过CDN推流拉流 18 | StreamByUrl = 通过CDN拉流 19 | CustomVideoCapture = 自定义视频采集 20 | EarReturnAndChannelSettings = 耳返与声道设置 21 | SoundLevelAndAudioSpectrum = 音量变化 22 | AudioMixing = 混音 23 | CustomAudioCaptureAndRendering = 自定义音频采集 24 | CustomAudioProcessing = 自定义音频处理 25 | StreamMixing = 多路混流 26 | MultipleRooms = 登录多房间 27 | SetVideoProperties = 设置视频编码属性 28 | ScreenSharing = 屏幕共享 29 | TurnPublishingCDN = 转推CDN 30 | DualChannel = 双声道 31 | CheckSystemRequirements = 检查浏览器支持 32 | LowLatencyLive = 低延迟直播 33 | DebugAndConfig = 调试与配置 34 | Log_Version_Debug = 日志、版本号、调试信息 35 | AEC_ANS_AGC = 音频3A处理 36 | OpenTheConsole = 打开控制台查看回调信息 37 | TurnPublishingCDNInfo = 将音视频流从 Zego 实时音视频转推到 CDN 38 | Preview = 预览 39 | PlayStream = 拉流 40 | HeadphoneMonitor = 耳返 41 | StereoChannel = 双声道立体声 42 | SetChannel = 设置声道 43 | Mono = 单声道 44 | DualChannel = 双声道 45 | Volume = 音量 46 | AEC = 回声消除 47 | AGC = 自动增益 48 | ANS = 噪声抑制 49 | StartSoundLevelMonitor = 开启声浪监听 50 | SoundLevelChange = 声浪变化 51 | CaptureResolution = 采集分辨率 52 | FPS = 视频帧率 53 | Bitrate = 视频码率 54 | Screen = 屏幕 55 | Camera = 摄像头 56 | CameraSwitch = 切换摄像头 57 | Mirror = 镜像模式 58 | Microphone = 麦克风 59 | MicrophoneSwitch = 切换麦克风 60 | Video = 视频 61 | Audio = 音频 62 | PublishStream = 推流 63 | MixStream = 混流 64 | PlayMixedStream = 播放混合流 65 | BroadcastMessageReceived = 收到广播消息 66 | SendBroadcastMessage = 发送广播消息 67 | BarrageMessageReceived = 收到弹幕消息 68 | SendBarrageMessage = 发送弹幕消息 69 | CustomCommandReceived = 收到自定义命令 70 | SendCustomCommand = 发送自定义命令 71 | RoomExtraInfo = 房间附件消息 72 | SetRoomExtraInfo = 设置房间附加消息 73 | AddPublishCdnUrl = 添加推流到 CDN 的 URL 74 | PublishCDNURL = 推流 CDN URL 75 | PlayStreamFromURL = 从 URL 拉流 76 | PublishCameraStream = 推摄像头获取的流 77 | PublishScreenStream = 推屏幕共享获取的流 78 | PlayFirstStream = 拉第一条流 79 | PlaySecondStream = 拉第二条流 80 | AudioSource = 音频源 81 | MediaTrackReplacement = 音视频轨道替换 82 | VideoTrackReplacement = 视频轨道替换 83 | AudioTrackReplacement = 音频轨道替换 84 | MoreDocs = 更多文档，请跳转至即构 85 | HelpDocs = 帮助文档 86 | EarReturnTips = 请插入耳机后再体验耳返功能 87 | MixStreamTips = 支持混合多路流，具体支持的最大混流条数请咨询技术支持 88 | HelpSettingsPage = 点击修改 89 | HelpDocsVideoCodec = Web 端视频编码默认使用 VP8。如果需要体验和其他端互通或者转推 CDN 功能，请在调试与配置页面修改为 H.264。 -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/dist/assets/translate/zh_zh.properties: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zegoim/express-demo-web/b22b120bdb83cebc121bbf316499952220fb9e1f/src/Examples/Framework/Angular/dist/assets/translate/zh_zh.properties -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/dist/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zegoim/express-demo-web/b22b120bdb83cebc121bbf316499952220fb9e1f/src/Examples/Framework/Angular/dist/favicon.ico -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | ZegoExpressDemo 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/Examples/Framework/Angular/dist/runtime-es2017.f4b61b4c4d8dfd9ce2c4.js: -------------------------------------------------------------------------------- 1 | !function(){"use strict";var r,e={},n={};function t(r){var o=n[r];if(void 0!==o)return o.exports;var u=n[r]={exports:{}};return e[r].call(u.exports,u,u.exports,t),u.exports}t.m=e,r=[],t.O=function(e,n,o,u){if(!n){var f=1/0;for(a=0;a=u)&&Object.keys(t.O).every(function(r){return t.O[r](n[c])})?n.splice(c--,1):(i=!1,u0&&r[a-1][2]>u;a--)r[a]=r[a-1];r[a]=[n,o,u]},t.n=function(r){var e=r&&r.__esModule?function(){return r.default}:function(){return r};return t.d(e,{a:e}),e},t.d=function(r,e){for(var n in e)t.o(e,n)&&!t.o(r,n)&&Object.defineProperty(r,n,{enumerable:!0,get:e[n]})},t.o=function(r,e){return Object.prototype.hasOwnProperty.call(r,e)},function(){var r={666:0};t.O.j=function(e){return 0===r[e]};var e=function(e,n){var o,u,f=n[0],i=n[1],c=n[2],a=0;for(o in i)t.o(i,o)&&(t.m[o]=i[o]);if(c)var s=c(t);for(e&&e(n);a=u)&&Object.keys(t.O).every(function(r){return t.O[r](n[c])})?n.splice(c--,1):(i=!1,u0&&r[a-1][2]>u;a--)r[a]=r[a-1];r[a]=[n,o,u]},t.n=function(r){var e=r&&r.__esModule?function(){return r.default}:function(){return r};return t.d(e,{a:e}),e},t.d=function(r,e){for(var n in e)t.o(e,n)&&!t.o(r,n)&&Object.defineProperty(r,n,{enumerable:!0,get:e[n]})},t.o=function(r,e){return Object.prototype.hasOwnProperty.call(r,e)},function(){var r={666:0};t.O.j=function(e){return 0===r[e]};var e=function(e,n){var o,u,f=n[0],i=n[1],c=n[2],a=0;for(o in i)t.o(i,o)&&(t.m[o]=i[o]);if(c)var s=c(t);for(e&&e(n);avideo, 12 | #localVideo, 13 | #remoteVideo { 14 | width: 100%; 15 | height: 100%; 16 | } 17 | 18 | .preview-roomInfo { 19 | font-weight: 500; 20 | } 21 | 22 | #roomInfo-id { 23 | display: inline-block; 24 | font-weight: normal; 25 | } 26 | 27 | #roomInfo-state { 28 | display: inline-block; 29 | font-weight: normal; 30 | } 31 | 32 | 33 | .logger-wrapper { 34 | margin-top: 20px; 35 | width: 100%; 36 | height: 250px; 37 | background-color: #ccc; 38 | color: rgb(252, 250, 250); 39 | overflow: scroll; 40 | } 41 | 42 | .btn-wrapper { 43 | display: flex; 44 | width: 100%; 45 | background-color: rgb(252, 250, 250); 46 | border-radius: 10px; 47 | height: 30px; 48 | justify-content: center; 49 | align-items: center; 50 | } 51 | 52 | .action-step { 53 | margin: 10px 0; 54 | } 55 | 56 | .action-content { 57 | width: 100%; 58 | background-color: rgb(252, 250, 250); 59 | border-radius: 10px; 60 | padding: 10px; 61 | } 62 | 63 | .action-title { 64 | font-weight: 700px; 65 | color: black; 66 | } 67 | 68 | .action-info { 69 | font-size: 14px; 70 | } 71 | 72 | .cuBtn { 73 | display: block; 74 | padding: 0 12px; 75 | font-size: 13px; 76 | cursor: pointer; 77 | height: 30px; 78 | width: 95%; 79 | } 80 | 81 | .action-room { 82 | padding-bottom: 15px; 83 | } 84 | 85 | .action-room>div+div { 86 | margin-top: 4px; 87 | } 88 | 89 | .icon-question { 90 | display: inline-block; 91 | text-align: center; 92 | line-height: 16px; 93 | width: 16px; 94 | height: 16px; 95 | border-radius: 50%; 96 | background-color: #0575ff; 97 | color: #fff; 98 | cursor: pointer; 99 | font-weight: bold; 100 | } 101 | 102 | /* Tooltip text */ 103 | .icon-question .pop-box { 104 | visibility: hidden; 105 | width: 120px; 106 | background-color: #fff; 107 | box-shadow: 0 0 10px #dfdfdf; 108 | color: #000; 109 | text-align: center; 110 | border-radius: 6px; 111 | padding: 4px; 112 | /* Position the tooltip text - see examples below! */ 113 | position: absolute; 114 | z-index: 1; 115 | font-weight: 100; 116 | font-size: 12px; 117 | } 118 | 119 | /* Show the tooltip text when you mouse over the tooltip container */ 120 | .icon-question:hover .pop-box { 121 | visibility: visible; 122 | } 123 | 124 | .f-b-3 { 125 | flex-basis: 30%; 126 | } 127 | 128 | .f-b-7 { 129 | flex-basis: 70% !important; 130 | } 131 | 132 | input { 133 | width: 40%; 134 | height: 21px; 135 | border: 1px solid #ced4da; 136 | border-radius: .25rem; 137 | color: #495057; 138 | } 139 | 140 | .w-70 { 141 | width: 70%; 142 | } 143 | 144 | .publish-setting { 145 | display: flex; 146 | /* justify-content: space-between; */ 147 | align-items: center; 148 | } 149 | 150 | .publish-check { 151 | flex-basis: 50%; 152 | display: flex; 153 | justify-content: space-around; 154 | } 155 | 156 | .check-wrappre { 157 | text-align: center; 158 | display: flex; 159 | align-items: center; 160 | } 161 | 162 | .check-input { 163 | display: inline-block; 164 | width: auto !important; 165 | height: auto !important; 166 | } 167 | 168 | select { 169 | width: 45% !important; 170 | height: 21px !important; 171 | padding: 0 !important; 172 | font-size: 12px !important; 173 | } 174 | 175 | .select-wrapper { 176 | flex-basis: 30%; 177 | display: flex; 178 | align-items: center; 179 | white-space: nowrap; 180 | } 181 | 182 | option { 183 | height: 21px !important; 184 | font-size: 14px; 185 | } 186 | 187 | .mirror { 188 | transform: scale(-1, 1); 189 | } 190 | 191 | @media (max-width: 375px) { 192 | .preview-playInfo { 193 | margin-top: 0 !important; 194 | } 195 | } -------------------------------------------------------------------------------- /src/Examples/Framework/React/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | React Sample 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 |
21 | 22 |
23 | 24 | 25 |
26 |
27 | 28 |
29 |
    30 |
  • 31 | Web 端视频编码默认使用 VP8。如果需要体验和其他端互通或者转推 CDN 功能，请在调试与配置页面修改为 H.264。 32 |   33 | 34 | 点击修改 35 |
    • 36 |
  • 37 | 更多文档，请跳转至即构   38 | 帮助文档 39 |
    • 40 |
41 |
42 | 43 |
44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /src/Examples/Framework/Vue/index.css: -------------------------------------------------------------------------------- 1 | .pushlishInfo-title { 2 | font-weight: 500; 3 | } 4 | 5 | .preview-content { 6 | width: auto; 7 | height: 200px; 8 | border: 1px solid #ccc; 9 | } 10 | 11 | .preview-content>video, 12 | #localVideo, 13 | #remoteVideo { 14 | width: 100%; 15 | height: 100%; 16 | } 17 | 18 | .preview-roomInfo { 19 | font-weight: 500; 20 | } 21 | 22 | #roomInfo-id { 23 | display: inline-block; 24 | font-weight: normal; 25 | } 26 | 27 | #roomInfo-state { 28 | display: inline-block; 29 | font-weight: normal; 30 | } 31 | 32 | 33 | .logger-wrapper { 34 | margin-top: 20px; 35 | width: 100%; 36 | height: 250px; 37 | background-color: #ccc; 38 | color: rgb(252, 250, 250); 39 | overflow: scroll; 40 | } 41 | 42 | .btn-wrapper { 43 | display: flex; 44 | width: 100%; 45 | background-color: rgb(252, 250, 250); 46 | border-radius: 10px; 47 | height: 30px; 48 | justify-content: center; 49 | align-items: center; 50 | } 51 | 52 | .action-step { 53 | margin: 10px 0; 54 | } 55 | 56 | .action-content { 57 | width: 100%; 58 | background-color: rgb(252, 250, 250); 59 | border-radius: 10px; 60 | padding: 10px; 61 | } 62 | 63 | .action-title { 64 | font-weight: 700px; 65 | color: black; 66 | } 67 | 68 | .action-info { 69 | font-size: 14px; 70 | } 71 | 72 | .cuBtn { 73 | display: block; 74 | padding: 0 12px; 75 | font-size: 13px; 76 | cursor: pointer; 77 | height: 30px; 78 | width: 95%; 79 | } 80 | 81 | .action-room { 82 | padding-bottom: 15px; 83 | } 84 | 85 | .action-room>div+div { 86 | margin-top: 4px; 87 | } 88 | 89 | .icon-question { 90 | display: inline-block; 91 | text-align: center; 92 | line-height: 16px; 93 | width: 16px; 94 | height: 16px; 95 | border-radius: 50%; 96 | background-color: #0575ff; 97 | color: #fff; 98 | cursor: pointer; 99 | font-weight: bold; 100 | } 101 | 102 | /* Tooltip text */ 103 | .icon-question .pop-box { 104 | visibility: hidden; 105 | width: 120px; 106 | background-color: #fff; 107 | box-shadow: 0 0 10px #dfdfdf; 108 | color: #000; 109 | text-align: center; 110 | border-radius: 6px; 111 | padding: 4px; 112 | /* Position the tooltip text - see examples below! */ 113 | position: absolute; 114 | z-index: 1; 115 | font-weight: 100; 116 | font-size: 12px; 117 | } 118 | 119 | /* Show the tooltip text when you mouse over the tooltip container */ 120 | .icon-question:hover .pop-box { 121 | visibility: visible; 122 | } 123 | 124 | .f-b-3 { 125 | flex-basis: 30%; 126 | } 127 | 128 | .f-b-7 { 129 | flex-basis: 70% !important; 130 | } 131 | 132 | input { 133 | width: 40%; 134 | height: 21px; 135 | border: 1px solid #ced4da; 136 | border-radius: .25rem; 137 | color: #495057; 138 | } 139 | 140 | .w-70 { 141 | width: 70%; 142 | } 143 | 144 | .publish-setting { 145 | display: flex; 146 | /* justify-content: space-between; */ 147 | align-items: center; 148 | } 149 | 150 | .publish-check { 151 | flex-basis: 50%; 152 | display: flex; 153 | justify-content: space-around; 154 | } 155 | 156 | .check-wrappre { 157 | text-align: center; 158 | display: flex; 159 | align-items: center; 160 | } 161 | 162 | .check-input { 163 | display: inline-block; 164 | width: auto !important; 165 | height: auto !important; 166 | } 167 | 168 | select { 169 | width: 45% !important; 170 | height: 21px !important; 171 | padding: 0 !important; 172 | font-size: 12px !important; 173 | } 174 | 175 | .select-wrapper { 176 | flex-basis: 30%; 177 | display: flex; 178 | align-items: center; 179 | white-space: nowrap; 180 | } 181 | 182 | option { 183 | height: 21px !important; 184 | font-size: 14px; 185 | } 186 | 187 | .mirror { 188 | transform: scale(-1, 1); 189 | } 190 | 191 | @media (max-width: 375px) { 192 | .preview-playInfo { 193 | margin-top: 0 !important; 194 | } 195 | } -------------------------------------------------------------------------------- /src/Examples/Others/DeviceDetection/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | word-break: break-all; 3 | } 4 | /* 房间状态样式 */ 5 | .preview-roomInfo { 6 | font-weight: 500; 7 | } 8 | #roomInfo-id { 9 | display: inline-block; 10 | font-weight: normal; 11 | } 12 | 13 | #roomInfo-state { 14 | display: inline-block; 15 | font-weight: normal; 16 | } 17 | 18 | /* 步骤样式 */ 19 | .action-step { 20 | margin: 10px 0; 21 | } 22 | 23 | .action-content { 24 | width: 100%; 25 | background-color: rgb(252, 250, 250); 26 | border-radius: 10px; 27 | padding: 10px; 28 | } 29 | 30 | .action-title { 31 | font-weight: 700px; 32 | color: black; 33 | } 34 | 35 | .action-info { 36 | font-size: 14px; 37 | } 38 | 39 | .action-form { 40 | display: flex; 41 | flex-direction: column; 42 | } 43 | 44 | .action-form .user-item { 45 | display: flex; 46 | justify-content: space-between; 47 | } 48 | 49 | .action-form .user-item + .user-item { 50 | margin-top: 5px; 51 | } 52 | .user-item .user-name { 53 | margin-right: 5px; 54 | } 55 | 56 | .play-pause-button { 57 | margin-top: 15px; 58 | } 59 | .button.play-pause-button { 60 | margin: 0; 61 | width: 100px; 62 | height: 24px; 63 | line-height: 24px; 64 | display: inline-block; 65 | } 66 | 67 | .action-item input { 68 | flex: 2; 69 | } 70 | 71 | .action-item + .action-item { 72 | margin-top: 10px; 73 | } 74 | 75 | .action-subtitle { 76 | font-size: 14px; 77 | font-weight: bold; 78 | margin: 5px 0; 79 | } 80 | 81 | /* 控件样式 */ 82 | 83 | input { 84 | min-width: 80px; 85 | height: 21px; 86 | border: 1px solid #ced4da; 87 | border-radius: 0.25rem; 88 | color: #495057; 89 | } 90 | 91 | .publish-setting { 92 | display: flex; 93 | align-items: center; 94 | } 95 | 96 | .publish-check { 97 | flex-basis: 50%; 98 | display: flex; 99 | justify-content: space-around; 100 | } 101 | 102 | .check-wrapper { 103 | text-align: center; 104 | display: flex; 105 | align-items: center; 106 | } 107 | 108 | .check-input { 109 | display: inline-block; 110 | width: auto !important; 111 | height: auto !important; 112 | } 113 | 114 | select { 115 | width: 45% !important; 116 | height: 21px !important; 117 | padding: 0 !important; 118 | font-size: 12px !important; 119 | } 120 | 121 | .select-wrapper { 122 | flex-basis: 30%; 123 | display: flex; 124 | align-items: center; 125 | white-space: nowrap; 126 | } 127 | 128 | option { 129 | height: 21px !important; 130 | font-size: 14px; 131 | } 132 | 133 | /* 旋转盒子 */ 134 | .show_rotatebox { 135 | width: 100%; 136 | height: 250px; 137 | border: 1px solid #dfdfdf; 138 | transform-style: preserve-3d; 139 | transform: rotateX(180deg); 140 | perspective: 10000px; 141 | } 142 | 143 | .rotatebox { 144 | width: 140px; 145 | height: 140px; 146 | position: absolute; 147 | transform-style: preserve-3d; 148 | transition: transform 0.5s; 149 | left: 50%; 150 | top: 50%; 151 | } 152 | 153 | .rotatebox div { 154 | width: 140px; 155 | height: 140px; 156 | background-color: rgba(0, 255, 0, 0.9); 157 | position: absolute; 158 | text-align: center; 159 | line-height: 140px; 160 | font-size: 20px; 161 | font-weight: bold; 162 | } 163 | 164 | .rotatebox div:nth-of-type(1) { 165 | transform: translateZ(70px) rotateZ(180deg) rotateY(0deg); 166 | background-color: rgba(255, 152, 0, 0.9); 167 | } 168 | 169 | .rotatebox div:nth-of-type(2) { 170 | transform: translateZ(-70px) rotateZ(180deg) rotateY(180deg); 171 | background-color: rgba(255, 152, 0, 0.9); 172 | } 173 | 174 | .rotatebox div:nth-of-type(3) { 175 | transform: translateX(70px) rotateX(180deg) rotateY(90deg); 176 | background-color: rgba(0, 255, 255, 0.9); 177 | } 178 | 179 | .rotatebox div:nth-of-type(4) { 180 | transform: translateX(-70px) rotateX(180deg) rotateY(-90deg); 181 | background-color: rgba(0, 255, 255, 0.9); 182 | } 183 | 184 | .rotatebox div:nth-of-type(5) { 185 | transform: translateY(-70px) rotateX(90deg); 186 | background-color: rgba(255, 0, 0, 0.9); 187 | } 188 | 189 | .rotatebox div:nth-of-type(6) { 190 | transform: translateY(70px) rotateX(-90deg); 191 | background-color: rgba(255, 0, 0, 0.9); 192 | } 193 | 194 | .span-on { 195 | color: #009688; 196 | } 197 | .span-off { 198 | color: #ff5722; 199 | } 200 | 201 | .icon-question { 202 | display: inline-block; 203 | text-align: center; 204 | line-height: 16px; 205 | width: 16px; 206 | height: 16px; 207 | border-radius: 50%; 208 | background-color: #0575ff; 209 | color: #fff; 210 | cursor: pointer; 211 | font-weight: bold; 212 | } 213 | /* Tooltip text */ 214 | .icon-question .pop-box { 215 | visibility: hidden; 216 | width: 120px; 217 | background-color: #fff; 218 | box-shadow: 0 0 10px #dfdfdf; 219 | color: #000; 220 | text-align: center; 221 | border-radius: 6px; 222 | padding: 4px; 223 | /* Position the tooltip text - see examples below! */ 224 | position: absolute; 225 | z-index: 1; 226 | font-weight: 100; 227 | font-size: 12px; 228 | } 229 | /* Show the tooltip text when you mouse over the tooltip container */ 230 | .icon-question:hover .pop-box { 231 | visibility: visible; 232 | } 233 | 234 | @media (max-width: 375px) { 235 | .preview-playInfo { 236 | margin-top: 0 !important; 237 | } 238 | } 239 | 240 | /* 241 | 242 | .btn-wrapper { 243 | display: flex; 244 | width: 100%; 245 | background-color: rgb(252, 250, 250); 246 | border-radius: 10px; 247 | height: 30px; 248 | justify-content: center; 249 | align-items: center; 250 | } 251 | 252 | 253 | 254 | .cuBtn { 255 | display: block; 256 | padding: 0 12px; 257 | font-size: 13px; 258 | cursor: pointer; 259 | height: 30px; 260 | width: 95%; 261 | } 262 | 263 | 264 | */ 265 | -------------------------------------------------------------------------------- /src/Examples/Others/DeviceDetection/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Device Detection 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 |
21 | 22 |
23 |
24 |
25 | 26 |
27 |
28 | 设备检测 29 |
30 |
31 |
32 | 设备列表 33 |
34 |
35 | 36 |
37 |
38 | 麦克风 39 | NO FOUND 40 | 41 | 42 | 45 | 46 |
47 |
48 | 摄像头 49 | NO FOUND 50 | 51 | 52 | 53 | 56 |
57 |
58 | 扬声器 59 | NO FOUND 60 | 61 | 62 | 65 |
66 |
67 | 70 |
71 |
72 |
73 |
74 | 检测结果 75 |
76 |
77 |
78 | 对着麦克风说话，检查音浪进度条是否波动 79 |
80 | 81 |
82 |
83 | 检测摄像头画面是否正常 84 |
85 |
86 |
87 |
88 | 在系统设置中调大对应扬声器音量，检查对应扬声器是否正常播放歌曲 89 |
90 | 92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | -------------------------------------------------------------------------------- /src/Examples/Others/EffectsBeauty/index.css: -------------------------------------------------------------------------------- 1 | .pushlishInfo-title { 2 | font-weight: 500; 3 | } 4 | 5 | .preview-content { 6 | position: relative; 7 | width: auto; 8 | height: 250px; 9 | border: 1px solid #ccc; 10 | } 11 | 12 | .preview-content>video, 13 | #localVideo, 14 | #remoteVideo { 15 | width: 100%; 16 | height: 70%; 17 | } 18 | 19 | .preview-action { 20 | position: absolute; 21 | width: 100%; 22 | height: 0%; 23 | background-color: rgba(0, 0, 0, .1); 24 | z-index: 1; 25 | } 26 | 27 | .preview-info { 28 | opacity: 1; 29 | color: #000; 30 | font-size: 8px; 31 | font-weight: 400; 32 | line-height: 1; 33 | } 34 | 35 | .preview-video-action { 36 | position: absolute; 37 | display: flex; 38 | justify-content: center; 39 | flex-wrap: wrap; 40 | left: 0; 41 | bottom: 0; 42 | width: 100%; 43 | height: 30%; 44 | color: #fff; 45 | /* font-weight: 400; */ 46 | font-size: 10px; 47 | /* height: 100%; */ 48 | background-color: rgba(0, 0, 0, .5); 49 | } 50 | 51 | .col-6 { 52 | padding-left: 5px; 53 | padding-right: 5px; 54 | } 55 | 56 | .preview-roomInfo { 57 | font-weight: 500; 58 | } 59 | 60 | #roomInfo-id { 61 | display: inline-block; 62 | font-weight: normal; 63 | } 64 | 65 | #roomInfo-state { 66 | display: inline-block; 67 | font-weight: normal; 68 | } 69 | 70 | 71 | .logger-wrapper { 72 | margin-top: 20px; 73 | width: 100%; 74 | height: 250px; 75 | background-color: #ccc; 76 | color: rgb(252, 250, 250); 77 | overflow: scroll; 78 | } 79 | 80 | .btn-wrapper { 81 | display: flex; 82 | width: 100%; 83 | background-color: rgb(252, 250, 250); 84 | border-radius: 10px; 85 | height: 30px; 86 | justify-content: center; 87 | align-items: center; 88 | } 89 | 90 | .action-step { 91 | margin: 10px 0; 92 | } 93 | 94 | .action-content { 95 | width: 100%; 96 | background-color: rgb(252, 250, 250); 97 | border-radius: 10px; 98 | padding: 10px; 99 | min-height: 250px; 100 | } 101 | 102 | .action-title { 103 | font-weight: 700px; 104 | color: black; 105 | } 106 | 107 | .action-info { 108 | font-size: 14px; 109 | } 110 | 111 | .cuBtn { 112 | display: block; 113 | padding: 0 12px; 114 | font-size: 13px; 115 | cursor: pointer; 116 | height: 30px; 117 | width: 95%; 118 | } 119 | 120 | 121 | .form-wrap { 122 | margin: 6px 0; 123 | } 124 | 125 | .form-wrap .form-item { 126 | display: flex; 127 | } 128 | 129 | .form-wrap .form-item input { 130 | flex: 1; 131 | } 132 | 133 | .login-wrapper { 134 | padding: 15px; 135 | background-color: #fff; 136 | } 137 | 138 | .login-desc { 139 | font-size: 14px; 140 | } 141 | 142 | .icon-question { 143 | display: inline-block; 144 | text-align: center; 145 | line-height: 16px; 146 | width: 16px; 147 | height: 16px; 148 | border-radius: 50%; 149 | background-color: #0575ff; 150 | color: #fff; 151 | cursor: pointer; 152 | font-weight: bold; 153 | } 154 | 155 | /* Tooltip text */ 156 | .icon-question .pop-box { 157 | visibility: hidden; 158 | width: 120px; 159 | background-color: #fff; 160 | box-shadow: 0 0 10px #dfdfdf; 161 | color: #000; 162 | text-align: center; 163 | border-radius: 6px; 164 | padding: 4px; 165 | /* Position the tooltip text - see examples below! */ 166 | position: absolute; 167 | z-index: 3; 168 | font-weight: 100; 169 | font-size: 12px; 170 | } 171 | 172 | /* Show the tooltip text when you mouse over the tooltip container */ 173 | .icon-question:hover .pop-box { 174 | visibility: visible; 175 | } 176 | 177 | .f-b-5 { 178 | flex-basis: 50%; 179 | } 180 | 181 | .f-b-3 { 182 | flex-basis: 33.3%; 183 | } 184 | 185 | .t-a-r { 186 | text-align: right; 187 | } 188 | 189 | .drop-item { 190 | display: flex; 191 | align-items: center; 192 | font-size: 12px; 193 | padding: 5px 5px; 194 | } 195 | 196 | .t-nowrap { 197 | overflow: hidden; 198 | text-overflow: ellipsis; 199 | white-space: nowrap; 200 | } 201 | 202 | 203 | 204 | 205 | .videoQuality { 206 | display: flex; 207 | align-items: center; 208 | justify-content: space-between; 209 | flex-wrap: wrap; 210 | padding-bottom: 15px; 211 | } 212 | 213 | input { 214 | width: 40%; 215 | height: 21px; 216 | border: 1px solid #ced4da; 217 | border-radius: .25rem; 218 | color: #495057; 219 | } 220 | 221 | .publish-setting { 222 | display: flex; 223 | /* justify-content: space-between; */ 224 | align-items: center; 225 | } 226 | 227 | .publish-check { 228 | /* flex-basis: 50%; */ 229 | display: flex; 230 | justify-content: space-around; 231 | } 232 | 233 | .check-wrappre { 234 | /* flex-basis: 50%; */ 235 | text-align: center; 236 | display: flex; 237 | align-items: center; 238 | } 239 | 240 | .check-input { 241 | display: inline-block; 242 | width: auto !important; 243 | height: auto !important; 244 | } 245 | 246 | select { 247 | width: 45% !important; 248 | height: 21px !important; 249 | min-height: 10px !important; 250 | padding: 0 !important; 251 | font-size: 12px !important; 252 | } 253 | 254 | .select-wrapper { 255 | flex-basis: 50%; 256 | display: flex; 257 | align-items: center; 258 | white-space: nowrap; 259 | } 260 | 261 | option { 262 | height: 21px !important; 263 | font-size: 14px; 264 | } 265 | 266 | .flex-c { 267 | margin: 5px 0; 268 | display: flex; 269 | align-items: center; 270 | } 271 | 272 | .configBtn { 273 | width: 50%; 274 | } 275 | 276 | @media (max-width: 375px) { 277 | .configBtn { 278 | width: 90%; 279 | } 280 | } -------------------------------------------------------------------------------- /src/Examples/Others/NetworkDetection/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | word-break: break-all; 3 | } 4 | /* 房间状态样式 */ 5 | .preview-roomInfo { 6 | font-weight: 500; 7 | } 8 | #roomInfo-id { 9 | display: inline-block; 10 | font-weight: normal; 11 | } 12 | 13 | #roomInfo-state { 14 | display: inline-block; 15 | font-weight: normal; 16 | } 17 | 18 | /* 步骤样式 */ 19 | .action-step { 20 | margin: 10px 0; 21 | } 22 | 23 | .action-content { 24 | width: 100%; 25 | background-color: rgb(252, 250, 250); 26 | border-radius: 10px; 27 | padding: 10px; 28 | } 29 | 30 | .action-title { 31 | font-weight: 700px; 32 | color: black; 33 | } 34 | 35 | .action-info { 36 | font-size: 14px; 37 | } 38 | 39 | .action-form { 40 | display: flex; 41 | flex-direction: column; 42 | } 43 | 44 | .action-form .user-item { 45 | display: flex; 46 | justify-content: space-between; 47 | } 48 | 49 | .action-form .user-item + .user-item { 50 | margin-top: 5px; 51 | } 52 | .user-item .user-name { 53 | margin-right: 5px; 54 | } 55 | 56 | .button.play-pause-button { 57 | margin: 0; 58 | width: 100px; 59 | height: 24px; 60 | line-height: 24px; 61 | display: inline-block; 62 | } 63 | 64 | .action-item input { 65 | flex: 2; 66 | } 67 | 68 | .action-item + .action-item { 69 | margin-top: 10px; 70 | } 71 | 72 | .action-subtitle { 73 | font-size: 14px; 74 | font-weight: bold; 75 | margin: 5px 0; 76 | } 77 | 78 | /* 控件样式 */ 79 | 80 | input { 81 | min-width: 80px; 82 | height: 21px; 83 | border: 1px solid #ced4da; 84 | border-radius: 0.25rem; 85 | color: #495057; 86 | } 87 | 88 | .publish-setting { 89 | display: flex; 90 | align-items: center; 91 | } 92 | 93 | .publish-check { 94 | flex-basis: 50%; 95 | display: flex; 96 | justify-content: space-around; 97 | } 98 | 99 | .check-wrapper { 100 | text-align: center; 101 | display: flex; 102 | align-items: center; 103 | } 104 | 105 | .check-input { 106 | display: inline-block; 107 | width: auto !important; 108 | height: auto !important; 109 | } 110 | 111 | select { 112 | width: 45% !important; 113 | height: 21px !important; 114 | padding: 0 !important; 115 | font-size: 12px !important; 116 | } 117 | 118 | .select-wrapper { 119 | flex-basis: 30%; 120 | display: flex; 121 | align-items: center; 122 | white-space: nowrap; 123 | } 124 | 125 | option { 126 | height: 21px !important; 127 | font-size: 14px; 128 | } 129 | 130 | /* 登录界面 */ 131 | .login-wrapper { 132 | padding: 15px; 133 | background-color: #fff; 134 | } 135 | .login-desc { 136 | font-size: 14px; 137 | } 138 | .icon-question { 139 | display: inline-block; 140 | text-align: center; 141 | line-height: 16px; 142 | width: 16px; 143 | height: 16px; 144 | border-radius: 50%; 145 | background-color: #0575ff; 146 | color: #fff; 147 | cursor: pointer; 148 | font-weight: bold; 149 | } 150 | /* Tooltip text */ 151 | .icon-question .pop-box { 152 | visibility: hidden; 153 | width: 120px; 154 | background-color: #fff; 155 | box-shadow: 0 0 10px #dfdfdf; 156 | color: #000; 157 | text-align: center; 158 | border-radius: 6px; 159 | padding: 4px; 160 | /* Position the tooltip text - see examples below! */ 161 | position: absolute; 162 | z-index: 3; 163 | font-weight: 100; 164 | font-size: 12px; 165 | } 166 | /* Show the tooltip text when you mouse over the tooltip container */ 167 | .icon-question:hover .pop-box { 168 | visibility: visible; 169 | } 170 | 171 | /* detection result */ 172 | .detection-wrapper { 173 | margin-top: 20px; 174 | padding: 15px; 175 | background-color: #fff; 176 | } 177 | 178 | .net-item .item-value { 179 | color: #edc04d; 180 | } -------------------------------------------------------------------------------- /src/Examples/Others/NetworkDetection/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Network Detection 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 |
21 | 22 |
23 |
24 |
25 |
26 |
27 | 64 |
65 |
66 |
67 |
前置条件
68 |
69 | 上行网络质量： 70 | unknown 71 |
72 |
73 | 下行网络质量： 74 | unknown 75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /src/Examples/Others/RangeAudio/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | word-break: break-all; 3 | } 4 | /* 房间状态样式 */ 5 | .preview-roomInfo { 6 | font-weight: 500; 7 | } 8 | #roomInfo-id { 9 | display: inline-block; 10 | font-weight: normal; 11 | } 12 | 13 | #roomInfo-state { 14 | display: inline-block; 15 | font-weight: normal; 16 | } 17 | 18 | /* 步骤样式 */ 19 | .action-step { 20 | margin: 10px 0; 21 | } 22 | 23 | .action-content { 24 | width: 100%; 25 | background-color: rgb(252, 250, 250); 26 | border-radius: 10px; 27 | padding: 10px; 28 | } 29 | 30 | .action-title { 31 | font-weight: 700px; 32 | color: black; 33 | } 34 | 35 | .action-info { 36 | font-size: 14px; 37 | } 38 | 39 | .action-form { 40 | display: flex; 41 | flex-direction: column; 42 | } 43 | 44 | .action-form .user-item { 45 | display: flex; 46 | justify-content: space-between; 47 | } 48 | 49 | .action-form .user-item + .user-item { 50 | margin-top: 5px; 51 | } 52 | .user-item .user-name { 53 | margin-right: 5px; 54 | } 55 | 56 | .play-pause-button { 57 | margin-top: 15px; 58 | } 59 | .enable-button.play-pause-button { 60 | margin: 0; 61 | width: 100px; 62 | height: 24; 63 | } 64 | 65 | .action-item input { 66 | flex: 2; 67 | } 68 | 69 | .action-item + .action-item { 70 | margin-top: 10px; 71 | } 72 | 73 | .action-subtitle { 74 | font-size: 14px; 75 | font-weight: bold; 76 | margin: 5px 0; 77 | } 78 | 79 | /* 控件样式 */ 80 | 81 | input { 82 | min-width: 80px; 83 | height: 21px; 84 | border: 1px solid #ced4da; 85 | border-radius: 0.25rem; 86 | color: #495057; 87 | } 88 | 89 | .publish-setting { 90 | display: flex; 91 | align-items: center; 92 | } 93 | 94 | .publish-check { 95 | flex-basis: 50%; 96 | display: flex; 97 | justify-content: space-around; 98 | } 99 | 100 | .check-wrapper { 101 | text-align: center; 102 | display: flex; 103 | align-items: center; 104 | } 105 | 106 | .check-input { 107 | display: inline-block; 108 | width: auto !important; 109 | height: auto !important; 110 | } 111 | 112 | select { 113 | width: 45% !important; 114 | height: 21px !important; 115 | padding: 0 !important; 116 | font-size: 12px !important; 117 | } 118 | 119 | .select-wrapper { 120 | flex-basis: 30%; 121 | display: flex; 122 | align-items: center; 123 | white-space: nowrap; 124 | } 125 | 126 | option { 127 | height: 21px !important; 128 | font-size: 14px; 129 | } 130 | 131 | /* 旋转盒子 */ 132 | .show_rotatebox { 133 | width: 100%; 134 | height: 250px; 135 | border: 1px solid #dfdfdf; 136 | transform-style: preserve-3d; 137 | transform: rotateX(180deg); 138 | perspective: 10000px; 139 | } 140 | 141 | .rotatebox { 142 | width: 140px; 143 | height: 140px; 144 | position: absolute; 145 | transform-style: preserve-3d; 146 | transition: transform 0.5s; 147 | left: 50%; 148 | top: 50%; 149 | } 150 | 151 | .rotatebox div { 152 | width: 140px; 153 | height: 140px; 154 | background-color: rgba(0, 255, 0, 0.9); 155 | position: absolute; 156 | text-align: center; 157 | line-height: 140px; 158 | font-size: 20px; 159 | font-weight: bold; 160 | } 161 | 162 | .rotatebox div:nth-of-type(1) { 163 | transform: translateZ(70px) rotateZ(180deg) rotateY(0deg); 164 | background-color: rgba(255, 152, 0, 0.9); 165 | } 166 | 167 | .rotatebox div:nth-of-type(2) { 168 | transform: translateZ(-70px) rotateZ(180deg) rotateY(180deg); 169 | background-color: rgba(255, 152, 0, 0.9); 170 | } 171 | 172 | .rotatebox div:nth-of-type(3) { 173 | transform: translateX(70px) rotateX(180deg) rotateY(90deg); 174 | background-color: rgba(0, 255, 255, 0.9); 175 | } 176 | 177 | .rotatebox div:nth-of-type(4) { 178 | transform: translateX(-70px) rotateX(180deg) rotateY(-90deg); 179 | background-color: rgba(0, 255, 255, 0.9); 180 | } 181 | 182 | .rotatebox div:nth-of-type(5) { 183 | transform: translateY(-70px) rotateX(90deg); 184 | background-color: rgba(255, 0, 0, 0.9); 185 | } 186 | 187 | .rotatebox div:nth-of-type(6) { 188 | transform: translateY(70px) rotateX(-90deg); 189 | background-color: rgba(255, 0, 0, 0.9); 190 | } 191 | 192 | .span-on { 193 | color: #009688; 194 | } 195 | .span-off { 196 | color: #ff5722; 197 | } 198 | 199 | .icon-question { 200 | display: inline-block; 201 | text-align: center; 202 | line-height: 16px; 203 | width: 16px; 204 | height: 16px; 205 | border-radius: 50%; 206 | background-color: #0575ff; 207 | color: #fff; 208 | cursor: pointer; 209 | font-weight: bold; 210 | } 211 | /* Tooltip text */ 212 | .icon-question .pop-box { 213 | visibility: hidden; 214 | width: 120px; 215 | background-color: #fff; 216 | box-shadow: 0 0 10px #dfdfdf; 217 | color: #000; 218 | text-align: center; 219 | border-radius: 6px; 220 | padding: 4px; 221 | /* Position the tooltip text - see examples below! */ 222 | position: absolute; 223 | z-index: 1; 224 | font-weight: 100; 225 | font-size: 12px; 226 | } 227 | /* Show the tooltip text when you mouse over the tooltip container */ 228 | .icon-question:hover .pop-box { 229 | visibility: visible; 230 | } 231 | 232 | @media (max-width: 375px) { 233 | .preview-playInfo { 234 | margin-top: 0 !important; 235 | } 236 | } 237 | 238 | /* 239 | 240 | .btn-wrapper { 241 | display: flex; 242 | width: 100%; 243 | background-color: rgb(252, 250, 250); 244 | border-radius: 10px; 245 | height: 30px; 246 | justify-content: center; 247 | align-items: center; 248 | } 249 | 250 | 251 | 252 | .cuBtn { 253 | display: block; 254 | padding: 0 12px; 255 | font-size: 13px; 256 | cursor: pointer; 257 | height: 30px; 258 | width: 95%; 259 | } 260 | 261 | 262 | */ 263 | -------------------------------------------------------------------------------- /src/Examples/Others/ScreenSharing/index.css: -------------------------------------------------------------------------------- 1 | .pushlishInfo-title { 2 | font-weight: 500; 3 | } 4 | 5 | .preview-content { 6 | position: relative; 7 | width: auto; 8 | height: 250px; 9 | border: 1px solid #ccc; 10 | } 11 | 12 | .preview-content > video { 13 | width: 100%; 14 | height: 70%; 15 | } 16 | 17 | .preview-action { 18 | position: absolute; 19 | width: 100%; 20 | height: 0%; 21 | background-color: rgba(0,0,0,.1); 22 | z-index: 1; 23 | } 24 | 25 | .preview-info { 26 | opacity: 1; 27 | color: #000; 28 | font-size: 8px; 29 | font-weight: 400; 30 | line-height: 1; 31 | } 32 | 33 | .preview-video-action { 34 | position: absolute; 35 | display: flex; 36 | justify-content: center; 37 | flex-wrap: wrap; 38 | left: 0; 39 | bottom: 0; 40 | width: 100%; 41 | height: 30%; 42 | color: #fff; 43 | /* font-weight: 400; */ 44 | font-size: 10px; 45 | /* height: 100%; */ 46 | background-color: rgba(0,0,0,.5); 47 | } 48 | 49 | .col-6 { 50 | padding-left: 5px; 51 | padding-right: 5px; 52 | } 53 | 54 | .preview-roomInfo { 55 | font-weight: 500; 56 | } 57 | 58 | #roomInfo-id { 59 | display: inline-block; 60 | font-weight: normal; 61 | } 62 | 63 | #roomInfo-state { 64 | display: inline-block; 65 | font-weight: normal; 66 | } 67 | 68 | 69 | .logger-wrapper { 70 | margin-top: 20px; 71 | width: 100%; 72 | height: 250px; 73 | background-color: #ccc; 74 | color: rgb(252, 250, 250); 75 | overflow: scroll; 76 | } 77 | 78 | .btn-wrapper { 79 | display: flex; 80 | width: 100%; 81 | background-color: rgb(252, 250, 250); 82 | border-radius: 10px; 83 | height: 30px; 84 | justify-content: center; 85 | align-items: center; 86 | } 87 | 88 | .action-step { 89 | margin: 10px 0; 90 | } 91 | 92 | .action-content { 93 | width: 100%; 94 | background-color: rgb(252, 250, 250); 95 | border-radius: 10px; 96 | padding: 10px; 97 | min-height: 250px; 98 | } 99 | 100 | .action-title { 101 | font-weight: 700px; 102 | color: black; 103 | } 104 | .action-info { 105 | font-size: 14px; 106 | } 107 | 108 | .cuBtn { 109 | display: block; 110 | padding: 0 12px; 111 | font-size: 13px; 112 | cursor: pointer; 113 | height: 30px; 114 | width: 95%; 115 | } 116 | 117 | 118 | .form-wrap { 119 | margin: 6px 0; 120 | } 121 | .form-wrap .form-item { 122 | display: flex; 123 | } 124 | .form-wrap .form-item input { 125 | flex: 1; 126 | } 127 | 128 | .login-wrapper { 129 | padding: 15px; 130 | background-color: #fff; 131 | } 132 | .login-desc { 133 | font-size: 14px; 134 | } 135 | .icon-question { 136 | display: inline-block; 137 | text-align: center; 138 | line-height: 16px; 139 | width: 16px; 140 | height: 16px; 141 | border-radius: 50%; 142 | background-color: #0575ff; 143 | color: #fff; 144 | cursor: pointer; 145 | font-weight: bold; 146 | } 147 | /* Tooltip text */ 148 | .icon-question .pop-box { 149 | visibility: hidden; 150 | width: 120px; 151 | background-color: #fff; 152 | box-shadow: 0 0 10px #dfdfdf; 153 | color: #000; 154 | text-align: center; 155 | border-radius: 6px; 156 | padding: 4px; 157 | /* Position the tooltip text - see examples below! */ 158 | position: absolute; 159 | z-index: 3; 160 | font-weight: 100; 161 | font-size: 12px; 162 | } 163 | /* Show the tooltip text when you mouse over the tooltip container */ 164 | .icon-question:hover .pop-box { 165 | visibility: visible; 166 | } 167 | .f-b-5 { 168 | flex-basis: 50%; 169 | } 170 | .f-b-3 { 171 | flex-basis: 33.3%; 172 | } 173 | .t-a-r { 174 | text-align: right; 175 | } 176 | .drop-item { 177 | display: flex; 178 | align-items: center; 179 | font-size: 12px; 180 | padding: 5px 5px; 181 | } 182 | .t-nowrap { 183 | overflow: hidden; 184 | text-overflow:ellipsis; 185 | white-space: nowrap; 186 | } 187 | 188 | 189 | 190 | 191 | .videoQuality { 192 | display: flex; 193 | align-items: center; 194 | justify-content: space-between; 195 | flex-wrap: wrap; 196 | padding-bottom: 15px; 197 | } 198 | 199 | input { 200 | width: 40% ; 201 | height: 21px ; 202 | border: 1px solid #ced4da; 203 | border-radius: .25rem; 204 | color: #495057; 205 | } 206 | 207 | .publish-setting { 208 | display: flex; 209 | /* justify-content: space-between; */ 210 | align-items: center; 211 | } 212 | 213 | .publish-check { 214 | /* flex-basis: 50%; */ 215 | display: flex; 216 | justify-content: space-around; 217 | } 218 | 219 | .check-wrappre { 220 | /* flex-basis: 50%; */ 221 | text-align: center; 222 | display: flex; 223 | align-items: center; 224 | } 225 | 226 | .check-input { 227 | display: inline-block; 228 | width: auto !important; 229 | height: auto !important; 230 | } 231 | 232 | select { 233 | width: 45% !important; 234 | height: 21px !important; 235 | min-height: 10px !important; 236 | padding: 0 !important; 237 | font-size: 12px !important; 238 | } 239 | 240 | .select-wrapper { 241 | flex-basis: 50%; 242 | display: flex; 243 | align-items: center; 244 | white-space: nowrap; 245 | } 246 | 247 | option { 248 | height: 21px !important; 249 | font-size: 14px; 250 | } 251 | 252 | .flex-c { 253 | margin: 5px 0; 254 | display: flex; 255 | align-items: center; 256 | } 257 | 258 | .configBtn { 259 | width: 50%; 260 | } 261 | 262 | @media (max-width: 375px) { 263 | .configBtn { 264 | width: 90%; 265 | } 266 | } 267 | -------------------------------------------------------------------------------- /src/Examples/Others/StreamCompositor/assets/web.data: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zegoim/express-demo-web/b22b120bdb83cebc121bbf316499952220fb9e1f/src/Examples/Others/StreamCompositor/assets/web.data -------------------------------------------------------------------------------- /src/Examples/Others/StreamCompositor/assets/zego-wasm-simd.wasm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zegoim/express-demo-web/b22b120bdb83cebc121bbf316499952220fb9e1f/src/Examples/Others/StreamCompositor/assets/zego-wasm-simd.wasm -------------------------------------------------------------------------------- /src/Examples/Others/StreamCompositor/assets/zego-wasm.wasm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zegoim/express-demo-web/b22b120bdb83cebc121bbf316499952220fb9e1f/src/Examples/Others/StreamCompositor/assets/zego-wasm.wasm -------------------------------------------------------------------------------- /src/Examples/Others/StreamCompositor/test.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zegoim/express-demo-web/b22b120bdb83cebc121bbf316499952220fb9e1f/src/Examples/Others/StreamCompositor/test.jpg -------------------------------------------------------------------------------- /src/Examples/Others/StreamMixing/index.css: -------------------------------------------------------------------------------- 1 | .pushlishInfo-title { 2 | font-weight: 500; 3 | } 4 | 5 | .preview-content { 6 | position: relative; 7 | width: auto; 8 | height: 200px; 9 | border: 1px solid #ccc; 10 | } 11 | 12 | .preview-content-playmix { 13 | position: relative; 14 | width: auto; 15 | min-height: 200px; 16 | border: 1px solid #ccc; 17 | } 18 | 19 | .preview-content > video, #localVideo1, #localVideo2 { 20 | width: 100%; 21 | height: 80%; 22 | } 23 | 24 | .preview-action { 25 | position: absolute; 26 | width: 100%; 27 | height: 0%; 28 | background-color: rgba(0,0,0,.1); 29 | z-index: 1; 30 | } 31 | 32 | .preview-info { 33 | opacity: 1; 34 | color: #000; 35 | font-size: 8px; 36 | font-weight: 400; 37 | line-height: 1; 38 | text-align: center; 39 | } 40 | 41 | .preview-video-action { 42 | position: absolute; 43 | display: flex; 44 | justify-content: center; 45 | flex-wrap: wrap; 46 | left: 0; 47 | bottom: 0; 48 | width: 100%; 49 | color: #fff; 50 | /* font-weight: 400; */ 51 | font-size: 10px; 52 | /* height: 100%; */ 53 | /* background-color: rgba(0,0,0,.5); */ 54 | } 55 | 56 | .col-6 { 57 | padding-left: 5px; 58 | padding-right: 5px; 59 | } 60 | 61 | .preview-roomInfo { 62 | font-weight: 500; 63 | } 64 | 65 | #roomInfo-id { 66 | display: inline-block; 67 | font-weight: normal; 68 | } 69 | 70 | #roomInfo-state { 71 | display: inline-block; 72 | font-weight: normal; 73 | } 74 | 75 | 76 | .logger-wrapper { 77 | margin-top: 20px; 78 | width: 100%; 79 | height: 250px; 80 | background-color: #ccc; 81 | color: rgb(252, 250, 250); 82 | overflow: scroll; 83 | } 84 | 85 | .btn-wrapper { 86 | display: flex; 87 | width: 100%; 88 | background-color: rgb(252, 250, 250); 89 | border-radius: 10px; 90 | height: 30px; 91 | justify-content: center; 92 | align-items: center; 93 | } 94 | 95 | .action-step { 96 | margin: 10px 0; 97 | } 98 | 99 | .action-content { 100 | width: 100%; 101 | background-color: rgb(252, 250, 250); 102 | border-radius: 10px; 103 | padding: 10px; 104 | min-height: 250px; 105 | } 106 | 107 | .action-title { 108 | font-weight: 700px; 109 | color: black; 110 | } 111 | .action-info { 112 | font-size: 14px; 113 | } 114 | 115 | .cuBtn { 116 | display: block; 117 | padding: 0 12px; 118 | font-size: 13px; 119 | cursor: pointer; 120 | height: 30px; 121 | width: 95%; 122 | } 123 | 124 | .action-room { 125 | display: flex; 126 | align-items: center; 127 | justify-content: space-between; 128 | flex-wrap: wrap; 129 | padding-bottom: 10px; 130 | } 131 | 132 | .form-wrap { 133 | margin: 6px 0; 134 | } 135 | .form-wrap .form-item { 136 | display: flex; 137 | } 138 | .form-wrap .form-item input { 139 | flex: 1; 140 | } 141 | 142 | .login-wrapper { 143 | padding: 15px; 144 | background-color: #fff; 145 | } 146 | .login-desc { 147 | font-size: 14px; 148 | } 149 | .icon-question { 150 | display: inline-block; 151 | text-align: center; 152 | line-height: 16px; 153 | width: 16px; 154 | height: 16px; 155 | border-radius: 50%; 156 | background-color: #0575ff; 157 | color: #fff; 158 | cursor: pointer; 159 | font-weight: bold; 160 | } 161 | /* Tooltip text */ 162 | .icon-question .pop-box { 163 | visibility: hidden; 164 | width: 120px; 165 | background-color: #fff; 166 | box-shadow: 0 0 10px #dfdfdf; 167 | color: #000; 168 | text-align: center; 169 | border-radius: 6px; 170 | padding: 4px; 171 | /* Position the tooltip text - see examples below! */ 172 | position: absolute; 173 | z-index: 3; 174 | font-weight: 100; 175 | font-size: 12px; 176 | } 177 | /* Show the tooltip text when you mouse over the tooltip container */ 178 | .icon-question:hover .pop-box { 179 | visibility: visible; 180 | } 181 | .f-b-5 { 182 | flex-basis: 50%; 183 | } 184 | .f-b-3 { 185 | flex-basis: 33.3%; 186 | } 187 | .t-a-r { 188 | text-align: right; 189 | } 190 | .drop-item { 191 | display: flex; 192 | align-items: center; 193 | font-size: 12px; 194 | padding: 5px 5px; 195 | } 196 | .t-nowrap { 197 | overflow: hidden; 198 | text-overflow:ellipsis; 199 | white-space: nowrap; 200 | } 201 | 202 | 203 | 204 | 205 | .videoQuality { 206 | display: flex; 207 | align-items: center; 208 | justify-content: space-between; 209 | flex-wrap: wrap; 210 | padding-bottom: 15px; 211 | } 212 | 213 | input { 214 | width: 40% ; 215 | height: 21px ; 216 | border: 1px solid #ced4da; 217 | border-radius: .25rem; 218 | color: #495057; 219 | } 220 | 221 | .publish-setting { 222 | display: flex; 223 | /* justify-content: space-between; */ 224 | align-items: center; 225 | } 226 | 227 | .publish-check { 228 | /* flex-basis: 50%; */ 229 | display: flex; 230 | justify-content: space-around; 231 | } 232 | 233 | .check-wrappre { 234 | /* flex-basis: 50%; */ 235 | text-align: center; 236 | display: flex; 237 | align-items: center; 238 | } 239 | 240 | .check-input { 241 | display: inline-block; 242 | width: auto !important; 243 | height: auto !important; 244 | } 245 | 246 | select { 247 | width: 45% !important; 248 | height: 21px !important; 249 | min-height: 10px !important; 250 | padding: 0 !important; 251 | font-size: 12px !important; 252 | } 253 | 254 | .select-wrapper { 255 | flex-basis: 50%; 256 | display: flex; 257 | align-items: center; 258 | white-space: nowrap; 259 | } 260 | 261 | option { 262 | height: 21px !important; 263 | font-size: 14px; 264 | } 265 | 266 | .flex-c { 267 | margin: 5px 0; 268 | display: flex; 269 | align-items: center; 270 | } 271 | 272 | .configBtn { 273 | width: 90%; 274 | } 275 | 276 | #startMixTask{ 277 | position: absolute; 278 | bottom: 0px; 279 | } 280 | -------------------------------------------------------------------------------- /src/Examples/Others/VirtualBackground/assets/web.data: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zegoim/express-demo-web/b22b120bdb83cebc121bbf316499952220fb9e1f/src/Examples/Others/VirtualBackground/assets/web.data -------------------------------------------------------------------------------- /src/Examples/Others/VirtualBackground/assets/zego-wasm-simd.wasm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zegoim/express-demo-web/b22b120bdb83cebc121bbf316499952220fb9e1f/src/Examples/Others/VirtualBackground/assets/zego-wasm-simd.wasm -------------------------------------------------------------------------------- /src/Examples/Others/VirtualBackground/assets/zego-wasm.wasm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zegoim/express-demo-web/b22b120bdb83cebc121bbf316499952220fb9e1f/src/Examples/Others/VirtualBackground/assets/zego-wasm.wasm -------------------------------------------------------------------------------- /src/Examples/Others/VirtualBackground/test.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zegoim/express-demo-web/b22b120bdb83cebc121bbf316499952220fb9e1f/src/Examples/Others/VirtualBackground/test.jpg -------------------------------------------------------------------------------- /src/Examples/QuickStart/CommonUsage/index.css: -------------------------------------------------------------------------------- 1 | .pushlishInfo-title { 2 | font-weight: 500; 3 | } 4 | 5 | .preview-content { 6 | width: auto; 7 | height: 200px; 8 | border: 1px solid #ccc; 9 | } 10 | 11 | .preview-content > video, #localVideo, #remoteVideo { 12 | width: 100%; 13 | height: 100%; 14 | } 15 | .preview-roomInfo { 16 | font-weight: 500; 17 | } 18 | 19 | #roomInfo-id { 20 | display: inline-block; 21 | font-weight: normal; 22 | } 23 | 24 | #roomInfo-state { 25 | display: inline-block; 26 | font-weight: normal; 27 | } 28 | 29 | .logger-wrapper { 30 | margin-top: 20px; 31 | width: 100%; 32 | height: 250px; 33 | background-color: #ccc; 34 | color: rgb(252, 250, 250); 35 | overflow: scroll; 36 | } 37 | 38 | .btn-wrapper { 39 | display: flex; 40 | width: 100%; 41 | background-color: rgb(252, 250, 250); 42 | border-radius: 10px; 43 | height: 30px; 44 | justify-content: center; 45 | align-items: center; 46 | } 47 | 48 | .action-step { 49 | margin: 10px 0; 50 | } 51 | 52 | .action-content { 53 | width: 100%; 54 | background-color: rgb(252, 250, 250); 55 | border-radius: 10px; 56 | padding: 10px; 57 | } 58 | 59 | .action-title { 60 | font-weight: 700px; 61 | color: black; 62 | } 63 | .action-info { 64 | font-size: 14px; 65 | } 66 | 67 | .cuBtn { 68 | display: block; 69 | padding: 0 12px; 70 | font-size: 13px; 71 | cursor: pointer; 72 | height: 30px; 73 | width: 95%; 74 | } 75 | 76 | .action-room { 77 | padding-bottom: 15px; 78 | } 79 | .action-room > div + div { 80 | margin-top: 4px; 81 | } 82 | .icon-question { 83 | display: inline-block; 84 | text-align: center; 85 | line-height: 16px; 86 | width: 16px; 87 | height: 16px; 88 | border-radius: 50%; 89 | background-color: #0575ff; 90 | color: #fff; 91 | cursor: pointer; 92 | font-weight: bold; 93 | } 94 | /* Tooltip text */ 95 | .icon-question .pop-box { 96 | visibility: hidden; 97 | width: 120px; 98 | background-color: #fff; 99 | box-shadow: 0 0 10px #dfdfdf; 100 | color: #000; 101 | text-align: center; 102 | border-radius: 6px; 103 | padding: 4px; 104 | /* Position the tooltip text - see examples below! */ 105 | position: absolute; 106 | z-index: 1; 107 | font-weight: 100; 108 | font-size: 12px; 109 | } 110 | /* Show the tooltip text when you mouse over the tooltip container */ 111 | .icon-question:hover .pop-box { 112 | visibility: visible; 113 | } 114 | 115 | input { 116 | width: 40%; 117 | height: 21px; 118 | border: 1px solid #ced4da; 119 | border-radius: 0.25rem; 120 | color: #495057; 121 | } 122 | 123 | .w-70 { 124 | width: 70%; 125 | } 126 | 127 | .publish-setting { 128 | display: flex; 129 | /* justify-content: space-between; */ 130 | align-items: center; 131 | } 132 | 133 | .publish-check { 134 | flex-basis: 50%; 135 | display: flex; 136 | justify-content: space-around; 137 | } 138 | 139 | .check-wrappre { 140 | text-align: center; 141 | display: flex; 142 | align-items: center; 143 | } 144 | 145 | .check-input { 146 | display: inline-block; 147 | width: auto !important; 148 | height: auto !important; 149 | } 150 | 151 | select { 152 | width: 45% !important; 153 | height: 21px !important; 154 | padding: 0 !important; 155 | font-size: 12px !important; 156 | } 157 | 158 | .select-wrapper { 159 | flex-basis: 30%; 160 | display: flex; 161 | align-items: center; 162 | white-space: nowrap; 163 | } 164 | 165 | option { 166 | height: 21px !important; 167 | font-size: 14px; 168 | } 169 | 170 | @media (max-width: 375px) { 171 | .preview-playInfo { 172 | margin-top: 0 !important; 173 | } 174 | } 175 | -------------------------------------------------------------------------------- /src/Examples/QuickStart/Playing/index.css: -------------------------------------------------------------------------------- 1 | .pushlishInfo-title { 2 | font-weight: 500; 3 | } 4 | 5 | .preview-content { 6 | width: auto; 7 | height: 200px; 8 | border: 1px solid #ccc; 9 | } 10 | 11 | .preview-content>video, 12 | #remoteVideo { 13 | width: 100%; 14 | height: 100%; 15 | } 16 | 17 | .preview-roomInfo { 18 | font-weight: 500; 19 | } 20 | 21 | #roomInfo-id { 22 | display: inline-block; 23 | font-weight: normal; 24 | } 25 | 26 | #roomInfo-state { 27 | display: inline-block; 28 | font-weight: normal; 29 | } 30 | 31 | 32 | .logger-wrapper { 33 | margin-top: 20px; 34 | width: 100%; 35 | height: 250px; 36 | background-color: #ccc; 37 | color: rgb(252, 250, 250); 38 | overflow: scroll; 39 | } 40 | 41 | .btn-wrapper { 42 | display: flex; 43 | width: 100%; 44 | background-color: rgb(252, 250, 250); 45 | border-radius: 10px; 46 | height: 30px; 47 | justify-content: center; 48 | align-items: center; 49 | } 50 | 51 | .action-step { 52 | margin: 10px 0; 53 | } 54 | 55 | .action-content { 56 | width: 100%; 57 | background-color: rgb(252, 250, 250); 58 | border-radius: 10px; 59 | padding: 10px; 60 | } 61 | 62 | .action-title { 63 | font-weight: 700px; 64 | color: black; 65 | } 66 | 67 | .action-info { 68 | font-size: 14px; 69 | } 70 | 71 | .cuBtn { 72 | display: block; 73 | padding: 0 12px; 74 | font-size: 13px; 75 | cursor: pointer; 76 | height: 30px; 77 | width: 95%; 78 | } 79 | 80 | .action-room { 81 | padding-bottom: 15px; 82 | } 83 | 84 | .action-room>div+div { 85 | margin-top: 4px; 86 | } 87 | 88 | .icon-question { 89 | display: inline-block; 90 | text-align: center; 91 | line-height: 16px; 92 | width: 16px; 93 | height: 16px; 94 | border-radius: 50%; 95 | background-color: #0575ff; 96 | color: #fff; 97 | cursor: pointer; 98 | font-weight: bold; 99 | } 100 | 101 | /* Tooltip text */ 102 | .icon-question .pop-box { 103 | visibility: hidden; 104 | width: 120px; 105 | background-color: #fff; 106 | box-shadow: 0 0 10px #dfdfdf; 107 | color: #000; 108 | text-align: center; 109 | border-radius: 6px; 110 | padding: 4px; 111 | /* Position the tooltip text - see examples below! */ 112 | position: absolute; 113 | z-index: 1; 114 | font-weight: 100; 115 | font-size: 12px; 116 | } 117 | 118 | /* Show the tooltip text when you mouse over the tooltip container */ 119 | .icon-question:hover .pop-box { 120 | visibility: visible; 121 | } 122 | 123 | .f-b-3 { 124 | flex-basis: 30%; 125 | } 126 | 127 | .f-b-7 { 128 | flex-basis: 70% !important; 129 | } 130 | 131 | input { 132 | width: 40%; 133 | height: 21px; 134 | border: 1px solid #ced4da; 135 | border-radius: .25rem; 136 | color: #495057; 137 | } 138 | 139 | .w-70 { 140 | width: 70%; 141 | } 142 | 143 | .publish-setting { 144 | display: flex; 145 | /* justify-content: space-between; */ 146 | align-items: center; 147 | } 148 | 149 | .publish-check { 150 | flex-basis: 50%; 151 | display: flex; 152 | justify-content: space-around; 153 | } 154 | 155 | .check-wrappre { 156 | text-align: center; 157 | display: flex; 158 | align-items: center; 159 | } 160 | 161 | .check-input { 162 | display: inline-block; 163 | width: auto !important; 164 | height: auto !important; 165 | } 166 | 167 | select { 168 | width: 45% !important; 169 | height: 21px !important; 170 | padding: 0 !important; 171 | font-size: 12px !important; 172 | } 173 | 174 | .select-wrapper { 175 | flex-basis: 30%; 176 | display: flex; 177 | align-items: center; 178 | white-space: nowrap; 179 | } 180 | 181 | option { 182 | height: 21px !important; 183 | font-size: 14px; 184 | } 185 | 186 | @media (max-width: 375px) { 187 | .preview-playInfo { 188 | margin-top: 0 !important; 189 | } 190 | } -------------------------------------------------------------------------------- /src/Examples/QuickStart/Publishing/index.css: -------------------------------------------------------------------------------- 1 | .pushlishInfo-title { 2 | font-weight: 500; 3 | } 4 | 5 | .preview-content { 6 | width: auto; 7 | height: 200px; 8 | border: 1px solid #ccc; 9 | } 10 | 11 | .preview-content>video, 12 | #localVideo { 13 | width: 100%; 14 | height: 100%; 15 | } 16 | 17 | .preview-roomInfo { 18 | font-weight: 500; 19 | } 20 | 21 | #roomInfo-id { 22 | display: inline-block; 23 | font-weight: normal; 24 | } 25 | 26 | #roomInfo-state { 27 | display: inline-block; 28 | font-weight: normal; 29 | } 30 | 31 | 32 | .logger-wrapper { 33 | margin-top: 20px; 34 | width: 100%; 35 | height: 250px; 36 | background-color: #ccc; 37 | color: rgb(252, 250, 250); 38 | overflow: scroll; 39 | } 40 | 41 | .btn-wrapper { 42 | display: flex; 43 | width: 100%; 44 | background-color: rgb(252, 250, 250); 45 | border-radius: 10px; 46 | height: 30px; 47 | justify-content: center; 48 | align-items: center; 49 | } 50 | 51 | .action-step { 52 | margin: 10px 0; 53 | } 54 | 55 | .action-content { 56 | width: 100%; 57 | background-color: rgb(252, 250, 250); 58 | border-radius: 10px; 59 | padding: 10px; 60 | } 61 | 62 | .action-title { 63 | font-weight: 700px; 64 | color: black; 65 | } 66 | 67 | .action-info { 68 | font-size: 14px; 69 | } 70 | 71 | .cuBtn { 72 | display: block; 73 | padding: 0 12px; 74 | font-size: 13px; 75 | cursor: pointer; 76 | height: 30px; 77 | width: 95%; 78 | } 79 | 80 | 81 | .action-room { 82 | padding-bottom: 15px; 83 | } 84 | 85 | .action-room>div+div { 86 | margin-top: 4px; 87 | } 88 | 89 | .icon-question { 90 | display: inline-block; 91 | text-align: center; 92 | line-height: 16px; 93 | width: 16px; 94 | height: 16px; 95 | border-radius: 50%; 96 | background-color: #0575ff; 97 | color: #fff; 98 | cursor: pointer; 99 | font-weight: bold; 100 | } 101 | 102 | /* Tooltip text */ 103 | .icon-question .pop-box { 104 | visibility: hidden; 105 | width: 120px; 106 | background-color: #fff; 107 | box-shadow: 0 0 10px #dfdfdf; 108 | color: #000; 109 | text-align: center; 110 | border-radius: 6px; 111 | padding: 4px; 112 | /* Position the tooltip text - see examples below! */ 113 | position: absolute; 114 | z-index: 1; 115 | font-weight: 100; 116 | font-size: 12px; 117 | } 118 | 119 | /* Show the tooltip text when you mouse over the tooltip container */ 120 | .icon-question:hover .pop-box { 121 | visibility: visible; 122 | } 123 | 124 | .f-b-3 { 125 | flex-basis: 30%; 126 | } 127 | 128 | .f-b-7 { 129 | flex-basis: 70% !important; 130 | } 131 | 132 | input { 133 | width: 40%; 134 | height: 21px; 135 | border: 1px solid #ced4da; 136 | border-radius: .25rem; 137 | color: #495057; 138 | } 139 | 140 | .w-70 { 141 | width: 70%; 142 | } 143 | 144 | .publish-setting { 145 | display: flex; 146 | /* justify-content: space-between; */ 147 | align-items: center; 148 | } 149 | 150 | .publish-check { 151 | flex-basis: 50%; 152 | display: flex; 153 | justify-content: space-around; 154 | } 155 | 156 | .check-wrappre { 157 | text-align: center; 158 | display: flex; 159 | align-items: center; 160 | } 161 | 162 | .check-input { 163 | display: inline-block; 164 | width: auto !important; 165 | height: auto !important; 166 | } 167 | 168 | select { 169 | width: 45% !important; 170 | height: 21px !important; 171 | padding: 0 !important; 172 | font-size: 12px !important; 173 | } 174 | 175 | .select-wrapper { 176 | flex-basis: 30%; 177 | display: flex; 178 | align-items: center; 179 | white-space: nowrap; 180 | } 181 | 182 | option { 183 | height: 21px !important; 184 | font-size: 14px; 185 | } 186 | 187 | @media (max-width: 375px) { 188 | .preview-playInfo { 189 | margin-top: 0 !important; 190 | } 191 | } -------------------------------------------------------------------------------- /src/Examples/QuickStart/VideoTalk/index.css: -------------------------------------------------------------------------------- 1 | .pushlishInfo-title { 2 | font-weight: 500; 3 | } 4 | 5 | .preview-content { 6 | position: relative; 7 | width: auto; 8 | height: 200px; 9 | border: 1px solid #ccc; 10 | } 11 | 12 | .preview-content>video, 13 | #localVideo, 14 | #remoteVideo { 15 | width: 100%; 16 | height: calc(100% - 33px); 17 | margin: 0; 18 | padding: 0; 19 | } 20 | 21 | .preview-action { 22 | /* position: absolute; 23 | width: 100%; 24 | height: 100%; */ 25 | background-color: rgba(0, 0, 0, .1); 26 | /* z-index: 1; */ 27 | } 28 | 29 | .preview-info { 30 | opacity: 1; 31 | color: #000; 32 | font-size: 8px; 33 | font-weight: 400; 34 | line-height: 1; 35 | } 36 | 37 | .preview-video-action { 38 | display: flex; 39 | justify-content: center; 40 | flex-wrap: wrap; 41 | left: 0; 42 | bottom: 0; 43 | width: 100%; 44 | color: #fff; 45 | /* font-weight: 400; */ 46 | font-size: 10px; 47 | /* height: 100%; */ 48 | background-color: rgba(0, 0, 0, .5); 49 | } 50 | 51 | .col-6 { 52 | padding-left: 5px; 53 | padding-right: 5px; 54 | } 55 | 56 | .preview-roomInfo { 57 | font-weight: 500; 58 | } 59 | 60 | #roomInfo-id { 61 | display: inline-block; 62 | font-weight: normal; 63 | } 64 | 65 | #roomInfo-state { 66 | display: inline-block; 67 | font-weight: normal; 68 | } 69 | 70 | 71 | .logger-wrapper { 72 | margin-top: 20px; 73 | width: 100%; 74 | height: 250px; 75 | background-color: #ccc; 76 | color: rgb(252, 250, 250); 77 | overflow: scroll; 78 | } 79 | 80 | .btn-wrapper { 81 | display: flex; 82 | width: 100%; 83 | background-color: rgb(252, 250, 250); 84 | border-radius: 10px; 85 | height: 30px; 86 | justify-content: center; 87 | align-items: center; 88 | } 89 | 90 | .action-step { 91 | margin: 10px 0; 92 | } 93 | 94 | .action-content { 95 | width: 100%; 96 | background-color: rgb(252, 250, 250); 97 | border-radius: 10px; 98 | padding: 10px; 99 | min-height: 40px; 100 | } 101 | 102 | .action-title { 103 | font-weight: 700px; 104 | color: black; 105 | } 106 | 107 | .action-info { 108 | font-size: 14px; 109 | } 110 | 111 | .cuBtn { 112 | display: block; 113 | padding: 0 12px; 114 | font-size: 13px; 115 | cursor: pointer; 116 | height: 30px; 117 | width: 95%; 118 | } 119 | 120 | .action-room { 121 | display: flex; 122 | align-items: center; 123 | justify-content: space-between; 124 | flex-wrap: wrap; 125 | padding-bottom: 10px; 126 | } 127 | 128 | .f-b-5 { 129 | flex-basis: 50%; 130 | } 131 | 132 | .f-b-3 { 133 | flex-basis: 30%; 134 | } 135 | 136 | .f-b-7 { 137 | flex-basis: 70%; 138 | } 139 | 140 | .t-a-r { 141 | text-align: right; 142 | } 143 | 144 | .w-70 { 145 | width: 70%; 146 | } 147 | 148 | .w-50 { 149 | width: 50%; 150 | } 151 | 152 | .drop-item { 153 | display: flex; 154 | align-items: center; 155 | font-size: 12px; 156 | padding: 5px 5px; 157 | } 158 | 159 | .t-nowrap { 160 | overflow: hidden; 161 | text-overflow: ellipsis; 162 | white-space: nowrap; 163 | } 164 | 165 | .action-content .desc { 166 | font-size: 12px; 167 | color: #8b8b8b; 168 | } 169 | 170 | 171 | 172 | 173 | .videoQuality { 174 | display: flex; 175 | align-items: center; 176 | justify-content: space-between; 177 | flex-wrap: wrap; 178 | padding-bottom: 15px; 179 | } 180 | 181 | input { 182 | width: 40%; 183 | height: 21px; 184 | border: 1px solid #ced4da; 185 | border-radius: .25rem; 186 | color: #495057; 187 | } 188 | 189 | .publish-setting { 190 | display: flex; 191 | /* justify-content: space-between; */ 192 | align-items: center; 193 | } 194 | 195 | .publish-check { 196 | /* flex-basis: 50%; */ 197 | display: flex; 198 | justify-content: space-around; 199 | } 200 | 201 | .check-wrappre { 202 | /* flex-basis: 50%; */ 203 | text-align: center; 204 | display: flex; 205 | align-items: center; 206 | } 207 | 208 | .check-input { 209 | display: inline-block; 210 | width: auto !important; 211 | height: auto !important; 212 | } 213 | 214 | select { 215 | width: 45% !important; 216 | height: 21px !important; 217 | min-height: 10px !important; 218 | padding: 0 !important; 219 | font-size: 12px !important; 220 | } 221 | 222 | .select-wrapper { 223 | flex-basis: 50%; 224 | display: flex; 225 | align-items: center; 226 | white-space: nowrap; 227 | } 228 | 229 | option { 230 | height: 21px !important; 231 | font-size: 14px; 232 | } 233 | 234 | .flex-c { 235 | margin: 5px 0; 236 | display: flex; 237 | align-items: center; 238 | } 239 | 240 | .configBtn { 241 | width: 50%; 242 | } 243 | 244 | @media (max-width: 375px) { 245 | .preview-playInfo { 246 | margin-top: 0 !important; 247 | } 248 | 249 | .configBtn { 250 | width: 90%; 251 | } 252 | } -------------------------------------------------------------------------------- /src/KeyCenter.js: -------------------------------------------------------------------------------- 1 | 2 | let appID; // 请从官网控制台获取对应的appID Please obtain the corresponding appid from the official website console 3 | let server; // 请从官网控制台获取对应的server地址，否则可能登录失败 Please obtain the corresponding server address from the console on the official website, otherwise the login may fail 4 | var baseURL = window.location.href.match(/.*\/Examples/)[0] 5 | // get local appID and server 6 | let appInfo = { 7 | appID, 8 | server 9 | } 10 | if (!appID || !server) { 11 | try { 12 | const appInfoStr = localStorage.getItem("app_info") 13 | const parseAppInfo = JSON.parse(appInfoStr) 14 | appInfo = parseAppInfo || appInfo 15 | } catch (error) { 16 | localStorage.removeItem("app_info") 17 | } 18 | if (!appInfo.appID || !appInfo.server) { 19 | alert("Need to set appID and server url!") 20 | window.location.href = `${baseURL}/DebugAndConfig/InitSettings/index.html${location.search}` 21 | } 22 | } else { 23 | localStorage.setItem("app_info", JSON.stringify({ 24 | appID, 25 | server 26 | })) 27 | } 28 | 29 | appID = appInfo.appID; 30 | server = appInfo.server; 31 | 32 | $(".goToDoc").html( 33 | ` 34 |
  • 35 | AppID: ${appID} ; Server: "${server}" ; 36 | this. 37 |
    • 38 | ` + $(".goToDoc").html() 39 | ) -------------------------------------------------------------------------------- /src/assets/16183688734997.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zegoim/express-demo-web/b22b120bdb83cebc121bbf316499952220fb9e1f/src/assets/16183688734997.mp3 -------------------------------------------------------------------------------- /src/assets/images/custom-select.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zegoim/express-demo-web/b22b120bdb83cebc121bbf316499952220fb9e1f/src/assets/images/custom-select.png -------------------------------------------------------------------------------- /src/assets/js/express_player/asset/7ae283b5a729f59ff472.gz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zegoim/express-demo-web/b22b120bdb83cebc121bbf316499952220fb9e1f/src/assets/js/express_player/asset/7ae283b5a729f59ff472.gz -------------------------------------------------------------------------------- /src/assets/js/express_sdk/background-process/assets/web.data: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zegoim/express-demo-web/b22b120bdb83cebc121bbf316499952220fb9e1f/src/assets/js/express_sdk/background-process/assets/web.data -------------------------------------------------------------------------------- /src/assets/js/express_sdk/background-process/assets/zego-wasm-simd.wasm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zegoim/express-demo-web/b22b120bdb83cebc121bbf316499952220fb9e1f/src/assets/js/express_sdk/background-process/assets/zego-wasm-simd.wasm -------------------------------------------------------------------------------- /src/assets/js/express_sdk/background-process/assets/zego-wasm.wasm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zegoim/express-demo-web/b22b120bdb83cebc121bbf316499952220fb9e1f/src/assets/js/express_sdk/background-process/assets/zego-wasm.wasm -------------------------------------------------------------------------------- /src/assets/js/jquery.i18n.properties.min.js: -------------------------------------------------------------------------------- 1 | (function(h){function v(a){a.debug&&(f("callbackIfComplete()"),f("totalFiles: "+a.totalFiles),f("filesLoaded: "+a.filesLoaded));a.async&&a.filesLoaded===a.totalFiles&&a.callback&&a.callback()}function n(a,c){c.debug&&f("loadAndParseFiles");null!==a&&0c.length)a.debug&&f("No language supplied. Pulling it from the browser ..."),c=navigator.languages&&0=b.outerHeight()?k=!0:(c.stop(!0, 11 | !0).fadeIn("fast"),a.railVisible&&m.stop(!0,!0).fadeIn("fast"))}function p(){a.alwaysVisible||(B=setTimeout(function(){a.disableFadeOut&&r||y||z||(c.fadeOut("slow"),m.fadeOut("slow"))},1E3))}var r,y,z,B,A,u,l,C,k=!1,b=e(this);if(b.parent().hasClass(a.wrapperClass)){var q=b.scrollTop(),c=b.siblings("."+a.barClass),m=b.siblings("."+a.railClass);x();if(e.isPlainObject(f)){if("height"in f&&"auto"==f.height){b.parent().css("height","auto");b.css("height","auto");var h=b.parent().parent().height();b.parent().css("height", 12 | h);b.css("height",h)}else"height"in f&&(h=f.height,b.parent().css("height",h),b.css("height",h));if("scrollTo"in f)q=parseInt(a.scrollTo);else if("scrollBy"in f)q+=parseInt(a.scrollBy);else if("destroy"in f){c.remove();m.remove();b.unwrap();return}n(q,!1,!0)}}else if(!(e.isPlainObject(f)&&"destroy"in f)){a.height="auto"==a.height?b.parent().height():a.height;q=e("
    ").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden", 13 | width:a.width,height:a.height});var m=e("
    ").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?"block":"none","border-radius":a.railBorderRadius,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=e("
    ").addClass(a.barClass).css({background:a.color,width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?"block":"none","border-radius":a.borderRadius,BorderRadius:a.borderRadius,MozBorderRadius:a.borderRadius, 14 | WebkitBorderRadius:a.borderRadius,zIndex:99}),h="right"==a.position?{right:a.distance}:{left:a.distance};m.css(h);c.css(h);b.wrap(q);b.parent().append(c);b.parent().append(m);a.railDraggable&&c.bind("mousedown",function(a){var b=e(document);z=!0;t=parseFloat(c.css("top"));pageY=a.pageY;b.bind("mousemove.slimscroll",function(a){currTop=t+a.pageY-pageY;c.css("top",currTop);n(0,c.position().top,!1)});b.bind("mouseup.slimscroll",function(a){z=!1;p();b.unbind(".slimscroll")});return!1}).bind("selectstart.slimscroll", 15 | function(a){a.stopPropagation();a.preventDefault();return!1});m.hover(function(){w()},function(){p()});c.hover(function(){y=!0},function(){y=!1});b.hover(function(){r=!0;w();p()},function(){r=!1;p()});b.bind("touchstart",function(a,b){a.originalEvent.touches.length&&(A=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){k||b.originalEvent.preventDefault();b.originalEvent.touches.length&&(n((A-b.originalEvent.touches[0].pageY)/a.touchScrollStep,!0),A=b.originalEvent.touches[0].pageY)}); 16 | x();"bottom"===a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),n(0,!0)):"top"!==a.start&&(n(e(a.start).position().top,null,!0),a.alwaysVisible||c.hide());window.addEventListener?(this.addEventListener("DOMMouseScroll",v,!1),this.addEventListener("mousewheel",v,!1)):document.attachEvent("onmousewheel",v)}});return this}});e.fn.extend({slimscroll:e.fn.slimScroll})})(jQuery); -------------------------------------------------------------------------------- /src/assets/js/metisMenu.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * metismenu https://github.com/onokumus/metismenu#readme 3 | * A jQuery menu plugin 4 | * @version 3.0.6 5 | * @author Osman Nuri Okumus (https://github.com/onokumus) 6 | * @license: MIT 7 | */ 8 | !function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("jquery")):"function"==typeof define&&define.amd?define(["jquery"],n):(e=e||self).metisMenu=n(e.jQuery)}(this,function(o){"use strict";function a(){return(a=Object.assign||function(e){for(var n=1;n Web -> Server），用以体验示例 demo。 140 | CheckOutConsole = 点击打开ZEGO控制台 141 | 142 | Preconditions = 前置条件 143 | PreconditionsDesc = 体验该功能，需要模拟一个用户（UserID）登陆到对应的房间（RoomID）中，并且有权限（Token）时才可以登陆成功。 144 | PreconditionsPlay265CDN = 注意 145 | PreconditionsDescPlay265CDN = 由于 WebRTC 不支持 H.265 推流，因此需要开发者基于 Native Express SDK 转推一路 H.265 编码格式的流到 CDN ，然后将拉流的 URL 地址填入下框中。 146 | BaseBeauty = 基础美颜 147 | EnableBeauty = 开启美颜 148 | DisableBeauty = 关闭美颜 149 | Smooth = 磨皮 150 | White = 美白 151 | Rosy = 红润 152 | Sharpen = 锐化 153 | 154 | VirtualBackground = 背景虚化与虚拟背景 155 | SetBackgroundEffectMode = 设置背景处理方式 156 | SetBackgroundBlurDegree = 设置背景虚化强度 157 | SetVirtualBackgroundImage = 设置虚拟背景图片 158 | None = 无 159 | Blur = 背景虚化 160 | Virtual = 虚拟背景 161 | High = 强 162 | Medium = 中等 163 | Low = 弱 164 | 165 | StreamCompositor = 本地导播 166 | SetCompositorImage = 设置本地导播图片 167 | setTransparentEffect = 设置人像背景透明 168 | 169 | DeviceDetection = 设备检测 170 | DeviceList = 设备列表 171 | Detect = 检测 172 | GetDevices = 更新设备列表 173 | DetectionResult = 检测结果 174 | MicrophoneCheckResult = 对着麦克风说话，检查进度条是否波动 175 | CameraCheckResult = 检测摄像头画面是否正常 176 | SpeakerCheckResult = 在系统设置中调大对应扬声器音量，检查对应扬声器是否正常播放歌曲 177 | 178 | NetworkDetection = 网络检测 179 | UplinkQuality = 上行网络质量 180 | DownlinkQuality = 下行网络质量 181 | VoicePreset = 变声模式 -------------------------------------------------------------------------------- /src/assets/translate/zh_zh.properties: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zegoim/express-demo-web/b22b120bdb83cebc121bbf316499952220fb9e1f/src/assets/translate/zh_zh.properties --------------------------------------------------------------------------------