webrtc终极版（一）5分钟搭建多人实时会议系统webrtc
webrtc终极版（一），支持https，在线部署【不是本地demo】，采用RTCMultiConnection官方demo，5分钟即可搭建成功
@
前言
webrtc现在简直是太火了，几乎涵盖了我们行业的方方面面，他的诱人之处在于，他是p2p通信，几乎不怎么耗费服务器流量
本文是webrtc系列的第一篇，您没看错，就是5分钟即可搭建成功，多一分钟算我输，如果您的要求比较低，甚至可以将这个直接使用起来，但是我强烈建议您不要这样做
能研究到webrtc的，一般不会是刚入门的小菜鸟，起码是技术骨干级别，所以我强烈建议您完成整个系列文章的阅读，再这个系列文章里我们将会学到以下内容
第一篇：采用RTCMultiConnection官方demo，5分钟搭建起来webrtc
第二篇：搭建自己的iceserver服务器，并用到RTCMultiConnection的demo中
第三篇：将官方RTCMultiConnection的demo部署到自己的服务器中
第四篇：如果不用第三方RTCMultiConnection，裸写一个怎么样
我们做事情，比方说webrtc这样的事情，领导可能再催着我们，再等着看效果，所以，如果我们上来就慢慢研究原理，可能两三天过去了，也没有搞定，这样我们心里就会发慌，工作内容总不能一直写研究webrtc吧，所以上来先完成一个demo，并能正常运行，就显得非常重要了。
一、webrtc是什么？
能看到这篇文章的，相信几乎没有不知道什么是webrtc的了，但是作为文章的重要组成部分，还是需要介绍下什么是webrtc。
它（WebRTC）允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输
这是 MDN 上对 WebRTC 的描述，初次接触时无法理解 WebRTC 为什么要和 WebSocket 搭配，明明说的很清楚 不借助中间媒介 ，那 WebSocket 充当的是什么角色？整个 WebRTC 通话建立的流程又是怎样的？
上面的问题是个大的话题，原理介绍我准备放到第四篇章进行,本篇文章，我们就只有一个目的，那就是5分钟搭建一个webrtc，enjoy it！
二、搭建demo步骤
1.代码内容
啥都不说了，直接上代码：
<!DOCTYPETYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Conference</title>
</head>
<body>
<button id="btn-open-room">Open Room</button>
<button id="btn-join-room">Join Room</button>
<!-- Include RTCMultiConnectionClient.js -->
<script src="https://muazkhan.com:9001/dist/RTCMultiConnection.min.js"></script>
<script src="https://muazkhan.com:9001/socket.io/socket.io.js"></script>
<script>
var connection = new RTCMultiConnection();
// this line is VERY_important
connection.socketURL = 'https://muazkhan.com:9001/';
// all below lines are optional; however recommended.
connection.session = {
audio: true,
video: true
};
connection.sdpConstraints.mandatory = {
OfferToReceiveAudio: true,
OfferToReceiveVideo: true
};
connection.onstream = function(event) {
debugger;
document.body.appendChild( event.mediaElement );
};
var predefinedRoomId = 'testroom';
// first step, ignore default STUN+TURN servers
connection.iceServers = [];
connection.iceServers.push({
urls: 'stun:muazkhan.com:3478',
credential: 'muazkh',
username: 'hkzaum'
});
connection.iceServers.push({
urls: 'turns:muazkhan.com:5349',
credential: 'muazkh',
username: 'hkzaum'
});
connection.iceServers.push({
urls: 'turn:muazkhan.com:3478',
credential: 'muazkh',
username: 'hkzaum'
});
document.getElementById('btn-open-room').onclick = function() {
this.disabled = true;
connection.open( predefinedRoomId );
};
document.getElementById('btn-join-room').onclick = function() {
this.disabled = true;
connection.join( predefinedRoomId );
};
</script>
</body>
</html>
2.运行效果
第一个界面：运行页面后的初始界面
第二个界面，点击open room，并同意音视频采集请求
第三个界面:点击jon room按钮的效果
第四个界面：多人点击join room按钮的效果
总结
以上html，您可以再本地直接打开运行，本地打开，那就只能内网测试了，同时，您也可以把这个html放到公网上，注意是必须https，否则浏览器会阻止音视频的打开
本文是webrtc的开篇，是不是感觉非常的轻松，并且对webrtc充满信心了呢？这个第三方的组件，是支持多人音视频聊天的，非常的强大，后续几篇我们会深入讨论。
同时也欢迎您关注爱自律官方微信公众号，同时体验爱自律小程序的使用，让我们一起爱上自律，拥抱自由吧。
webrtc终极版（一）5分钟搭建多人实时会议系统webrtc的更多相关文章
- 讲解开源项目：5分钟搭建私人Java博客系统
本文适合刚学习完 Java 语言基础的人群,跟着本文可了解和运行 Tale 项目.示例均在 Windows 操作系统下演示 本文作者:HelloGitHub-秦人 HelloGitHub 推出的< ...
- 10分钟搭建服务器集群——Windows7系统中nginx与IIS服务器搭建集群实现负载均衡
分布式,集群,云计算机.大数据.负载均衡.高并发······当耳边响起这些词时,做为一个菜鸟程序猿无疑心中会激动一番(或许这是判断是否是一个标准阿猿的标准吧)! 首先自己从宏观把控一下,通过上网科普自 ...
- 2分钟实现一个Vue实时直播系统
前言 我们在不敲代码的时候可能会去看游戏直播,那么是前台怎么实现的呢?下面我们来讲一下.第一步,购买云直播服务 首先,你必须去阿里云或者腾讯云注册一个直播服务.也花不了几个钱,练手的话,几十块钱就够了 ...
- 08重编终极版《东邪西毒：终极版》DVD粤语中字
1.东邪西毒].Ashes.of.Time.1994.384p.DVDRip.x264.ac3-DTMM.mkv 这个版本最清晰 ,可惜删减了,只有87分钟,粤语,1.4G. 2.东邪西毒(初始版). ...
- 5分钟搭建 nginx +php --------------(LNMP)新手专用
5分钟搭建 nginx +php --------------(LNMP)新手专用 2014-11-14 16:48 88876人阅读 评论(2) 收藏 举报 版权声明:本文为博主原创文章,未经博主允 ...
- LAMP-五分钟搭建个人论坛
LAMP-五分钟搭建个人论坛 系统版本:CentOS7 1.##安装lamp及依赖软件wget http://repo.mysql.com/mysql-community-release-el7-5. ...
- 阿里官方Java代码规范标准《阿里巴巴Java开发手册 终极版 v1.3.0》
终极版 v1.3.0 2017年开春之际,阿里诚意献上重磅大礼:<阿里巴巴Java开发手册>,首次公开阿里官方Java代码规范标准.这套Java统一规范标准将有助于提高行业编码规范化水平, ...
- 一分钟搭建Vue2.0+Webpack2.0多页面项目
想要自己一步步搭建的比较麻烦,不是很推荐,最少也要使用vue-cli,在其基础上开始搭建,今天我的主题是一分钟搭建,那么常规方法肯定不能满足的, 而我用的方法也很简单,就是使用已经配置完成的demo模 ...
- python3 购物车 增改查终极版~
还是先来条NLP再说,快没了,以后想抄还没有... 十一,没有挫败,只有回应讯息 “挫败”只是指出过去的做法得不到预期的效果,是给我们需要改变的信号. “挫败”只是在事情画上句号时才能用上,欲想事情解 ...
- Go版GTK：环境搭建(windows)
Go版GTK:环境搭建(windows) https://blog.csdn.net/tennysonsky/article/details/79221507 所属专栏: Go语言开发实战 1 ...
随机推荐
- 一、@Configuration、@Conponent 、@ComponentScan 注解等
一句话概括 区别: @Configuration 中所有带 @Bean 注解的方法都会被动态代理,因此调用该方法返回的都是同一个实例.2. 可以直接调用方法,不需要 @Autowired 注入后使用. ...
- RabbitMQ的ack机制
1.什么是消息确认ACK. 答:如果在处理消息的过程中,消费者的服务器在处理消息的时候出现异常,那么可能这条正在处理的消息就没有完成消息消费,数据就会丢失.为了确保数据不会丢失,RabbitMQ支持消 ...
- C#查找算法1：二分查找
二分查找也称折半查找(Binary Search),它是一种效率较高的查找方法.但是,折半查找要求线性表必须采用顺序存储结构,而且表中元素按关键字有序排列. 原理:将n个元素分成个数大致相同的两半,取 ...
- 基于python的药店药品信息管理系统-毕业设计-课程设计
基于python+django+vue.js开发的药店信息管理系统 功能介绍 平台采用B/S结构,后端采用主流的Python语言进行开发,前端采用主流的Vue.js进行开发. 功能包括:药品管理.分类 ...
- ASIC 功能验证VTB
目标 设计流程 验证设计文档和RTL code之间的关系 RTL code(DUT) - 可以当作是一个黑盒,DUT内部是完全不可见的 白盒验证 - DUT内部RTL完全可见 灰盒验证 - DUT内部 ...
- Python Code_06基础篇
条件表达式 # coding:utf-8 # author : 写bug的盼盼 # development time : 2021/8/28 7:38 num_a = input('请输入第一个整数' ...
- [转帖]技术分享| MySQL 的 AWR Report？— MySQL 状态诊断报告
https://segmentfault.com/a/1190000039959767 作者:秦福朗 爱可生 DBA 团队成员,负责项目日常问题处理及公司平台问题排查.热爱 IT,喜欢在互联网 ...
- [转帖]Linux运维常用150个命令
Linux运维常用150个命令 转载自:www.cnblogs.com/bananaaa/p/7774467.html 命令 功能说明 线上查询及帮助命令(2个) man 查看命令帮助,命令的词典,更 ...
- 一个简单的科普-延迟与RT时间
一个简单的科普-延迟与RT时间 背景 发现稍微一复杂就没人看. 这次像是写一个简单的科普文章. 主要说一下网络延迟还有网络的响应时间. 这里想通过一个题目进行引申. 如果Skylink全球商用: 中国 ...
- 【转帖】基于官方rpm包方式安装Oracle19c
https://blog.whsir.com/post-5489.html 本文基于Centos7.x环境,通过官方提供的rpm包来安装19c 1.下载Oracle19c安装包 https://w ...