哪些网站可以做养殖的广告,2345是哪个公司的软件,微商城手机网站设计,aspx网站开发教程最近研究webrtc视频直播技术#xff0c;网上找了些教程最终都不太能顺利跑起来的#xff0c;可能是文章写的比较老#xff0c;使用的一些开源组件已经更新了#xff0c;有些配置已经不太一样了#xff0c;所以按照以前的步骤会有问题。折腾了一阵终于跑起来了#xff0c;… 最近研究webrtc视频直播技术网上找了些教程最终都不太能顺利跑起来的可能是文章写的比较老使用的一些开源组件已经更新了有些配置已经不太一样了所以按照以前的步骤会有问题。折腾了一阵终于跑起来了记录一下。一个简单的聊天室html页面这个页面使用simple-webrtc来实现webrtc的通讯simple-webrtc是对几个webrtc核心对象的封装所以使用这个会比较简单。!DOCTYPE html
html
headtitlewebrtc chat room /titlestylevideo {height: 200px;width: 200px;border: 1px solid cornflowerblue;border-radius: 3px;margin: 10px;}/style
/head
bodydivroomid: input idroomid typetext value/ input typebutton idbtnStart valuejoin room/divdivnick name: input id nickname readonlyreadonly type text value/divh3self:/h3video idlocalVideo/videodiv idremoteVideosh3remote clients:/h3/divscript srchttps://cdn.bootcss.com/jquery/3.3.0/jquery.min.js/scriptscript srcjs/simplewebrtc-with-adapter.bundle.js/scriptscript langjavascript$(#nickname).val(new Date().getTime()); var qs function (key) {return (document.location.search.match(new RegExp((?:^\\?|) key (.*?)(?|$))) || [, null])[1];};var roomid qs(roomid);if (roomid) {$(#roomid).val(roomid);}else {$(#roomid).val(99999);}// $(#roomid).val(roomid);var smUrl https://webrtc.xxx.com:8800;var webrtc new SimpleWebRTC({// the id/element dom element that will hold our videolocalVideoEl: localVideo,// the id/element dom element that will hold remote videosremoteVideosEl: remoteVideos,// immediately ask for camera accessautoRequestMedia: true,url: smUrl,nick: $(#nickname).val(),});webrtc.on(readyToCall, function () {// you can name it anythingconsole.log(connectioned .);});webrtc.on(createdPeer, function (peer) {console.log(createdPeer, peer, peer.nick );if (peer.nick) {alert(client peer.nick joined);}});webrtc.on(joinedRoom, (roomName ){console.log(joinedRoom, roomName );alert(joined room roomName );});webrtc.on(leftRoom, (roomName ){console.log(leftRoom, roomName );});webrtc.on(videoAdded, (videoEl, peer ){console.log(videoAdded, videoEl, peer );if (peer.nick) {alert(client peer.nick joined);}});webrtc.on(videoRemoved, (videoEl, peer ){console.log(videoRemoved, videoEl, peer );});$(#btnStart).click(function(){var roomId $(#roomid).val();webrtc.joinRoom(roomId); // alert(join room roomId success)})//$(#btnStart).click();/script
/body
/html
安装nginx并部署聊天室页面安装nginxsudo apt-get install nginx
配置nginxserver {listen 80;listen 443;server_name webrtc.xxx.com;location / {index index.html;root html/www;}ssl on;ssl_certificate /ssl/xxx.crt;ssl_certificate_key /ssl/xxx.key;ssl_session_timeout 5m;ssl_protocols TLSv1 TLSv1.1 TLSv1.2;ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;}
安装完成nginx后把上面的html页面使用nginx部署到服务器。注意需要走https因为chrome的设定不走https没法调用起摄像头跟麦克风。安装并配置signalmaster信令服务信令服务是用来在客户端之间传输webrtc的客户端信息。因为在webrtc建立p2p连接的时候需要对方客户端的相关信息所以需要一个渠道来转发客户端之间的信息。signalmaster是一个基于nodejs的服务使用socket.io实现websocket长连接。安装signalmaster:git clone https://github.com/simplewebrtc/signalmaster.git
配置signalmastercd signalmaster
cd config
vim development.json
//编辑
{isDev: true,server: {port: 8800,/* secure */: /* whether this connects via https */,secure: true,cert: /ssl/xxx.crt,key: /ssl/xxx.key,password: null},rooms: {/* maxClients */: /* maximum number of clients per room. 0 no limit */,maxClients: 0},stunservers: [{urls: stun:webrtc.xxx.com:3478}],turnservers: [{urls: [turn:webrtc.xxx.com:3478],username: abc,credential: 123,secret: ,expiry: 86400}]
}
~
这里主要注意的是也需要配置ssl证书证书使用上面nginx那个证书即可。另外trunserver如果设置了密码也需要配置正确的用户名跟密码。安装并配置coturn穿透服务我们的客户端一般都在局域网之内所以p2p连接建立的时候需要进行内网穿透。使用coturn建立turnserver作为穿透服务。安装coturn# deps
apt-get install -y \emacs-nox \build-essential \libssl-dev sqlite3 \libsqlite3-dev \libevent-dev \g \libboost-dev \libevent-dev
# download
wget https://github.com/coturn/coturn/archive/4.5.0.7.tar.gz
tar xvf 4.5.0.7.tar.gz
# build install
cd coturn-4.5.0.7
./configure --prefix/opt
make
make install
# env
echo export PATH/opt/bin:$PATH ~/.bashrc
source ~/.bashrc
配置coturncd coturn-4.5.0.7
vim coturn.conf
#server
listening-port3478
listening-ip
relay-ip
alt-listening-port0
external-ip
realmabc
# server-name{YOUR_SERVER_NAME}
no-tls
no-dtls
mobility
no-cli
verbose
fingerprint
# auth
lt-cred-mech
stale-nonce3600
# user
# 这里是演示不配置数据库通过 use{name}:{password} 方式配置
# userdb/opt/var/db/turndb
# 多用户则写多行
userabc:123
这里主要需要注意的是ip的配置listening-ip内网iprelay-ip内网ipexternal-ip外网ip。还有user配置了话信令服务器也要配置对应的用户名密码。运行所有服务运行信令服务cd signalmaster
node server.js
运行穿透服务器cd coturn-4.5.0.7
turnserver -c coturn.conf
访问一下nginx部署的静态页面就可以啦。开两个网页自己可以跟自己试一下最好找其他朋友试一下有的时候穿透服务没配置好的时候自己跟自己是可以的但是跟其他人就不可以了。参考Coturn: TURN and STUN Server5分钟快速打造WebRTC视频聊天Real-time communication for the webcoturnsignalmaster
