├── .browserslistrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── package.json
├── postcss.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── img
    │   │   └── bg.jpg
    ├── config.js
    ├── main.js
    ├── mixins
    │   └── MeetMixin.js
    ├── router.js
    └── views
    │   ├── Join.vue
    │   └── Meeting.vue
├── tests
    └── e2e
    │   ├── custom-assertions
    │       └── elementCount.js
    │   └── specs
    │       └── test.js
└── vue.config.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not ie <= 8
4 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | end_of_line = lf
5 | trim_trailing_whitespace = true
6 | insert_final_newline = true
7 | max_line_length = 100
8 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true,
 5 |   },
 6 |   extends: [
 7 |     'plugin:vue/essential',
 8 |     '@vue/airbnb',
 9 |   ],
10 |   rules: {
11 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
13 |   },
14 |   parserOptions: {
15 |     parser: 'babel-eslint',
16 |   },
17 | };
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | package-lock.json
 5 | 
 6 | /tests/e2e/reports/
 7 | selenium-debug.log
 8 | 
 9 | # local env files
10 | .env.local
11 | .env.*.local
12 | 
13 | # Log files
14 | npm-debug.log*
15 | yarn-debug.log*
16 | yarn-error.log*
17 | 
18 | # Editor directories and files
19 | .idea
20 | .vscode
21 | *.suo
22 | *.ntvs*
23 | *.njsproj
24 | *.sln
25 | *.sw*
26 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 重要提醒
 2 | anyRTC 对该版本已经不再维护，如需音视频呼叫，请前往:https://github.com/anyRTC-UseCase/ARCall
 3 | 
 4 | **功能如下：**
 5 | - 一对一音视频呼叫
 6 | - 一对多音视频呼叫
 7 | - 视频通话转音频通话
 8 | - 静音开关/视频开关
 9 | - AI降噪，极致降噪，不留噪声
10 | - 大小屏切换
11 | - 悬浮窗功能
12 | 
13 | 新版本一行代码，30分钟即可使应用有音视频能力。
14 | 
15 | 更多示列请前往**公司网址： [www.anyrtc.io](https://www.anyrtc.io)**
16 | 
17 | # anyRTC-Meeting-Web
18 | 
19 | ## 使用
20 | 
21 | ### Project setup
22 | ```
23 | npm install
24 | ```
25 | 
26 | ### Compiles and hot-reloads for development
27 | ```
28 | npm run serve
29 | ```
30 | 
31 | ### Compiles and minifies for production
32 | ```
33 | npm run build
34 | ```
35 | 
36 | ## 更新日志
37 | 
38 | 2019年5月14日：</br>
39 | 
40 | 使用最新的ar-meet 3.0 实时视频会议sdk
41 | 
42 | ## 简介
43 | anyRTC-Meeting-Web SDK，支持视频、语音多人会议，适用于会议、培训、互动等多人移动会议。</br>
44 | 
45 | ## 集成
46 | 集成请参考[这里](https://docs.anyrtc.io/v1/MEET/web.html)
47 | 
48 | ### 注册账号
49 | 
50 | 登陆[AnyRTC官网](https://www.anyrtc.io/)
51 | 
52 | ### 填写信息
53 | 
54 | 创建应用，在管理中心获取开发者ID，AppID，AppKey，AppToken，替换AppDelegate.h中的相关信息
55 | 
56 | ### 操作步骤：
57 | 
58 | 打开[会议页面](https://demos.anyrtc.io/ar-meet/)进入同一个会议</br>
59 | 
60 | ### 资源中心
61 | 
62 | [更多详细方法使用，请查看API文档](https://docs.anyrtc.io/v1/MEET/)
63 | 
64 | ### 兼容情况
65 | 
66 | - Chrome、Firefox、safari 11(以上)或其他谷歌内核浏览器
67 | - H5支持chrome内核
68 | 
69 | ## 扫描二维码下载iOS demo
70 | ![Meet](https://github.com/anyRTC/anyRTC-Meeting-iOS/raw/master/image/xoTQ.png)
71 | 
72 | ## 扫描二维码下载Android demo
73 | ![Meet](https://camo.githubusercontent.com/11cd7d397d6d5883642a2bf558471b364fe6bd39/68747470733a2f2f7777772e70677965722e636f6d2f6170702f7172636f64652f65553055)
74 | 
75 | ## Android版anyRTC-Meeting
76 | [anyRTC-Meeting-Android](https://github.com/AnyRTC/anyRTC-meeting-Android)
77 | 
78 | ## iOS版anyRTC-Meeting
79 | [anyRTC-Meeting-iOS](https://github.com/AnyRTC/anyRTC-meeting-iOS)
80 | 
81 | ## 技术支持
82 | anyRTC官方网址：https://www.anyrtc.io </br>
83 | anyRTC官方论坛：https://bbs.anyrtc.io </br>
84 | QQ技术交流群：554714720 </br>
85 | 联系电话:021-65650071-816 </br>
86 | Email:hi@dync.cc </br>
87 | 
88 | ## 关于直播
89 | 本公司有一整套直播解决方案，特别针对移动端。本公司开发者平台[www.anyrtc.io](http://www.anyrtc.io)。除了基于RTMP协议的直播系统外，我公司还有基于WebRTC的时时交互直播系统、P2P呼叫系统、会议系统等。快捷集成SDK，便可让你的应用拥有时时通话功能。欢迎您的来电~
90 | 
91 | ## License
92 | 
93 | RTCMeetEngine is available under the MIT license. See the LICENSE file for more info.
94 | 
95 | ### Customize configuration
96 | See [Configuration Reference](https://cli.vuejs.org/config/).
97 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app',
4 |   ],
5 | };
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ar-meet-demo",
 3 |   "version": "0.1.1",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "test:e2e": "vue-cli-service test:e2e"
 9 |   },
10 |   "dependencies": {
11 |     "vue": "^2.6.11",
12 |     "vue-router": "^3.1.3"
13 |   },
14 |   "devDependencies": {
15 |     "@vue/cli-plugin-babel": "^4.1.2",
16 |     "@vue/cli-plugin-e2e-nightwatch": "^4.1.2",
17 |     "@vue/cli-service": "^4.1.2",
18 |     "ar-meet": "^3.0.17",
19 |     "ar-share-screen": "3.0.1",
20 |     "node-sass": "^4.13.0",
21 |     "sass-loader": "^8.0.0",
22 |     "vue-template-compiler": "^2.6.11"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {},
4 |   },
5 | };
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anyrtcIO-Community/anyRTC-Meeting-Web/ae538b5bce0864fceb6374432240b9df9b478819/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>ar-meet</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but ar-meet doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <router-view/>
 3 | </template>
 4 | 
 5 | <style lang="scss">
 6 |   html,body {
 7 |     font-size: 12px;
 8 |     color: #666;
 9 |     background-color: #fafafa;
10 |     margin: 0;
11 |     width: 100%;
12 |     height: 100%;
13 |   }
14 | 
15 |   h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd{
16 |     margin: 0;
17 |   }
18 | 
19 |   ul,ol,input { padding: 0; }
20 | 
21 |   a {
22 |     text-decoration: none;
23 |     color: #5392FF;
24 |     cursor: pointer;
25 |   }
26 |   #app {
27 |     font-family: 'Avenir', Helvetica, Arial, sans-serif;
28 |     -webkit-font-smoothing: antialiased;
29 |     -moz-osx-font-smoothing: grayscale;
30 |     color: #2c3e50;
31 |   }
32 |   .ar-container {
33 |     display: flex;
34 |     width: 100%;
35 |     height: 100%;
36 |     flex-direction: row;
37 |     flex: 1 0 auto;
38 |     box-sizing: border-box;
39 |     flex-basis: auto;
40 |     min-width: 0;
41 |     &.is-vertical { flex-direction: column }
42 |   }
43 |   .ar-main {
44 |     display: block;
45 |     flex: 1;
46 |   }
47 |   .ar-aside{
48 |     width: 320px;
49 |   }
50 |   .ar-aside,
51 |   .ar-main {
52 |     overflow: auto;
53 |   }
54 |   .ar-main,
55 |   .ar-aside,
56 |   .ar-header,
57 |   .ar-footer {  
58 |     flex-shrink: 0;
59 |     box-sizing: border-box;
60 |   }
61 | </style>
62 | 


--------------------------------------------------------------------------------
/src/assets/img/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anyrtcIO-Community/anyRTC-Meeting-Web/ae538b5bce0864fceb6374432240b9df9b478819/src/assets/img/bg.jpg


--------------------------------------------------------------------------------
/src/config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |     APP_ID: '',
3 |     APP_TOKEN: '',
4 |     RTC_SERVER_URL: '',//如果有部署私有云请配置私有云服务地址
5 | };


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import App from './App.vue';
 3 | import router from './router';
 4 | 
 5 | Vue.config.productionTip = false;
 6 | 
 7 | new Vue({
 8 |   router,
 9 |   render: h => h(App),
10 | }).$mount('#app');
11 | 


--------------------------------------------------------------------------------
/src/mixins/MeetMixin.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   data() {
 3 |     return {
 4 |       
 5 |     }
 6 |   },
 7 | 
 8 |   created() {
 9 |     if (JSON.stringify(this.$route.params) === "{}") {
10 |       this.$router.push('/');
11 |     } else {
12 |       this.roomId = this.$route.params.roomId;
13 |       this.isHoster = this.$route.params.isHoster || 0;
14 |     }
15 |   },
16 | 
17 |   mounted() {
18 |     let that = this;
19 |     that.handleResize();
20 |     window.addEventListener('resize', that.handleResize, false);
21 |   },
22 | 
23 |   methods: {
24 |     handleResize(e) {
25 |       let that = this;
26 |       let videos = document.querySelectorAll('.ar-video_box');
27 |       if (videos.length === 0) return;
28 |       let videoArray = Array.prototype.slice.call(videos);
29 |       let videoRect = that.$refs.videoView.getBoundingClientRect();
30 |       let optimumWidth = 0;
31 |       let optimumHeight = 0;
32 |       let currentWidth = videoRect.width;
33 |       let currentHeight = videoRect.height;
34 |       //videoView最佳视图以当前的宽度计算
35 |       if (parseInt(currentWidth * 9 / 16) < currentHeight) {
36 |         optimumWidth = currentWidth;
37 |         optimumHeight = parseInt(currentWidth * 9 / 16);
38 |       }
39 |       //最佳视图以当前的高度计算
40 |       else {
41 |         optimumWidth = parseInt(currentHeight * 16 / 9);
42 |         optimumHeight = currentHeight;
43 |       }
44 |       that.$refs.videoWrap.style.width = optimumWidth + 'px';
45 |       that.$refs.videoWrap.style.height = optimumHeight + 'px';
46 | 
47 |       
48 |       if (videoArray.length > 1) {
49 |         videoArray.map(item => {
50 |           item.style.width = "50%";
51 |           item.style.height = "50%";
52 |         });
53 |       }
54 |       else {
55 |         videos[0].style.width = optimumWidth + 'px';
56 |         videos[0].style.height = optimumHeight + 'px';
57 |       }
58 |     }
59 |   },
60 | 
61 |   destroyed() {
62 |     window.removeEventListener('resize', this.handleResize, false);
63 |     window.onbeforeunload = null;
64 |     window.onunload = null;
65 |   },
66 | }


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Router from 'vue-router';
 3 | import Join from './views/Join.vue';
 4 | import Meeting from './views/Meeting.vue';
 5 | 
 6 | Vue.use(Router);
 7 | 
 8 | export default new Router({
 9 |   mode: 'history',
10 |   base: process.env.BASE_URL,
11 |   routes: [
12 |     {
13 |       path: '/',
14 |       name: 'Join',
15 |       component: Join,
16 |     },
17 |     {
18 |       // path: '/meet/:roomId/:isHoster',
19 |       path: '/meet/:roomId',
20 |       name: 'meeting',
21 |       // route level code-splitting
22 |       // this generates a separate chunk (about.[hash].js) for this route
23 |       // which is lazy-loaded when the route is visited.
24 |       component: Meeting,
25 |     },
26 |   ],
27 | });
28 | 


--------------------------------------------------------------------------------
/src/views/Join.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="ar-container" id="app">
  3 |     <div class="ar-main">
  4 |       <div class="meet-bg">
  5 | 
  6 |       </div>
  7 |       <div class="meet-form">
  8 |         <div class="meet-form_title">anyRTC多人音视频效果演示</div>
  9 |         <input type="text" v-model="roomId" class="meet-form_iput" autocomplete="off" placeholder="请输入房间号" @keyup.13="joinMeet">
 10 |         <button type="button" class="meet-form_submit" @click="joinMeet">加入会议</button>
 11 |       </div>
 12 |       <div class="meet-footer">
 13 |         <div class="meet-footer_item">v3.0.0</div>
 14 |         <div class="meet-footer_item">技术支持：<a href="">zhangjianqiang@dync.cc</a></div>
 15 |         <div class="meet-footer_item">anyRTC官网：<a href="https://www.anyrtc.io" target="_blank">www.anyrtc.io</a></div>
 16 |         <div class="meet-footer_item">
 17 |           <span><a data-v-3e91617f="" href="http://www.miitbeian.gov.cn" target="_blank">沪ICP备12034204号</a></span>
 18 |           <span style="margin-left: 18px;"><a data-v-3e91617f="" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31011002002733"><img src="https://console.anyrtc.io/static/img/gongan_logo.d0289dc0.png" style="padding: 0px 5px 0px 20px; vertical-align: bottom; width: 18px;">沪公网安备 31011002002733号</a></span>
 19 |         </div>
 20 |       </div>
 21 |     </div>
 22 |   </div>
 23 | </template>
 24 | 
 25 | <script>
 26 |   export default {
 27 |     name: 'ArMeeting',
 28 |     data() {
 29 |       return {
 30 |         roomId: '',
 31 |       }
 32 |     },
 33 |     watch: {
 34 |       roomId(val, oVal) {
 35 |         if (val) {
 36 |           let reg = /^[a-z0-9]+$/i;
 37 |           if (reg.test(val)) {
 38 | 
 39 |           } else {
 40 |             this.roomId = oVal;
 41 |           }
 42 |         }
 43 |       }
 44 |     },
 45 |     methods: {
 46 |       joinMeet() {
 47 |         if (this.roomId) {
 48 |           this.$router.push({
 49 |             path: `/meet/${this.roomId}`
 50 |           })
 51 |         }
 52 |         else {
 53 |           alert('请输入房间号');
 54 |         }
 55 |       }
 56 |     },
 57 |   };
 58 | </script>
 59 | 
 60 | <style lang="scss">
 61 |   .meet-bg {
 62 |     z-index: -1;
 63 |     width: 100%;
 64 |     height: 100%;
 65 |     object-fit: cover;
 66 |     background-image: url('../assets/img/bg.jpg');
 67 |   }
 68 | 
 69 |   .meet-form {
 70 |     position: fixed;
 71 |     padding: 0 80px;
 72 |     top: 50%;
 73 |     left: 50%;
 74 |     transform: translate(-50%, -50%);
 75 |     width:520px;
 76 |     height:360px;
 77 |     background:rgba(255,255,255,1);
 78 |     box-shadow:0px 8px 21px 0px rgba(102,138,255,0.18);
 79 |     border-radius:10px;
 80 |     box-sizing: border-box;
 81 |     z-index: 1;
 82 | 
 83 |     .meet-form_title {
 84 |       margin-top: 70px;
 85 |       margin-bottom: 60px;
 86 |       font-size:24px;
 87 |       font-family:PingFang-SC-Bold;
 88 |       font-weight:bold;
 89 |       color:#555;
 90 |       line-height:24px;
 91 |       text-align: center;
 92 |     }
 93 | 
 94 |     .meet-form_iput {
 95 |       display: block;
 96 |       padding: 0 20px;
 97 |       width: 100%;
 98 |       height: 50px;
 99 |       background:rgba(255,255,255,0.3);
100 |       border:1px solid rgba(221,221,221,1);
101 |       border-radius:4px;
102 |       font-size: 14px;
103 |       outline: none;
104 |       box-sizing: border-box;
105 |     }
106 | 
107 |     .meet-form_submit {
108 |       margin-top: 40px;
109 |       display: block;
110 |       width: 100%;
111 |       height:50px;
112 |       background:rgba(51,177,93,1);
113 |       border-radius:4px;
114 |       outline: none;
115 |       border: none;
116 |       color: #fff;
117 |       cursor: pointer;
118 |     }
119 |   }
120 | 
121 |   .meet-footer {
122 |     position: fixed;
123 |     width: 100%;
124 |     bottom: 0;
125 |     text-align: center;
126 |     
127 |     .meet-footer_item {
128 |       margin-bottom: 5px;
129 |       font-size: 12px;
130 |       color: #777;
131 |     }
132 | 
133 |   }
134 | </style>


--------------------------------------------------------------------------------
/src/views/Meeting.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="ar-container">
  3 |     <div class="ar-meet_side ar-aside">
  4 |       <div class="ar-container is-vertical">
  5 |         <div class="ar-meet_info">
  6 |           <div class="flex info_item isHoster1">
  7 |             <span class="inof_item_label">房间号：</span>
  8 |             <input type="text" v-model="roomId" id="meetId">
  9 |             <a @click="copyID('meetId')">复制</a>
 10 |           </div>
 11 |           <div class="flex info_item">
 12 |             <span class="inof_item_label">视频源:</span>
 13 |             <select class="ar-device_select" v-model="cameraDeviceId" @change="handleCameraChange">
 14 |               <option v-for="(camera, idx) in cameraList" :key="idx" :value="camera.value">{{camera.label}}</option>
 15 |             </select>
 16 |           </div>
 17 |           <div class="flex info_item">
 18 |             <span class="inof_item_label">音频源:</span>
 19 |             <select class="ar-device_select" v-model="micphoneDeviceId" @change="handleMicponeChange">
 20 |               <option v-for="(micphone, idx) in micphoneList" :key="idx" :value="micphone.value">{{micphone.label}}</option>
 21 |             </select>
 22 |           </div>
 23 |           <div class="video info_item">
 24 |             <div class="my_video" ref="myVideoView"></div>
 25 |             <span>本地视频窗口</span>
 26 |           </div>
 27 |           <div class="video info_item" v-if="screenSharing">
 28 |             <div class="my_video" ref="myScreenView"></div>
 29 |             <span>屏幕共享窗口</span>
 30 |           </div>
 31 |         </div>
 32 |         <div class="ar-meet_log_title">日志</div>
 33 |         <div class="ar-meet_box_background"></div>
 34 |         <div class="ar-main ar-log_view" ref="logView">
 35 |           <div class="ar-meet_log" ref="logList">
 36 |             <div :class="['ar-meet_log_item', {'error': log.type === 'error'}]" v-for="(log, n) in logs" :key="n">{{log.content}}</div>
 37 |           </div>
 38 |         </div>
 39 |         <div class="ar-meet_box_background"></div>
 40 |         <!-- <input type="number" v-model="startIndex"><input type="number" v-model="endIndex"><button @click="setShow">setShow</button> -->
 41 |       </div>
 42 |     </div>
 43 |     <!--  -->
 44 |     <div class="ar-main ar-meet_view">
 45 |       <div class="ar-container is-vertical">
 46 |         <!--  -->
 47 |         <div class="ar-meet_control">
 48 |           <div class="ar-meet_control_left">
 49 |             <button class="boxShow" v-if="!screenSharing" @click="shareScreen">屏幕共享</button>
 50 |             <button class="boxShow" v-else @click="stopShareScreen">结束屏幕共享</button>
 51 |           </div>
 52 | 
 53 |           <div class="ar-meet_control_right">
 54 |             <button :class="videoEnable ? 'on': 'off'" style="margin-left: 5px;" hollow @click="switchVideo">视频 ： {{ videoEnable ? '开' : '关' }}</button>
 55 |             <button :class="audioEnable ? 'on': 'off'" style="margin-left: 5px;" hollow @click="switchAudio">音频 ： {{ audioEnable ? '开' : '关' }}</button>
 56 |             <button class="signOut" style="margin-left: 5px;" @click="leaveMeet">退出</button>
 57 |           </div>
 58 |         </div>
 59 |         <!--  -->
 60 |         <h3>远程视频窗口</h3>
 61 |         <!--  -->
 62 |         <div class="ar-main">
 63 |           <div class="ar-video_view" ref="videoView">
 64 |             <div class="ar-video_wrap" ref="videoWrap">
 65 |               <!-- <div class="ar-video_box" v-for="(video, n) in videoList" :key="n" :id="video.id" :style="{'width': video.width, 'height': video.height}"> -->
 66 |                 <!-- <div>{{video.id}}</div> -->
 67 |               <!-- </div> -->
 68 |             </div>
 69 |           </div>
 70 |         </div>
 71 |       </div>
 72 |     </div>
 73 |   </div>
 74 | </template>
 75 | 
 76 | <script>
 77 | import MeetMixin from '@/mixins/MeetMixin';
 78 | import ArMeet from 'ar-meet';
 79 | import getScreenStream from 'ar-share-screen';
 80 | import config from '@/config';
 81 | 
 82 | export default {
 83 |   data() {
 84 |     return {
 85 |       endIndex: 0,
 86 |       Meet: null,
 87 |       broadCastId: '',
 88 |       isHoster: 0,
 89 |       roomId: '',           //房间ID
 90 |       logs: [],             //日志队列
 91 |       cameraList: [],       //视频驶入设备列表
 92 |       micphoneList: [],     //音频输入设备列表
 93 |       screenSharing: false, //屏幕共享中
 94 |       cameraDeviceId: '',
 95 |       micphoneDeviceId: '',
 96 |       videoEnable: true,
 97 |       audioEnable: true,
 98 |       videoList: [],
 99 |     }
100 |   },
101 |   
102 |   mixins: [MeetMixin],
103 | 
104 |   mounted() {
105 |     let that = this;
106 | 
107 |     let Meet = new ArMeet({
108 |       userId: 'user_' + parseInt(Math.random()*10e4),
109 |       userData: '{}',
110 |       meetMode: 0,//0 普通 1 主持人模式 2 ZOOM
111 |       logLevel: 'info',
112 |       audioMeet: false,
113 |       autoBitrate: true,//默认true，true为根据网络状况自适应码流，false为强制指定码率
114 |       // videoProfile: 'ARVideoProfile1080P',
115 |       videoProfile: 'ARVideoProfile360P',
116 |     });
117 | 
118 |     config.RTC_SERVER_URL && Meet.configServer(config.RTC_SERVER_URL);
119 | 
120 |     that.addLog('info', '方法：initEngine：初始化');
121 |     Meet.initAppInfo(config.APP_ID, config.APP_TOKEN);
122 | 
123 |     //加入房间成功
124 |     Meet.on("join-success", () => {
125 |       that.addLog('info', '回调：join-success: 加入房间成功');
126 |       that.Meet = Meet;
127 |       //刷新页面离开房间
128 |       window.onbeforeunload = function(e) { //窗口关闭事件,要考虑到滚动条的宽度，一般是20px
129 |         var event = e || window.event;
130 |         event.returnValue = "确认是否关闭当前网页";//点击关闭的时候给提示
131 |       }
132 |       // 退出会议
133 |       window.onunload = function (e) {
134 |         Meet.leaveRTC();
135 |       }
136 |     });
137 | 
138 |     //加入房间失败
139 |     Meet.on("join-failed", (code) => {
140 |       that.addLog('error', `回调：join-failed: 加入房间失败，错误码${code}`);
141 |     });
142 |     
143 |     //远程视频流打开
144 |     Meet.on("stream-subscribed", (peerId, pubId, userId, userData, mediaRender) => {
145 |       that.addLog('info', `回调：stream-subscribed: 远程人员加入 ${peerId} ${pubId}`);
146 | 
147 |       mediaRender.className = "ar-video_box";
148 |       mediaRender.id = "video-player_" + pubId;
149 |       that.$refs.videoWrap.appendChild(mediaRender);
150 |       
151 |       that.$nextTick(() => {
152 |         that.handleResize();
153 |       });
154 |     });
155 | 
156 |     //远程视频流断开
157 |     Meet.on("stream-unsubscribed", (peerId, pubId, userId, userData) => {
158 |       that.addLog('info', `回调：stream-unsubscribed: 远程人员离开 ${pubId}`);
159 |       document.getElementById("video-player_" + pubId) && document.getElementById("video-player_" + pubId).remove();
160 |       
161 |       that.$nextTick(() => {
162 |         that.handleResize();
163 |       });
164 |     });
165 | 
166 |     //远程屏幕共享流打开
167 |     Meet.on("exstream-subscribed", (peerId, pubId, userId, userData, mediaRender) => {
168 |       that.addLog('info', `exstream-subscribed: 远程屏幕共享打开`);
169 | 
170 |       mediaRender.className = "ar-video_box";
171 |       mediaRender.id = "video-player_" + pubId;
172 |       that.$refs.videoWrap.appendChild(mediaRender);
173 | 
174 |       that.$nextTick(() => {
175 |         that.handleResize();
176 |       });
177 |     });
178 | 
179 |     //远程屏幕共享流关闭
180 |     Meet.on("exstream-unsubscribed", (peerId, pubId, userData) => {
181 |       that.addLog('info', `回调：exstream-unsubscribed: 远程屏幕共享关闭 ${pubId}`);
182 |       document.getElementById("video-player_" + pubId) && document.getElementById("video-player_" + pubId).remove();
183 | 
184 |       that.$nextTick(() => {
185 |         that.handleResize();
186 |       });
187 |     });
188 | 
189 |     //打开共享通道结果
190 |     Meet.on("share-result", (ok) => {
191 |       that.addLog('info', `回调：share-result: 共享屏幕结果 ${ok}`);
192 |       if (ok) {
193 |         that.addLog('info', `获取屏幕共享流`);
194 |         getScreenStream().then(e => {
195 |           if (e === 'no-ready') {
196 |             that.Meet.closeShare(0);
197 |             alert(
198 |             '1. 请检查是否安装"anyRTC-ScreenShare"屏幕共享插件,如果没有请点击https://chrome.google.com/webstore/detail/anyrtc-screenshare/daiabbkkhgegdmhfpocaakcgbajnkgbp?hl=zh-CN下载\n' +
199 |             '2. 安装了屏幕共享插件，但是没有启用该插件。\n' + 
200 |             '说明：\n火狐浏览器或谷歌版本72以上无需安装插件。\n' +
201 |             '360、QQ平台也有对应的插件下载。');
202 |           }
203 |           else if (e === 'no-support') {
204 |             that.Meet.closeShare(0);
205 |             alert(`该浏览器不支持，请选择谷歌、火狐、QQ、360浏览器`);
206 |             that.addLog('error', `该浏览器不支持，请选择谷歌、火狐、QQ、360浏览器`);
207 |           }
208 |           else if (e === "user-cancel") {
209 |             that.Meet.closeShare(0);
210 |             alert(`共享被取消`);
211 |             that.addLog('error', `共享被取消`);
212 |           }
213 |           else if (e === "user-Denied") {
214 |             that.Meet.closeShare(0);
215 |             alert(`用户未授权`);
216 |             that.addLog('error', `用户未授权`);
217 |           }
218 |           else {
219 |             that.addLog('info', `获取屏幕共享流成功`);
220 |             Meet.startScreenCap(e.stream);
221 | 
222 |             let screenView = document.createElement('div');
223 |             screenView.id = "myScreen";
224 |             screenView.appendChild(e.video);
225 | 
226 |             that.screenSharing = true;
227 |             that.$nextTick(() => {
228 |               that.$refs.myScreenView.appendChild(screenView);
229 |             });
230 |           }
231 |         }).catch(err => {
232 |           that.addLog('error', `获取屏幕共享流失败`);
233 |           that.Meet.closeShare(0);
234 |           throw new Error(err);
235 |         });
236 |       } else {
237 |         alert('共享失败，请检查共享通道是否被占用');
238 |         that.addLog('error', `共享失败，请检查共享通道是否被占用`);
239 |       }
240 |     });
241 | 
242 |     //共享被打开
243 |     Meet.on("share-opened", (shareType, shareInfo, sharerUserId, sharerUserData) => {
244 |       that.addLog('info', `远程打开共享通道`);
245 |     });
246 | 
247 |     //共享被关闭
248 |     Meet.on("share-closed", () => {
249 |       that.addLog('info', `共享通道关闭`);
250 |       if (that.screenSharing) {
251 |         that.screenSharing = false;
252 |         document.getElementById('myScreen').remove();
253 |       }
254 |     });
255 |     
256 |     //
257 |     Meet.on("av-status", (isRemote, pubId, audioEnable, videoEnable) => {
258 |       console.log('av-status: ', isRemote, pubId, audioEnable, videoEnable);
259 |     });
260 |     //
261 |     Meet.on("audio-volume", (isRemote, pubId, audioLeval) => {
262 |       // console.log('audio-volume: ', isRemote, pubId, audioLeval);
263 |     });
264 |     //
265 |     Meet.on("network-status", (isRemote, pubId, videoBytes, ARNetQuality) => {
266 |       // console.log('network-status: ', isRemote, pubId, videoBytes, ARNetQuality);
267 |     });
268 | 
269 |     that.addLog('info', '方法：getDevices，获取设备列表');
270 |     Meet.getDevices().then(deviceInfo => {
271 |       that.cameraList = deviceInfo.videoinput;
272 |       that.micphoneList = deviceInfo.audioinput;
273 | 
274 |       that.cameraDeviceId = that.cameraList[that.cameraList.length - 1].value;
275 |       that.micphoneDeviceId = that.micphoneList[that.micphoneList.length - 1].value;
276 |       
277 |       that.addLog('info', `方法：setLocalVideoCapturer: 采集本地媒体流`);
278 |       Meet.setLocalVideoCapturer({
279 |         video: {
280 |           enable: true,
281 |           deviceId: that.cameraDeviceId
282 |         },
283 |         audio: {
284 |           enable: true,
285 |           deviceId: that.micphoneDeviceId
286 |         }
287 |       }).then(e => {
288 |         e.mediaRender.id = "myVideo";
289 |         this.$refs.myVideoView.appendChild(e.mediaRender);
290 |         Meet.joinRTC(that.roomId);
291 |       }).catch(err => {
292 |         console.log('打开摄像头失败：', err);
293 |         throw err;
294 |       });
295 |     });
296 |   },
297 | 
298 |   methods: {
299 |     //添加日志
300 |     addLog(type, strLog) {
301 |       this.logs.push({
302 |         type: type,
303 |         content: strLog
304 |       });
305 |       this.$nextTick(() => {
306 |         let logView = this.$refs.logView.getBoundingClientRect();
307 |         let logList = this.$refs.logList.getBoundingClientRect();
308 |         if (logList.height > logView.height) {
309 |           this.$refs.logView.scrollTop = (logList.height - logView.height);
310 |         }
311 |       });
312 |     },
313 |     //切换摄像头
314 |     handleCameraChange() {
315 |       let that = this;
316 |       that.addLog('info', `切换摄像头`);
317 |       that.Meet.switchDevice({
318 |         video: {
319 |           enable: that.videoEnable,
320 |           deviceId: that.cameraDeviceId
321 |         },
322 |         audio: {
323 |           enable: that.audioEnable,
324 |           deviceId: that.micphoneDeviceId
325 |         }
326 |       }).then(e => {
327 |         document.getElementById("myVideo").remove();
328 |         e.mediaRender.id = "myVideo";
329 |         that.$refs.myVideoView.appendChild(e.mediaRender);
330 |       }).catch(err => {
331 | 
332 |       });
333 |     },
334 |     //切换麦克风
335 |     handleMicponeChange() {
336 |       let that = this;
337 |       that.addLog('info', `切换麦克风`);
338 |       that.Meet.switchDevice({
339 |         video: {
340 |           enable: that.videoEnable,
341 |           deviceId: that.cameraDeviceId
342 |         },
343 |         audio: {
344 |           enable: that.audioEnable,
345 |           deviceId: that.micphoneDeviceId
346 |         }
347 |       }).then(e => {
348 |         document.getElementById("myVideo").remove();
349 |         e.mediaRender.id = "myVideo";
350 |         that.$refs.myVideoView.appendChild(e.mediaRender);
351 |       }).catch(err => {
352 | 
353 |       });
354 |     },
355 |     //屏幕共享
356 |     shareScreen () {
357 |       this.Meet && this.Meet.openShare(0);
358 |       this.addLog('info', `方法：openShare: 开启屏幕共享`);
359 |     },
360 |     //结束屏幕共享
361 |     stopShareScreen() {
362 |       this.addLog('info', `方法：openShare: 关闭屏幕共享`);
363 |       this.Meet && this.Meet.stopScreenCap();
364 |     },
365 |     //视频开关
366 |     switchVideo() {
367 |       let that = this;
368 |     
369 |       that.Meet && that.Meet.setLocalVideoEnable(that.videoEnable = !that.videoEnable);
370 |     },
371 |     //音频开关
372 |     switchAudio() {
373 |       this.Meet && this.Meet.setLocalAudioEnable(this.audioEnable = !this.audioEnable);
374 |     },
375 |     copyID(id){
376 |       document.getElementById(id).select();
377 |       document.execCommand("Copy");
378 |     },
379 |     leaveMeet() {
380 |       let that = this;
381 |       
382 |       if (confirm('确定离开房间吗？')) {
383 |         if (that.Meet) {
384 |           that.Meet.leaveRTC();
385 |           that.Meet = null;
386 |         }
387 |         that.$router.push('/');
388 |       }
389 |     },
390 |   },
391 |   destroyed(){
392 |     this.Meet && (this.Meet.leaveRTC(), this.Meet = null);
393 |   }
394 | }
395 | </script>
396 | 
397 | <style lang="scss">
398 | 
399 |   $videoBackground: #000;
400 | 
401 |   .ar-meet_side {
402 |     box-shadow: 1px 0 20px 0 rgba(0,0,0,.1);
403 |     z-index: 1;
404 |   }
405 | 
406 |   .ar-meet_info {
407 |     box-sizing: border-box;
408 |     height: auto;
409 |     padding: 25px 30px;
410 |     padding: 20px 30px 0px;
411 | 
412 |     .my_video {
413 |       width: 260px;
414 |       height: 135px;
415 |       overflow: hidden;
416 |       background-color: $videoBackground;
417 |     }
418 |     .info_item {
419 |       margin-bottom: 20px;
420 |       height: 34px;
421 |       line-height: 34px;
422 |       &:last-child { margin-bottom: 0; }
423 |       &.isHoster1{
424 |         // margin-bottom: 20px;
425 |         input{
426 |           padding-left: 15px;
427 |           font-size: 12px;
428 |           text-align: right;
429 |           color: #333;
430 |           background-color: transparent;
431 |           border: none;
432 |           outline: none;
433 |         }
434 |       }
435 |       .ar-device_select {
436 |         outline: none;
437 |         width: 180px;
438 |         height: 34px;
439 |         background:rgba(236,236,236,1);
440 |         border-radius:4px;
441 |         line-height: 34px;
442 |         vertical-align: middle;
443 |         border: none;
444 |         box-sizing: border-box;
445 |         padding: 0 8px;
446 |       }
447 | 
448 |       .inof_item_label {
449 |         font-size: 14px;
450 |         color: #333;
451 |       }
452 | 
453 |       &.flex {
454 |         display: flex;
455 |         justify-content: space-between;
456 |       }
457 |       &.video {
458 |         text-align: center;
459 |         height: auto;
460 |         span {
461 |           display: block;
462 |           margin-top: 8px;
463 |         }
464 |       }
465 |     }
466 |   }
467 |   .ar-meet_box_background{
468 |     height: 30px; 
469 |     background: #E5E7E9;
470 |   }
471 |   .ar-meet_log_title {
472 |     height: 44px;
473 |     line-height: 44px;
474 |     text-align: center;
475 |     font-size: 14px;
476 |     color: #333;
477 |     border-top: 1px solid #E5E7E9;
478 |     box-sizing: border-box;
479 |   }
480 |   .ar-log_view {
481 |     background-color: #E5E7E9;
482 |     .ar-meet_log {
483 |       padding: 0 30px;
484 |       overflow: hidden;
485 |       overflow-y: auto;
486 |       width: 100%;
487 |       box-sizing: border-box;
488 | 
489 |       .ar-meet_log_item {
490 |         margin-bottom: 10px;
491 |         font-size: 14px;
492 |         line-height: 18px;
493 |         color: #666;
494 |         word-break: break-word;
495 | 
496 |         &.error {
497 |           color: red;
498 |         }
499 |       }
500 |     }
501 |   }
502 | 
503 |   .ar-meet_view {
504 |     padding: 0 20px 20px;
505 |     background-color: #F6F6F6;
506 |   }
507 | 
508 |   .ar-meet_control {
509 |     margin: 17px 0 7px;
510 |     display: flex;
511 |     justify-content: space-between;
512 | 
513 |     button{
514 |       outline: none;
515 |       width:110px;
516 |       height:34px;
517 |       text-align: center;
518 |       border: none;
519 |       line-height: 34px;
520 |       background:rgba(255,255,255,1);
521 |       border-radius:4px;
522 |       font-size:12px;
523 |       margin-right: 10px;
524 |       color:rgba(102,102,102,1);
525 |       cursor: pointer;
526 |       &.boxShow{
527 |         box-shadow:0px 2px 8px 0px rgba(5,7,37,0.17);
528 |       }
529 |       &.on{
530 |         border:1px solid rgba(51,177,93,1);
531 |         color: rgba(51,177,93,1);
532 |       }
533 |       &.off{
534 |         border:1px solid rgba(227,76,76,1);
535 |         color: rgba(227,76,76,1);
536 |       }
537 |       &.signOut{
538 |         background:rgba(233,74,74,1);
539 |         color: #fff;
540 |       }
541 |     }
542 |   }
543 |   h3{
544 |     color: #333333;
545 |     height: 40px;
546 |     line-height: 40px;
547 |     font-size:16px;
548 |     margin-bottom: 10px !important;
549 |     font-weight:bold;
550 |   }
551 |   .ar-video_view {
552 |     display: flex;
553 |     align-items: center;
554 |     justify-content: center;
555 |     width: 100%; 
556 |     height: 100%;
557 | 
558 |     .ar-video_wrap {
559 |       display: flex;
560 |       flex-wrap: wrap;
561 |       align-items: center;
562 |       justify-content: center;
563 |       width: 100%; 
564 |       height: 100%;
565 |       overflow: hidden;
566 |       overflow-y: auto;
567 | 
568 |       .ar-video_box {
569 |         flex: 0 1 auto;
570 |         box-sizing: border-box;
571 |         overflow: hidden;
572 |         background-color: #000;
573 |         border-bottom: 1px solid #FFF;
574 |         position: relative;
575 |         &:nth-child(even) {
576 |           border-left: 1px solid #fff;
577 |         }
578 |         span{
579 |           position: absolute;
580 |           top: 10px;
581 |           display: inline-block;
582 |           width:100px;
583 |           height:32px;
584 |           line-height:32px;
585 |           font-size:12px;
586 |           color:rgba(255,255,255,1);
587 |           text-align: center;
588 |           background:rgba(29,34,40, .6);
589 |           border-radius:4px;
590 |           z-index: 1;
591 |           cursor: pointer;
592 |           &.full-screen{
593 |             left: 20px;
594 |           }
595 |           &.AR-code{
596 |             right: 20px;
597 |           }
598 |         }
599 |       }
600 |     }
601 |   }
602 |   ::-webkit-scrollbar {
603 |   width: 8px;
604 |   height: 8px;
605 |   }
606 |   ::-webkit-scrollbar-track {
607 |   background-color: transparent;
608 |   }
609 |   ::-webkit-scrollbar-thumb {
610 |   border-radius: 10px;
611 |   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
612 |   background-color: #DDD;
613 |   }
614 | </style>


--------------------------------------------------------------------------------
/tests/e2e/custom-assertions/elementCount.js:
--------------------------------------------------------------------------------
 1 | // A custom Nightwatch assertion.
 2 | // The assertion name is the filename.
 3 | // Example usage:
 4 | //
 5 | //   browser.assert.elementCount(selector, count)
 6 | //
 7 | // For more information on custom assertions see:
 8 | // http://nightwatchjs.org/guide#writing-custom-assertions
 9 | 
10 | exports.assertion = function elementCount(selector, count) {
11 |   this.message = `Testing if element <${selector}> has count: ${count}`;
12 |   this.expected = count;
13 |   this.pass = val => val === count;
14 |   this.value = res => res.value;
15 |   function evaluator(_selector) {
16 |     return document.querySelectorAll(_selector).length;
17 |   }
18 |   this.command = cb => this.api.execute(evaluator, [selector], cb);
19 | };
20 | 


--------------------------------------------------------------------------------
/tests/e2e/specs/test.js:
--------------------------------------------------------------------------------
 1 | // For authoring Nightwatch tests, see
 2 | // http://nightwatchjs.org/guide#usage
 3 | 
 4 | module.exports = {
 5 |   'default e2e tests': (browser) => {
 6 |     browser
 7 |       .url(process.env.VUE_DEV_SERVER_URL)
 8 |       .waitForElementVisible('#app', 5000)
 9 |       .assert.elementPresent('.hello')
10 |       .assert.containsText('h1', 'Welcome to Your Vue.js App')
11 |       .assert.elementCount('img', 1)
12 |       .end();
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   lintOnSave: false,
3 |   publicPath: "/ar-meet/",
4 |   devServer: {
5 |     https: true
6 |   }
7 | };
8 | 


--------------------------------------------------------------------------------