直播源码搭建教程之在h5 video中的直播
直播源码搭建教程之在h5 video中的直播
直播越来越成为趋势,因为疫情的冲击,不管是直播带货还是直播教育等等,将线上模式推上了巅峰~ 因为业务和兴趣关系,稍微研究了一下在H5中直播的相关知识。 PS:如果你对直播有所了解,可以skip全篇文章啦,本篇直播源码搭建教程文章只涉及到一些直播相关的初级知识。
- 稍微了解一下直播的架构。
- 直播的协议。
- 微信小程序中的直播。
- 本地自己搞一个h5的直播小demo。
直播源码搭建教程——直播的架构
如上图:首先推流
就可以简单理解成你的摄像头,负责采集图像,并将数据流推送到服务器。其次拉流
可以理解成你的播放器,负责将图像数据流从服务器上拉取下来。然后就是媒体流服务器
,我们通常都是直接使用第三方的服务器,比方说腾讯云直播,阿里云直播等等,简单绑定域名和申请之后就能够直接使用啦~ 当然在本文最后我们会自己搭建一个非常简单的媒体流服务器。
直播源码搭建教程——常见的直播协议
HLS
网上相关信息很多大同小异,总结一下:苹果公司设计的,延迟很大,但是兼容性超强(h5 video标签兼容性)。
该协议原理简单来说,http请求下载playlist文件(.m3u8),里面包含切片文件信息(.ts文件),随后下载ts文件feed给video进行播放
,如上图所示:m3u8文件中包含三个切片.ts
文件,每个文件为targetDuration = 9s
,看到左侧的三个ts文件分别是38,39,40,右侧的三个ts文件是39,40,41,以此类推,新的playlist文件被依次下载,同时新的ts文件被下载到浏览器并进行播放。
HLS这么大的延迟也好理解,因为需要等多个ts切片文件生之后再发给播放器,然而每个ts切片文件都在10s左右,所以这个延迟是模式设计上不可避免的。
RTMP
这个协议也总结下:adobe公司的似有协议(所以浏览器播放都需要插件),必须要flash播放器才能播放,延迟超短,基于TCP长链接,无需多次握手。
虽然该协议的延迟很短很优秀,但是需要flash真的是硬伤,各大浏览器已经对外宣称将不再支持flash,所以此协议到此为止~感兴趣的同学在网上搜一下到处都是。
DASH
dash的兼容性也很强,配上dash.js基本上主流浏览器(支持MEDIA SOURCE EXTENSION的)都能够支持这个协议,延迟也很低,该协议之下也是将流文件变成切片文件,据说youtube和netflix都是用了这个协议,如果你打开network面板的话和HLS很像,一直在不断的下载新文件。
HTTP-FLV
国内的主流直播平台都是用的这个协议,该协议不再是不断下载切片
文件了,而是通过不设置content-length
的header,使得http请求不间断的持续下载 如上图所示是我在B站直播中随便找的一个网络请求,该文件是以.flv
结尾的文件,还可以看到该文件的大小在我截图的瞬间已经达到了40多mb。
HTTP-FLV的协议延时很低,自己用腾讯云亲测能够达到5s以内,另外要说的就是开源库flv.js
,应该是次库开创了国内web直播播放flv格式的先河,这个库也是用到了MEDIA SOURCE EXTENSION
接口,才使得h5标签上能够播放flv文件。
Media Source Extension(MSE)
上文中有两次提到了Media Source Extension
,一个是在h5播放dash
,一个是在播放flv
格式的时候,api结构图如下: 从图中可以得知,MediaSource
中包含SourceBuffer
,而SourceBuffer
中包含了一个个Track
,每一个Track就是我们常说的音轨和视轨,我们可以通过一些提供的接口对Track进行操作,比方说切换Track,播放或者暂停Track甚至跳转到Track的某一帧等(没有深层去了解,因为毕竟了解太多伤身~)。下面的实例代码简单的展示了如何使用MSE:
var vidElement = document.querySelector('video');if (window.MediaSource) {var mediaSource = new MediaSource();vidElement.src = URL.createObjectURL(mediaSource);mediaSource.addEventListener('sourceopen', sourceOpen);
} else {console.log("The Media Source Extensions API is not supported.")
}function sourceOpen(e) {URL.revokeObjectURL(vidElement.src);var mime = 'video/webm; codecs="opus, vp9"';var mediaSource = e.target;var sourceBuffer = mediaSource.addSourceBuffer(mime);var videoUrl = 'droid.webm';fetch(videoUrl).then(function(response) {return response.arrayBuffer();}).then(function(arrayBuffer) {sourceBuffer.addEventListener('updateend', function(e) {if (!sourceBuffer.updating && mediaSource.readyState === 'open') {mediaSource.endOfStream();}});sourceBuffer.appendBuffer(arrayBuffer);});
}
复制代码
sourceopen
事件是当我们将mediaSource赋值给video的src标签的时候会被trigger,然后我们在这个事件的回调中去fetch视频流,并将其存放到arrayBuffer中,再appendBuffer到sourceBuffer中。我的理解就是Media Source Extension
这个东西可以将比方的内容变成流然后喂给video标签,使得原本video无法播放的内容变成可以播放。
MediaSource.isTypeSupported('video/mp4; codecs="avc1.42E01E, mp4a.40.2"')
复制代码
另外这个接口是用来检测检MSE
是否支持某个特定的编码和容器盒子
In Conclusion
微信小程序中的直播
小程序中如果你想要植入直播事件很简单的事情,使用live-pusher
组件进行推流,感觉说白了就是打开摄像头进行录影,然后使用live-player
组件进行播放。中间的媒体服务器可以直接使用腾讯云的(毕竟腾讯自家产品),下图分别是生成的拉流和推流地址。 在腾讯云中绑定好直播域名,直接在辅助工具
中输入自定义的AppName
和StreamName
就能够生成相应的推流和拉流地址,然后将生成的推流拉流地址作为live-pusher
和live-player
的url输入就可以啦。这里注意微信小程序只支持rtmp和flv格式的拉流。
本地搭建一个直播demo
推流使用OBS
,这个工具很强大,可以直播你的整个桌面,你的camera,甚至某一个window等等,在设置中有一个Stream
选项,里面输入对应的Server地址就行
直播源码搭建教程——媒体服务器
node-media-server
这个媒体服务器充当着上面的腾讯云
中的功能,将你推流上去的数据进行转码之后下发到拉流端,介绍一个node写的服务器叫做node-media-server
: 配置很简单,将端口1936
作为rtmp的推流端口,8002
开启http的拉流端口,然后本地开始使用ffmpeg
进行转码,在8002
上可以拉取到各种协议下的播放流如下图:
NGINX RTMP Module
NGINX的一个模块,具体使用方法不再赘述,以下是该模块的配置:
rtmp {server {listen 1935; # Listen on standard RTMP portchunk_size 4000;application show {live on;# Turn on HLShls on;hls_path /mnt/hls/;hls_fragment 3;hls_playlist_length 60;# disable consuming the stream from nginx as rtmpdeny play all;}}
}
复制代码
直播源码搭建教程——拉流播放器
这里就是我们选择播放用的播放器啦,各种各样,可以使用比方说之前提到的flv.js来播放http-flv协议啦,使用dash.js播放dash协议的啦。除了再使用web上的播放器,当然你还可以本地下载一个VLC播放器app,能够播放各种协议的内容~ 到此本地的demo运行起来就可以看到效果啦。
本文转载自网络,感谢(啥也不会123)的分享,转载仅为分享干货知识,如有侵权欢迎联系云豹科技进行删除处理
直播源码搭建教程之在h5 video中的直播相关推荐
- 一个直播源码搭建教程,教你如何完成一个完整的直播
网上关于视频直播的资料还是挺多的,看了一些文章,自己也动手实践了下,写了这个直播源码搭建教程.主要有三个步骤:(1)NginxRTMP服务器搭建(2)视频录制推流器 (3)拉流器(播放器),有了这些就 ...
- 直播源码搭建教程,教你实现举报功能
直播源码是现在非常受欢迎的应用,拥有非常多的用户,但是用户变多,平台内容就不可控了,需要用户自发举报,维护平台信息健康,今天就是一个直播源码搭建教程,看看举报功能是怎样实现的. 一.后台接口 //us ...
- 一对一直播源码一对一直播源码搭建你要知道的功能
一对一直播源码一对一直播源码搭建你要知道的功能 2020年初全国疫情使的各方面企业都在停工,经济压力巨大.通过全国人民的努力与积极配合我国疫情得到得到控制并取得巨大的胜利,全国各地都在积极复工复产!大 ...
- 直播源码搭建教程5 分钟完成(直播 + 分流 + 画面水印)
直播源码搭建教程5 分钟完成(直播 + 分流 + 画面水印) 部署运行 服务器 安装docker(Centos7,其他系统请发挥你的搜索功能) $ yum -y install docker #安装d ...
- 直播源码搭建教程之直播流媒体
直播源码搭建教程之直播流媒体 前言 这段时间在搭建一个IPCamera项目服务器.视频点对点通话,客户端会查看设备端的音视频实时流.为了省流量,是通过P2P进行穿透.但是由于NAT设备的原因和IPV4 ...
- 在线直播源码搭建直播平台的后端
在线直播源码搭建直播平台的后端 后端项目初始化 1.全局安装express脚手架 额,这个应该是属于准备工作的.给忘记了,那就凑合放在这里吧,别打我,我知道错了,但我就是不改[狗头保命] cnpm i ...
- 云豹源码php mysql_如何进行直播搭建,云豹直播源码搭建
原标题:如何进行直播搭建,云豹直播源码搭建 看到很多人在问,直播平台如何搭建,特写此文章,以云豹直播源码为例,该如何进行直播搭建? 一.搭建前期准备 (1)生成软件包信息缓存 yum makecach ...
- 一对一社交直播源码是怎么火起来的,一对一视频直播实现形式
一对一社交直播源码是怎么火起来的,一对一社交直播源码顺应市场的需求,满足了用户的新的口味,这是如今的新时代娱乐和技术发展的结合. 社交互动:直播最大的一块潜力市场是视频社交,资本方对直播的关注,也是因 ...
- 斗鱼tv服务器响应失败,是直播源码有问题还是服务器太垃圾,斗鱼直播平台频频崩溃是为何...
原标题:是直播源码有问题还是服务器太垃圾,斗鱼直播平台频频崩溃是为何 1月29日晚,有不少网友反馈称斗鱼直播出问题了,网页能开但是直播看不了,一直显示主播正在连线中请稍后再试的字样,手机端电脑端齐崩溃 ...
最新文章
- cmake 常用变量和常用环境变量查表手册
- Python+selenium 自动化-通过窗口名切换窗口,如何获取当前窗口的title窗口名
- 蓝桥杯java第六届决赛第四题--穿越雷区
- 新浪微博,请砍掉90%的功能
- Android 系统调试(1) 禁止SeLinux
- GameMaker Studio 中的组合技(Combo)设置
- openstack一键安装脚本(转载)
- 基于KNN实现图像分类——理解图像分类
- Could not create the view An unexpected exception……的问题
- php同时使用了ssl tls,phpmqtt ssl tls使用证书 cafile 文件 连接服务器
- 让你5分钟明白美国金融危机爆发的原因!
- web网站加速之CDN技术原理
- ps设计制作出可爱的浅蓝色雨滴下落GIF(3)
- 制作MIcroUSB转TTL下载器CH340
- 实现自适应布局Element
- 飞机大战代码(高仿),完美复原原游戏,好玩到停不下来
- About Garbage Collector and finilize()
- 最新尚硅谷Java MyBatisPlus教程(完整)
- linux avi 转mp4,怎么把视频avi格式怎么转换成mp4格式
- python w3c_python w3c