├── static └── .gitkeep ├── .eslintignore ├── test └── unit │ ├── .eslintrc │ └── specs │ └── HelloWorld.spec.js ├── src ├── assets │ └── logo.png ├── main.js ├── components │ └── HelloWorld.vue └── App.vue ├── config ├── prod.env.js ├── test.env.js ├── dev.env.js └── index.js ├── .editorconfig ├── .gitignore ├── .postcssrc.js ├── .babelrc ├── index.html ├── README.md ├── .eslintrc.js ├── package.json └── index.js /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /build/ 2 | /config/ 3 | /dist/ 4 | /*.js 5 | /test/unit/coverage/ 6 | -------------------------------------------------------------------------------- /test/unit/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | }, 4 | "globals": { 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wxiaoshuang/webrtc/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /config/test.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const devEnv = require('./dev.env') 4 | 5 | module.exports = merge(devEnv, { 6 | NODE_ENV: '"testing"' 7 | }) 8 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | /test/unit/coverage/ 8 | 9 | # Editor directories and files 10 | .idea 11 | .vscode 12 | *.suo 13 | *.ntvs* 14 | *.njsproj 15 | *.sln 16 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"], 12 | "env": { 13 | "test": { 14 | "presets": ["env", "stage-2"] 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /test/unit/specs/HelloWorld.spec.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import HelloWorld from '@/components/HelloWorld' 3 | 4 | describe('HelloWorld.vue', () => { 5 | it('should render correct contents', () => { 6 | const Constructor = Vue.extend(HelloWorld) 7 | const vm = new Constructor().$mount() 8 | expect(vm.$el.querySelector('.hello h1').textContent) 9 | }) 10 | }) 11 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | demo 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | import ElementUI from 'element-ui' 6 | import 'element-ui/lib/theme-chalk/index.css' 7 | Vue.use(ElementUI) 8 | Vue.config.productionTip = false 9 | 10 | /* eslint-disable no-new */ 11 | new Vue({ 12 | el: '#app', 13 | components: { App }, 14 | template: '' 15 | }) 16 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # demo 2 | 3 | > A WebRTC project 4 | 5 | * npm install 安装依赖 6 | * node run start在本地的9000端口启动后端服务 7 | * npm run dev在8080端口开启前端项目 8 | * 使用http://localhost:8080访问项目，输入用户名和密码，进入聊天室，在用户列表里面点击互动可以选择其他用户进行视频互动(可以通过再开一个窗口，再输入用户名和密码来模拟多人) 9 | * 注意： 10 | - 这个项目启动了两个本地node服务器，socket.io的访问地址是后端服务器也就是http://localhost:9000,如果需要部署到线上，需要将src/APP.vue的joinRoom的方法中的socket的url替换成线上服务器的地址， 11 | - src/APP.vue的data的pcConfig为了测试用的是google的stun服务器和我们公司的turn服务器，到时候需要替换成你们线上的stun服务器和turn服务器 12 | ```javascript 13 | pcConfig: { 14 | 'iceServers': [ 15 | { 16 | 'url': 'stun:stun.l.google.com:19302' 17 | }, 18 | { 19 | 'url': 'turn:domain:port', 20 | 'username': 'xxx', 21 | 'credential': 'yyy' 22 | } 23 | ] 24 | } 25 | ``` 26 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // https://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parserOptions: { 6 | parser: 'babel-eslint' 7 | }, 8 | env: { 9 | browser: true, 10 | }, 11 | extends: [ 12 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 13 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 14 | 'plugin:vue/essential', 15 | // https://github.com/standard/standard/blob/master/docs/RULES-en.md 16 | 'standard' 17 | ], 18 | // required to lint *.vue files 19 | plugins: [ 20 | 'vue' 21 | ], 22 | // add your custom rules here 23 | rules: { 24 | // allow async-await 25 | 'generator-star-spacing': 'off', 26 | // allow debugger during development 27 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 85 | 86 | 96 | 97 | 98 | 114 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "wxiaoshuang <2177367028@qq.com>", 6 | "private": true, 7 | "scripts": { 8 | "build": "node build/build.js", 9 | "start": "node index", 10 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js" 11 | }, 12 | "dependencies": { 13 | "element-ui": "^2.4.8", 14 | "express": "^4.16.4", 15 | "socket.io": "^2.1.1", 16 | "socket.io-client": "^2.1.1", 17 | "vue": "^2.5.2" 18 | }, 19 | "devDependencies": { 20 | "autoprefixer": "^7.1.2", 21 | "babel-core": "^6.22.1", 22 | "babel-eslint": "^8.2.1", 23 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 24 | "babel-loader": "^7.1.1", 25 | "babel-plugin-syntax-jsx": "^6.18.0", 26 | "babel-plugin-transform-runtime": "^6.22.0", 27 | "babel-plugin-transform-vue-jsx": "^3.5.0", 28 | "babel-preset-env": "^1.3.2", 29 | "babel-preset-stage-2": "^6.22.0", 30 | "chalk": "^2.0.1", 31 | "copy-webpack-plugin": "^4.0.1", 32 | "css-loader": "^0.28.0", 33 | "eslint": "^4.15.0", 34 | "eslint-config-standard": "^10.2.1", 35 | "eslint-friendly-formatter": "^3.0.0", 36 | "eslint-loader": "^1.7.1", 37 | "eslint-plugin-import": "^2.7.0", 38 | "eslint-plugin-node": "^5.2.0", 39 | "eslint-plugin-promise": "^3.4.0", 40 | "eslint-plugin-standard": "^3.0.1", 41 | "eslint-plugin-vue": "^4.0.0", 42 | "extract-text-webpack-plugin": "^3.0.0", 43 | "file-loader": "^1.1.4", 44 | "friendly-errors-webpack-plugin": "^1.6.1", 45 | "html-webpack-plugin": "^2.30.1", 46 | "node-notifier": "^5.1.2", 47 | "optimize-css-assets-webpack-plugin": "^3.2.0", 48 | "ora": "^1.2.0", 49 | "portfinder": "^1.0.13", 50 | "postcss-import": "^11.0.0", 51 | "postcss-loader": "^2.0.8", 52 | "postcss-url": "^7.2.1", 53 | "rimraf": "^2.6.0", 54 | "semver": "^5.3.0", 55 | "shelljs": "^0.7.6", 56 | "uglifyjs-webpack-plugin": "^1.1.1", 57 | "url-loader": "^0.5.8", 58 | "vue-loader": "^13.3.0", 59 | "vue-style-loader": "^3.0.1", 60 | "vue-template-compiler": "^2.5.2", 61 | "webpack": "^3.6.0", 62 | "webpack-bundle-analyzer": "^2.9.0", 63 | "webpack-dev-server": "^2.9.1", 64 | "webpack-merge": "^4.1.0" 65 | }, 66 | "engines": { 67 | "node": ">= 6.0.0", 68 | "npm": ">= 3.0.0" 69 | }, 70 | "browserslist": [ 71 | "> 1%", 72 | "last 2 versions", 73 | "not ie <= 8" 74 | ], 75 | "proxy": "http://localhoost:9000" 76 | } 77 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.3.1 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | 7 | module.exports = { 8 | dev: { 9 | 10 | // Paths 11 | assetsSubDirectory: 'static', 12 | assetsPublicPath: '/', 13 | proxyTable: {}, 14 | 15 | // Various Dev Server settings 16 | host: 'localhost', // can be overwritten by process.env.HOST 17 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 18 | autoOpenBrowser: false, 19 | errorOverlay: true, 20 | notifyOnErrors: true, 21 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 22 | 23 | // Use Eslint Loader? 24 | // If true, your code will be linted during bundling and 25 | // linting errors and warnings will be shown in the console. 26 | useEslint: true, 27 | // If true, eslint errors and warnings will also be shown in the error overlay 28 | // in the browser. 29 | showEslintErrorsInOverlay: false, 30 | 31 | /** 32 | * Source Maps 33 | */ 34 | 35 | // https://webpack.js.org/configuration/devtool/#development 36 | devtool: 'cheap-module-eval-source-map', 37 | 38 | // If you have problems debugging vue-files in devtools, 39 | // set this to false - it *may* help 40 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 41 | cacheBusting: true, 42 | 43 | cssSourceMap: true 44 | }, 45 | 46 | build: { 47 | // Template for index.html 48 | index: path.resolve(__dirname, '../dist/index.html'), 49 | 50 | // Paths 51 | assetsRoot: path.resolve(__dirname, '../dist'), 52 | assetsSubDirectory: 'static', 53 | assetsPublicPath: '/', 54 | 55 | /** 56 | * Source Maps 57 | */ 58 | 59 | productionSourceMap: true, 60 | // https://webpack.js.org/configuration/devtool/#production 61 | devtool: '#source-map', 62 | 63 | // Gzip off by default as many popular static hosts such as 64 | // Surge or Netlify already gzip all static assets for you. 65 | // Before setting to `true`, make sure to: 66 | // npm install --save-dev compression-webpack-plugin 67 | productionGzip: false, 68 | productionGzipExtensions: ['js', 'css'], 69 | 70 | // Run the build command with an extra argument to 71 | // View the bundle analyzer report after build finishes: 72 | // `npm run build --report` 73 | // Set to `true` or `false` to always turn it on or off 74 | bundleAnalyzerReport: process.env.npm_config_report 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var express = require('express') 2 | var app = express() 3 | var server = require('http').Server(app) 4 | var io = require('socket.io')(server) 5 | var path = require('path') 6 | app.use(express.static('dist')) 7 | app.get('/', function (req, res) { 8 | res.sendFile(path.resolve(__dirname, './index.html')) 9 | }) 10 | let clients = [] 11 | io.on('connection', function (socket) { 12 | let query = socket.handshake.query 13 | let username = query.username 14 | let room = query.room 15 | console.log(username + '连接了') 16 | if (clients.some(v => v.userId === socket.id)) { 17 | return 18 | } 19 | socket.join(room) 20 | clients.push({userId: socket.id, username}) 21 | if (clients.length >= 2) { 22 | io.sockets.in(room).emit('ready') 23 | } 24 | socket.emit('joined') 25 | socket.broadcast.to(room).emit('join', {username}) 26 | io.sockets.in(room).emit('clients', clients) 27 | socket.on('message', function (data) { 28 | socket.broadcast.to(room).emit('message', data) 29 | }) 30 | // 收到对等连接创建的消息 31 | socket.on('pc message', function (data) { 32 | socket.to(data.to.userId).emit('pc message', data) 33 | // socket.broadcast.to(room).emit('pc message', data); 34 | }) 35 | // 发私信,发起视频互动的请求 36 | socket.on('interact', function (data) { 37 | socket.to(data.to.userId).emit('interact', data) 38 | }) 39 | // 对方同意视频互动 40 | socket.on('agree interact', function (data) { 41 | socket.to(data.from.userId).emit('agree interact', data) 42 | // 更新互动的状态 43 | // clients = clients.map(v => { 44 | // if (v.userId === data.from.userId || v.userId === data.to.userId) { 45 | // return {...v, isLive: true} 46 | // } else { 47 | // return v; 48 | // } 49 | // }) 50 | // io.sockets.in(room).emit('clients',clients); 51 | }) 52 | socket.on('refuse interact', function (data) { 53 | socket.to(data.from.userId).emit('refuse interact', data) 54 | }) 55 | socket.on('stop interact', function (data) { 56 | socket.to(data.to.userId).emit('stop interact', data) 57 | // // 更新互动的状态 58 | // clients = clients.map(v => { 59 | // if (v.userId === data.from.userId || v.userId === data.to.userId) { 60 | // return {...v, isLive: true} 61 | // } else { 62 | // return v; 63 | // } 64 | // }) 65 | // io.sockets.in(room).emit('clients',clients); 66 | }) 67 | socket.on('leave', function (data) { 68 | socket.emit('left') 69 | socket.broadcast.to(room).emit('leave', { userId: socket.id, username }) 70 | clients = clients.filter(v => v.userId !== socket.id) 71 | io.sockets.in(room).emit('clients', clients) 72 | }) 73 | socket.on('disconnect', function () { 74 | console.log(username + '断开连接了') 75 | clients = clients.filter(v => v.userId !== socket.id) 76 | io.sockets.in(room).emit('clients', clients) 77 | }) 78 | }) 79 | server.listen(9000, function () { 80 | console.log('app is listening to 9000') 81 | }) 82 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 81 | 82 | 452 | 453 | 509 | --------------------------------------------------------------------------------