标签WebRTC

WebRtc

作者 在Nodejs, WebRTC 标签

https://appr.tc/

WebRTC adapter.js
github地址为:https://github.com/webrtc/adapter.
FYI: http://www.vue5.com/webrtc/webrtc.html
主要功能是隐藏像webkitRTCPeerConnection和mozRTCPeerConnection这样的前缀差异，并提供函数将MediaStream附加到HTML的或元素。
– 直接在代码中加入https://webrtc.github.io/adapter/adapter-latest.js
– npm install webrtc-adapter
使用时在JavaScript文件中加入一个模块
const adapter = require(‘webrtc-adapter’);
加载完成后既可以使用，例如可使用
console.log(adapter.browserDetails.browser);
or
import adapter from ‘webrtc-adapter’;
“child_process”: “^1.0.2”,
“fs”: “0.0.1-security”,
“webrtc-adapter”: “^7.5.1”,
“window”: “^4.2.7”
“net”: “^1.0.2”,
“tls”: “0.0.1”,

vue socket.io的github地址：https://github.com/MetinSeylan/Vue-Socket.io

npm install vue-socket.io --save
npm install socket.io-client --save

chrome里无法正常触发vue-socket.io中的connect回调,vue-socket.io使用到了大量es6的语法，考虑到原生es6在浏览器中的兼容性,导入babel-loader(nuxt cli中没有自带)，
{src: ‘@/plugins/vue-socket.io’, ssr: false}

webSocket连接的地址是固定的

在main.js中直接这样写
    Vue.use(new VueSocketIO({
      debug: true,
      connection: 'socket地址:端口号',
      vuex: {       // 不需要用到vuex这个可以不加
            store,
            actionPrefix: 'SOCKET_',
            mutationPrefix: 'SOCKET_'
      }
}))

socket可以与vuex结合使用

import store from'./yourstore'
Vue.use(VueSocketio,socketio('http://socketserver.com:1923'), store);

socket地址是静态的写法

mounted(){
this.$socket.emit('connect', 1)
}

npm install –save-dev @gauseen/nuxt-proxy
// nuxt.config.js

modules: [
// 请求代理配置，解决跨域
‘@gauseen/nuxt-proxy’,
],
proxyTable: {
‘/api’: { target: ‘http://example.com’, ws: false }
},
注：
/api ———————— 每个接口特定标识字段 [String]
target —————— 目标代理服务 [String]
ws —————————— 是否支持 websocket 代理 [Boolean]

mediasoup安装

作者 在Nodejs, Ubuntu, WebRTC 标签 ,

下载

git clone https://github.com/versatica/mediasoup-demo.git

cd mediasoup-demo

git checkout v3

 app客户端
broadcasters广播推流
server服务器端,媒体服务(管道通信)与信令服务

配置服务器

cd server

npm install

cp config.example.js config.js

// Listening hostname (just for gulp live task).
domain : process.env.DOMAIN || ‘localhost‘,
// Signaling settings (protoo WebSocket server and HTTP API server).
https :
{
listenIp : ‘0.0.0.0’,
// NOTE: Don’t change listenPort (client app assumes 4443).
listenPort : process.env.PROTOO_LISTEN_PORT || 4443,
// NOTE: Set your own valid certificate files.
tls :
{
cert : process.env.HTTPS_CERT_FULLCHAIN || ${__dirname}/certs/<strong><span style="color: #ff0000;">fullchain.pem</span></strong>,//证书
key : process.env.HTTPS_CERT_PRIVKEY || ${__dirname}/certs/<span style="color: #ff0000;"><strong>privkey.key</strong></span> //证书
}
},

// See https://mediasoup.org/documentation/v3/mediasoup/api/#WebRtcTransportOptions
webRtcTransportOptions :
{
listenIps :
[
{
ip : process.env.MEDIASOUP_LISTEN_IP || ‘1.2.3.4′,  //服务器IP或0.0.0.0,浏览器的传输
announcedIp : process.env.MEDIASOUP_ANNOUNCED_IP
}
],
initialAvailableOutgoingBitrate : 1000000,
minimumAvailableOutgoingBitrate : 600000,
maxSctpMessageSize : 262144,
// Additional options that are not part of WebRtcTransportOptions.
maxIncomingBitrate : 1500000
},

// See https://mediasoup.org/documentation/v3/mediasoup/api/#PlainRtpTransportOptions
plainRtpTransportOptions :
{
listenIp :
{
ip : process.env.MEDIASOUP_LISTEN_IP || ‘1.2.3.4‘, //普通的传输
announcedIp : process.env.MEDIASOUP_ANNOUNCED_IP
},
maxSctpMessageSize : 262144
}

/启动server
npm start

//客户端安装 app目录
npm install
npm install -g gulp-cli
gulp live //客户端
gulp dist //生成发布目录/server/public

启动nodejs服务
node app.js
nohup node app.js &
forever start app.js 推荐此方式

调试
node –inspect-brk server.js
chrome://inspect
再根据需要设置断点