1）前端采集编码设备：提供直播信号源的采集和编码压缩功能，并将信号推送到直播流媒体服务器上。
2）直播流媒体服务器：负责直播流的发布和转播分发功能。
3）WEB服务器：实现直播节目在终端上的展现。
4）终端设备：包括PC和移动终端。编码和协议 是实现直播的重要环节：1）网络协议：主要有3种 a. RTSP（Real Time Streaming Protocol）是用来控制声音或影像的多媒体串流协议, 由Real Networks和Netscape共同提出的；b. RTMP(Real Time Messaging Protocol):实时消息传送协议是Adobe公司为Flash播放器和服务器之间音频、视频和数据传输 开发的开放协议；c. HLS(HTTP Live Streaming):是苹果公司(Apple Inc.)实现的基于HTTP的流媒体传输协议； 2）视频编码: Mpeg4, H264等 3）音频编码: Mp3, AAC等4）视频分辨率: 标清通常指的是640×480（或768×480）；高清指的是1280×720；全高清指的是1920×1080；超高清3840×2160。
二、直播系统源码搭建服务器部署重点
直播系统源码有哪几块组成，视频直播的过程一般可以分为采集、前处理、编码、传输、解码、渲染这几个环节，经过这几个环节之后，我们就可以通过PC端或者移动端进行视频直播的观看。直播系统在搭建时会用到多个业务服务器，共同完成直播系统的业务逻辑流程。通常在服务器部署时会采用动静分离分布式部署方式，保障了直播平台的稳定运行。主要用到以下的业务服务器。
1）消息服务器：主要用于消息推送，给用户推送房间聊天消息、私信消息。
2）业务服务器：手机直播的业务部分、好友关系、直播管理、货币系统、礼物系统等。
3）视频服务器：视频直播、点播、转码、存储和点播等。
4）IM即时聊天：使用Node.js服务自主搭建部署聊天服务器。
5）视频流（流媒体服务器）：建议采用第三方CDN，开通账号即可使用。关于CDN方面的内容，我们会在以后的内容中做重点介绍。
6）业务服务器：网站逻辑基于php-tlinkphp、thinkcmf、mysql、redis。MYSQL 服务提供静态数据的存储，REDIS 服务提供数据的缓存、存储动态数据。
以上便是对直播系统源码如何实现视频直播以及搭建服务器的简单介绍。搭建直播开发平台之前就是找到一款优质的直播系统源码，直播系统源码开发原理比其他软件更加复杂，而且相对于技术以及其他方面都会有一定的要求。直播系统源码的稳定性和安全性决定了后期搭建出的直播平台的流畅度、高并发承载及用户的产品体验，所以选择直播源码的时候一定不要为了贪图价格便宜，而选择安全性低，系统功能不会正常更新，bug一堆的源码。直播系统源码的开发需要经过推流端(采集、前处理)、服务端处理(编码、转码、录制、截图、鉴黄)、播放器(拉流、解码、渲染和互动系统)。望采纳，谢谢
在安卓手机上，使用video播放视频有个问题，video控件层级会永远在顶层，不利于视频互动H5开发，而IOS手机上不会有此问题。
<video src="http://xxx.mp4" x5-video-player-type="h5"/>
x5-video-player-type="h5" 只适用于微信浏览器
注意:
1.jsmpeg 需要将视频转为.ts的文件
先安装ffmpeg,然后执行以下命令,将mp4格式的文件转成 .ts(用命令行转的才能正常播放)
ffmpeg -i video.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 out.ts(文件的路径不太好找,建议全局搜索一下)
2.安卓上使用jsmpeg插件渲染canvas，ios上正常使用video并加入隐藏控制条等设置
3. http://hf-app.oss-cn-hangzhou.aliyuncs.com/public/html/jsmpeg.js 请使用此js,原作者的js没有回调设置
4. https://github.com/phoboslab/jsmpeg 原作者github地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSMpegPlayer</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
<style>
html,body{
padding: 0
margin: 0
}
.msg-wrap{
position: fixed
top: 0
left: 0
background: #fff
border: 1px solid #000
}
.video-wrap{
width: 100%
display: none
}
</style>
</head>
<body>
<video class="video-wrap" id="video-ios" x5-playsinline webkit-playsinline playsinline src="1_BG_4s_2.mp4"></video>
<canvas class="video-wrap" id="video-android"></canvas>
<div class="msg-wrap" id="msgTxt">loading...</div>
<script src="http://hf-app.oss-cn-hangzhou.aliyuncs.com/public/html/jsmpeg.js"></script>
<script>
var msgTxt = document.getElementById('msgTxt')
var video = document.getElementById('video-ios')
var canvas = document.getElementById('video-android')
//检测是否为非安卓浏览器并作处理
var check = !! navigator.userAgent.match(/\(i[^]+( U)? CPU.+Mac OS X/)
if(check){
msgTxt.innerHTML = "not Android mode"
video.style.display="block"
video.play()
//监听video加载完成
video.addEventListener("loadedmetadata",function(){
msgTxt.innerHTML = "not Android mode:videoPlaying"
})
//监听video播放结束
video.addEventListener("ended",function(){
msgTxt.innerHTML = "not Android mode:videoEnd"
})
}else{
// jsmpegPlay(canvas,'1_BG_4s_5.ts',startCallBack,playingCallBack,endCallBack)
jsmpegPlay(canvas,'out.ts',startCallBack,playingCallBack,endCallBack)
}
function jsmpegPlay(Vcanvas,vVideo,startFun,playingFun,endFun) {
var player = new JSMpeg.Player(
vVideo ,{
canvas: Vcanvas,
loop: false,
autoplay: true,
startSign: true,
startCallBack: startFun,
playingCallBack: playingFun,
endCallBack: endFun
})
}
//视频开始播放（即解码完成）执行
function startCallBack() {
msgTxt.innerHTML = "Android mode:videoPlaying"
canvas.style.display="block"
}
//视频播放进度
function playingCallBack(currentTime) {
// console.log(currentTime)
}
//视频播放完成执行
function endCallBack() {
msgTxt.innerHTML = "Android mode:videoEnd"
}
</script>
</body>
</html>
项目中遇到的坑,把使用方法记录一下
在线演示DOMO
JSMpegPlayer
https://github.com/xxfxx/android-video-autuplay github地址,欢迎小星星~~~
