12┃音视频直播系统之 WebRTC 实现1对1直播系统实战
一、搭建 Web 服务器
前面我们已经实现过,但是没有详细说HTTPS服务
首先需要引入了
express
库,它的功能非常强大,用它来实现 Web 服务器非常方便同时还需要引入
HTTPS
服务,并让 Web 服务运行于 HTTPS 之上即可
var https = require('https');
var express = require('express');
var serveIndex = require('serve-index');
// 使用 express 实现 WEB 服务
var app = express();
app.use(serveIndex('./public'));
app.use(express.static('./public'));
//HTTPS 证书和密钥文件
var options = {
key : fs.readFileSync('./cert/www.autofelix.cn.key'),
cert: fs.readFileSync('./cert/www.autofelix.cn.pem')
}
//https server
var https_server = https.createServer(options, app);
var io = socketIo.listen(https_server);
https_server.listen(443, '0.0.0.0');
二、实现信令系统
信令系统超级重要,直播系统中,由谁来发起呼叫、什么时间发 SDP 等各种操作都是由信令控制的
客户端命令︰
join
用户加入房间、leave
用户离开房间、message
端到端命令服务端命令︰
joined
用户已加入、leaved
用户已离开、other_joined
其他用户已加入、bye其他用户已离开、full
房间已满在初始时,客户端处于
init/leaved
状态,在该状态下用户只能发送 join 消息服务端收到 join 消息后,会返回 joined 消息,此时客户端为 joined 状态
如果用户离开房间,那客户端又回到了初始状态
如果客户端收到
second user join
消息,则切换到joined_conn
状态,该状态下可以进行通话如果客户端收到
second user leave
消息,则切换到joined_unbind
状态,该状态与 joined 状态基本一致
三、搭建 TURN 服务器
其中最重要的 TURN 服务。它有两个作用,一是提供 STUN 服务,客户端可以通过 STUN 服务获取自己的外网地址;二是提供数据中继服务
目前最著名的 TURN 服务器是由 Google 发起的开源项目
coturn
︰https://github.com/coturn/coturncoturn 的编译安装与部署步骤如下︰
// 下载源码
git clone https://github.com/coturn/coturn.git
// 编译, 生成 Makefile
./configure --prefix=/usr/local/coturn
// 安装
make && make install
// 关于 coturn 服务配置
listening-port=3478 // 指定侦听的端口
external-ip=147.104.34.27 // 指定云主机的公网ip地址
user=username:password // 访问stun/turn服务的用户名和密码
realm=stun.xxx.cn // 域名,这个必须设置
四、视频直播之音视频数据的采集
第一步通过 getUserMedia 就可以获取到音视频数据
以前是在浏览器显示页面时就开始采集,而现在则是在用户点击
Connect Sig Server
按钮时才开始采集音视频数据信令系统建立好后,后面的逻辑都是围绕着信令系统建立起来的,
RTCPeerConnection
对象也不例外在客户端,用户要想与远端通话,首先要发送 join 消息,也就是要先进入房间,如果服务器判定用户是合法的,则会给客户端回 joined 消息
客户端收到 joined 消息后,就要创建 RTCPeerConnection 对象了,也就是要建立一条与远端通话的音视频数据传输通道
我们需要设置 TURN 服务器地址、用户名和密码,这样当 RTCPeerConnection 通过 P2P 建立连接失败时,就会使用 TURN 服务器进行数据中继
RTCPeerConnection
对象创建好后,我们要将前面获取的音视频数据与它绑定到一起,这样才能通过RTCPeerConnection
对象将音视频数据传输出去
var pcConfig = {
'iceServers': [{ // 指定 ICE 服务器信令
'urls': 'turn:stun.al.learningrtc.cn:3478', //turn 服务器地址
'credential': "passwd", //turn 服务器密码,你要用自己的
'username': "username" //turn 服务器用户名,你要用自己的
}]
};
function createPeerConnection(){
if(!pc){
pc = new RTCPeerConnection(pcConfig); // 创建 peerconnection 对象
pc.ontrack = getRemoteStream; // 当远端的 track 到来时会触发该事件
}else {
console.log('the pc have be created!');
}
return;
}
// 将获取的音视频数据与 RTCPeerConnection 绑定到一起
function bindTracks(){
//add all track into peer connection
localStream.getTracks().forEach((track)=>{
pc.addTrack(track, localStream); // 将 track 与 peerconnection 绑定
});
}
五、视频直播之音视频的渲染与播放
按照上面的步骤,音视频数据就可以被采集到了,
RTCPeerConnection
对象也创建好了,通过信令服务器也可以将各端的Candidate
交换完成了此时在 WebRTC 的底层就会进行连通性检测,它首先判断通信的双方是否在同一个局域网内
如果在同一个局域网内,则让双方直接进行连接
如果不在同一局域网内,则尝试用P2P 连接
如果仍然不成功,则使用 TURN 服务进行数据中继
一旦数据连通后,数据就从一端源源不断地传到了远端,此时远端只需要将数据与播放器对接,就可以看到对端的视频、听到对方的声音了
当数据流过来的时候会触发
RTCPeerConnection
对象的ontrack
事件只要我们侦听该事件,并在回调函数中将收到的
track
与<video>
标签绑定到一起即可
var remoteVideo = document.querySelector('video#remotevideo');
pc = new RTCPeerConnection(pcConfig);
pc.ontrack = getRemoteStrea // 当远端的 track 过来时触发该事件
function getRemoteStream(e){ // 事件处理函数
remoteStream = e.streams[0]; // 保存远端的流
remoteVideo.srcObject = e.streams[0]; // 与 HTML 中的视频标签绑定
}
12┃音视频直播系统之 WebRTC 实现1对1直播系统实战的更多相关文章
- WebRTC 音视频开发
WebRTC 音视频开发 webrtc Android IOS WebRTC 音视频开发总结(七八)-- 为什么WebRTC端到端监控很关键? 摘要: 本文主要介绍WebRTC端到端监控(我们翻译 ...
- 转:Android IOS WebRTC 音视频开发总结 (系列文章集合)
随笔分类 - webrtc Android IOS WebRTC 音视频开发总结(七八)-- 为什么WebRTC端到端监控很关键? 摘要: 本文主要介绍WebRTC端到端监控(我们翻译和整理的,译 ...
- 鹅厂优文|打通小程序音视频和webRTC
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:腾讯视频云终端技术总监常青, 2008 年毕业加入腾讯,一直从事客户端研发相关工作,先后参与过 PC QQ.手机QQ.QQ物联 等产品 ...
- 腾讯技术分享:微信小程序音视频与WebRTC互通的技术思路和实践
1.概述 本文来自腾讯视频云终端技术总监rexchang(常青)技术分享,内容分别介绍了微信小程序视音视频和WebRTC的技术特征.差异等,并针对两者的技术差异分享和总结了微信小程序视音视频和WebR ...
- (转)C++实现RTMP协议发送H.264编码及AAC编码的音视频,摄像头直播
转:http://www.cnblogs.com/haibindev/archive/2011/12/29/2305712.html C++实现RTMP协议发送H.264编码及AAC编码的音视频 RT ...
- Android IOS WebRTC 音视频开发总结(三二)-- WebRTC项目开发建议
本文主要介绍WEBRTC开发过程中的一些现象,文章来自博客园RTC.Blacker,支持原创,欢迎关注微信公众号blacker,更多详见www.rtc.help 随着移动互联网和智能硬件的快速发展,音 ...
- RTMP协议发送H.264编码及AAC编码的音视频,实现摄像头直播
RTMP(Real Time Messaging Protocol)是专门用来传输音视频数据的流媒体协议,最初由Macromedia 公司创建,后来归Adobe公司所有,是一种私有协议,主要用来联系F ...
- WebRTC 音视频同步原理与实现
所有的基于网络传输的音视频采集播放系统都会存在音视频同步的问题,作为现代互联网实时音视频通信系统的代表,WebRTC 也不例外.本文将对音视频同步的原理以及 WebRTC 的实现做深入分析. 时间戳 ...
- C++实现RTMP协议发送H.264编码及AAC编码的音视频
http://www.cnblogs.com/haibindev/archive/2011/12/29/2305712.html C++实现RTMP协议发送H.264编码及AAC编码的音视频 RTMP ...
随机推荐
- 每日所学之自学习大数据的Linux环境配置2
今天设置网络 出现报错 明天找时间解决 不用解决了 刚才试了以下 又能下载了 描述一下问题: cannot find a valid baseurl for repo:base/7/x86_64 如果 ...
- 【每日日报】第五十三天---安装My SQL
1 2今天安装了My SQL并学习了一些基础的命令 mysql下载及安装教程 2 没有成功安装SQL Server,误删了一些文件 3 明天继续看视频 ------------------------ ...
- java中switch结构和 while for循环的用法
6.2 switch结构: 变量可以是:variable can be:(mark: tried, can not be long) char/int/short/byte(java1.7 就可 ...
- 小程序预览图片wx.previewImage
效果图: ====> ==> 代码: <image mode='aspectFill' bindtap='previewImage' data-src='{{dataList ...
- linux(Ubuntu)安装python
Linux下安装python 提前安装一个依赖环境 (1)ubuntu/Debian: sudo apt-get install -y gcc make cmake build-essential l ...
- 模拟FCFS调度算法(先来先服务)
文章目录 一.FCFS的介绍 二.代码演示 三.代码分析 1.使用节点模拟进程 2.SimulateFCFS(核心模拟FCFS类) 3.创建一个节点为n的队列(模拟就绪队列) 4.核心计算分析 5.输 ...
- Mybatis-Dao层实现(通过代理方式)
1.代理方式开发是主流 2.Mapper接口开发方法只需要编写Mapper接口(相当于Dao接口),然后由Mybatis根据接口创建动态代理对象 Mapper接口开发需要遵循以下规范 一一对应 Use ...
- 时间篇之linux系统时间和RTC时间
一.linux系统下包含两个时间:系统时间(刚启动时读取的是rtc时间)和RTC时间. 一般情况下都会选择芯片上最高精度的定时器作为系统时间的定时基准,以避免在系统运行较长时间后出现大的时间偏移.特点 ...
- 如何使用Android可视化埋点
Android可视化埋点是Android全埋点的增强.开发者可以将App界面同步至DTM界面,并在DTM界面通过可视化点击的方式添加埋点事件.目前Android可视化埋点包含两种埋点方式:普通可视化埋 ...
- Java语言学习day35--8月10日
今日内容介绍1.集合2.Iterator迭代器3.增强for循环4.泛型 ###01集合使用的回顾 *A:集合使用的回顾 *a.ArrayList集合存储5个int类型元素 public static ...