采用.NET Core5.0+Vue2.0+腾讯云直播服务器+OBSPortable+VLC mediaplayer AND Vue 2.0
OBS下载地址
链接:https://pan.baidu.com/s/1HQDDG9FiDBc-LWF6yfS2Rw
提取码:vpuk
VLC下载地址
链接:https://pan.baidu.com/s/1USAt0CuqbuDGNgmy9zQP-A
提取码:qn92
推流
RTMP:
RTMP是Real Time Messaging Protocol(实时消息传输协议)的缩写,是Adobe公Flash/AIR平台和服务器之间音、视频及数据传输开发的实时消息传送协议。RTMP协议基于TCP,包括RTMP基本协议及RTMPT/RTMPS/RTMPE等多种变种。
RTMP协议中,视频必须是H264编码,音频必须是AAC或MP3编码,且多以flv格式封包。RTMP是目前最主流的流媒体传输协议,对CDN支持良好,实现难度较低,是大多数的直播平台的选择。
不过RTMP有着一个最大的不足——不支持浏览器,且Adobe已不再更新。因此直播服务要支持浏览器的话,需要另外的推送协议支持。
HLS:
Http Live Streaming是由Apple公司定义的基于HTTP的流媒体实时传输协议。它的原理是将整个流分为多个小的文件来下载,每次只下载若干个。服务器端会将最新的直播数据生成新的小文件,客户端只要不停的按顺序播放从服务器获取到的文件,就实现了直播。基本上,HLS是以点播的技术实现了直播的体验。因为每个小文件的时长很短,客户端可以很快地切换码率,以适应不同带宽条件下的播放。
分段推送的技术特点,决定了HLS的延迟一般会高于普通的流媒体直播协议。
传输内容包括两部分:一是M3U8描述文件,二是TS媒体文件。TS媒体文件中的视频必须是H264编码,音频必须是AAC或MP3编码。
由于数据通过HTTP协议传输,所以完全不用考虑防火墙或者代理的问题,而且分段文件的时长很短。
WebRTC:
WebRTC(Web Real-Time Communication),即“源自网页即时通信”。WebRTC是一个支持浏览器进行实时语音、视频对话的开源协议。WebRTC的支持者甚多,Google、Mozilla、Opera推动其成为W3C推荐标准。
WebRTC支持目前的主流浏览器,并且基于SRTP和UDP,即便在网络信号一般的情况下也具备较好的稳定性。
此外,WebRTC可以实现点对点通信,通信双方延时低,此外,WebRTC可以实现点对点通信,通信双方延时低,是实现“连麦”功能比较好的选择。
拉流
拉流是指服务器已有直播内容,用指定地址进行拉取的过程
拉流的具体过程
正文
腾讯云直播
先购买腾讯云直播服务
如上图所示,登录腾讯云,请先购买云直播的服务。
购买完成后,打开云直播首页
注:直播需要两个域名。购买云直播服务会赠送一个推流域名但还需要自费购买一个播放域名(没有播放域名,无法观看)
地址生成器
地址生产器可以生成推流地址和播放地址
生成推流地址
点击生成地址
根据需要进行选择
生成播放地址
点击生成地址
根据需要进行选择
OBS
OBS下载地址
链接:https://pan.baidu.com/s/1HQDDG9FiDBc-LWF6yfS2Rw
提取码:vpuk
OBS软件下载好以后大概打开样式如下:
打开设置点击推流服务选择自定义把拷贝的OBS推流地址和推流名称以此复制在返回主页面点击推流
返回云直播控制台选择流管理查看是否推流成功
VLC拉流
VLC下载地址
链接:https://pan.baidu.com/s/1USAt0CuqbuDGNgmy9zQP-A
提取码:qn92
点击右上角媒体
打开网络串流
复制FLC播放地址点击模仿
VUE
首先安装dplayer及hls.js
npm install dplayer –save
npm install hls.js
Mian.js中放入 window.Hls=require(“hls.js”)
import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)
以下两张图片中的代码是新建一个直播页面,写直播页面当中
最后开启推流,运行页面。就可以看到视频了。(特别说明:以上的视频播放地址我们使用的为m3u8格式,所以对应得type类型为hls。另外一种flv结尾的播放地址是腾讯视频官方的格式。对应得type类型还没找到。看视频直播的时候可能会很卡。多耐心等待一会儿就可以。如果不测试了记得第一时间停止推流。)
使用.NET Core完成对流的控制
注:腾讯云已经把代码都已经写好了在此粗略的过一遍
根据需要拷贝即可,需要那些参数给那些参数即可,可以把重复的代码进行封装在调用