在线学习功能

最新推荐文章于 2021-10-06 17:47:04 发布

统一GR和QFT

最新推荐文章于 2021-10-06 17:47:04 发布

阅读量433

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_43063585/article/details/117402310

版权

笔记专栏收录该内容

47 篇文章 1 订阅

订阅专栏

一、需求描述
学生登录进入学习中心即可在线学习：
1、学生可以在windows浏览器上在线观看视频（录播课程）。
2、播放器具有快进、快退、暂停等基本功能。
3、学生可以方便切换章节进行学习。
什么是录播课程？
录播课程就是提供录制好课程视频，供用户在线点播，反复学习。
课程视频如何管理？
媒资管理系统专门来管理课程视频，用户视频文件上传到媒资系统，并对视频进行编码处理。

二、视频点播解决方案
流媒体
概括理解：流媒体就是将视频文件分成许多小块儿，将这些小块儿作为数据包通过网络发送出去，实现一边传输视频数据包一边观看视频。
流式传输
1）顺序流式传输即顺序下载音、视频文件，可以实现边下载边播放，不过，用户只能观看已下载的视频内容，无法快进到未下载的视频部分，顺序流式传输可以使用Http服务器来实现，比如Nginx、Apache等。
2）实时流式传输实时流式传输可以解决顺序流式传输无法快进的问题，它与Http流式传输不同，它必须使用流媒体服务器并且使用流媒体协议来传输视频，它比Http流式传输复杂。常见的实时流式传输协议有RTSP、RTMP、RSVP 等。

通过流媒体系统的概要结构学习流媒体系统的基本业务流程。
在这里插入图片描述
1、将原始的视频文件通过编码器转换为适合网络传输的流格式，编码后的视频直接输送给媒体服务器。原始的视频文件通常是事先录制好的视频，比如通过摄像机、摄像头等录像、录音设备采集到的音视频文件，体积较大，要想在网络上传输需要经过压缩处理，即通过编码器进行编码。
2、媒体服务获取到编码好的视频文件，对外提供流媒体数据传输接口，接口协议包括：HTTP、RTSP、 RTMP等。
3、播放器通过流媒体协议与媒体服务器通信，获取视频数据，播放视频。

点播方案
1、播放器通过 http协议从http服务器上下载视频文件进行播放问题：必须等到视频下载完才可以播放，不支持快进到某个时间点进行播放。
2、播放器通过rtmp协议连接媒体服务器以实时流方式播放视频使用rtmp协议需要架设媒体服务器，造价高，对于直播多采用此方案。
3、播放器使用HLS协议连接http服务器（Nginx、Apache等）实现近实时流方式播放视频。
HLS协议规定：基于Http协议，视频封装格式为ts，视频的编码格式为H264,音频编码格式为MP3、AAC或者AC- 3。

选用HLS协议。
HLS的工作方式是：将视频拆分成若干ts格式的小文件，通过m3u8格式的索引文件对这些ts小文件建立索引。一般10秒一个ts文件，播放器连接m3u8文件播放，当快进时通过m3u8即可找到对应的索引文件，并去下载对应的ts文件，从而实现快进、快退以近实时的方式播放视频。
在这里插入图片描述

三、视频编码
区分文件格式和编码格式。
我们将视频录制完成后，使用视频编码软件对视频进行编码，本项目使用FFmpeg对视频进行编码。

生成m3u8/ts文件
使用ffmpeg生成 m3u8的步骤如下：
第一步：先将avi视频转成mp4

ffmpeg.exe ‐i lucene.avi ‐c:v libx264 ‐s 1280x720 ‐pix_fmt yuv420p ‐b:a 63k ‐b:v 753k ‐r 18 .\lucene.mp4

下面把各参数意思大概讲讲，大概了解意思即可，不再此展开流媒体专业知识的讲解。
-c:v 视频编码为x264 ，x264编码是H264的一种开源编码格式。
-s 设置分辨率
-pix_fmt yuv420p：设置像素采样方式，主流的采样方式有三种，YUV4:4:4，YUV4:2:2，YUV4:2:0，它的作用是根据采样方式来从码流中还原每个像素点的YUV（亮度信息与色彩信息）值。
-b 设置码率，-b:a和-b:v分别表示音频的码率和视频的码率，-b表示音频加视频的总码率。码率对一个视频质量有很大的作用，后边会介绍。
-r：帧率，表示每秒更新图像画面的次数，通常大于24肉眼就没有连贯与停顿的感觉了。
第二步：将mp4生成m3u8

ffmpeg ‐i lucene.mp4 ‐hls_time 10 ‐hls_list_size 0 ‐hls_segment_filename ./hls/lucene_%05d.ts ./hls/lucene.m3u8

-hls_time 设置每片的长度，单位为秒
-hls_list_size n: 保存的分片的数量，设置为0表示保存所有分片
-hls_segment_filename ：段文件的名称，%05d表示5位数字
生成的效果是：将lucene.mp4视频文件每10秒生成一个ts文件，最后生成一个m3u8文件，m3u8文件是ts的索引文件。

四、播放器
视频编码后要使用播放器对其进行解码、播放视频内容。在web应用中常用的播放器有flash播放器、H5播放器或浏览器插件播放器，其中以flash和H5播放器最常见。
本项目采用H5播放器，使用Video.js开源播放器。

五、搭建媒体服务器
正常使用video.js播放视频是通过一个网页，用户通过浏览器打开网页去播放视频，网页和视频都从web服务器请求，通常视频的url地址使用单独的域名。
HLS协议基于Http协议，本项目使用Nginx作为视频服务器。下图是Nginx媒体服务器的配置流程图：
在这里插入图片描述

六、搭建学习中心前端
要将video.js+vue.js集成。

七、媒资管理
需求分析
目前媒资管理的主要管理对象是课程录播视频，包括：媒资文件的查询、视频上传、视频删除、视频处理等。
媒资查询：教学机构查询自己所拥有的媒体文件。
视频上传：将用户线下录制的教学视频上传到媒资系统。
视频处理：视频上传成功，系统自动对视频进行编码处理。
视频删除：如果该视频已不再使用，可以从媒资系统删除。
下边是媒资系统与其它系统的交互情况：
在这里插入图片描述

创建xc_media数据库媒资系统使用mongodb数据库存储媒资信息。

@Data 
@ToString 
@Document(collection = "media_file") 
public class MediaFile { 
/*
文件id、名称、大小、文件类型、文件状态（未上传、上传完成、上传失败）、上传时间、视频处理方式、视频处 理状态、hls_m3u8,hls_ts_list、课程视频信息（课程id、章节id） 
*/
	@Id 
	//文件id 
	private String fileId; 
	//文件名称 
	private String fileName; 
	//文件原始名称 
	private String fileOriginalName; 
	//文件路径 
	private String filePath; 
	//文件url 
	private String fileUrl; 
	//文件类型 
	private String fileType; 
	//mimetype 
	private String mimeType; 
	//文件大小 
	private Long fileSize; 
	//文件状态 
	private String fileStatus; 
	//上传时间 
	private Date uploadTime; 
}

创建媒资服务工程xc-service-manage-media

上传文件
断点续传解决方案
通常视频文件都比较大，所以对于媒资系统上传文件的需求要满足大文件的上传要求。http协议本身对上传文件大小没有限制，但是客户的网络环境质量、电脑硬件环境等参差不齐，如果一个大文件快上传完了网断了，电断了没有上传完成，需要客户重新上传，这是致命的，所以对于大文件上传的要求最基本的是断点续传。
在这里插入图片描述
上传流程如下：
1、上传前先把文件分成块。
2、一块一块的上传，上传中断后重新上传，已上传的分块则不用再上传。
3、各分块上传完成最后合并文件。
文件下载则同理。

随着html5的流行，本项目采用Html5完成文件分块上传。
使用WebUploader（文件上传组件）上传流程如下：
在这里插入图片描述
在webuploader中提供很多钩子方法，下边列出一些重要的：
1）before-send-file 在开始对文件分块儿之前调用，文件开始上传前前端请求服务端准备上传工作。参考源代码如下：

type:"POST", 
url:"/api/media/upload/register", 
data:{ 
	// 文件唯一表示 
	fileMd5:this.fileMd5, 
	fileName: file.name, 
	fileSize:file.size, 
	mimetype:file.type, 
	fileExt:file.ext 
}

2）before-send 在上传文件分块之前调用此方法，上传分块前前端请求服务端校验分块是否存在。参考源代码如下：

type:"POST", 
url:"/api/media/upload/checkchunk", 
data:{ 
	// 文件唯一表示 
	fileMd5:this.fileMd5, 
	// 当前分块下标 
	chunk:block.chunk, 
	// 当前分块大小 
	chunkSize:block.end‐block.start 
}

3）after-send-file 在所有分块上传完成后触发，可以请求服务端合并分块文件。参考代码如下：

type:"POST", 
url:"/api/media/upload/mergechunks", 
data:{ 
	fileMd5:this.fileMd5, 
	fileName: file.name, 
	fileSize:file.size, 
	mimetype:file.type, 
	fileExt:file.ext 
}

使用webUploader前需要创建webUploader对象。指定上传分块的地址：/api/media/upload/uploadchunk
在这里插入图片描述
定义文件上传的Api接口，此接口是前端WebUploader调用服务端的接口。
编写此接口需要参考前端WebUploader应用代码。

Api(value = "媒资管理接口",description = "媒资管理接口，提供文件上传，文件处理等接口") 
public interface MediaUploadControllerApi { 
	@ApiOperation("文件上传注册") 
	public ResponseResult register(String fileMd5, String fileName, Long fileSize, String mimetype, String fileExt); 
	@ApiOperation("分块检查") 
	public CheckChunkResult checkchunk(String fileMd5, Integer chunk, Integer chunkSize); 
	@ApiOperation("上传分块") 
	public ResponseResult uploadchunk(MultipartFile file, Integer chunk, String fileMd5); 
	@ApiOperation("合并文件") 
	public ResponseResult mergechunks(String fileMd5, String fileName, Long fileSize, String mimetype, String fileExt); 
}

媒资服务端编写
服务端需要实现如下功能：
1、文件上传注册　上传前检查上传环境检查文件是否上传，已上传则直接返回。检查文件上传路径是否存在，不存在则创建。
2、分块检查　检查分块文件是否上传，已上传则返回true。未上传则检查上传路径是否存在，不存在则创建。
3、分块上传　将分块文件上传到指定的路径。
4、合并分块　将所有分块文件合并为一个文件。在数据库记录文件信息。
application.yml配置上传文件的路径：

xc‐service‐manage‐media: 
	upload‐location: F:/develop/video/

统一GR和QFT

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
在线学习功能

一、需求描述学生登录进入学习中心即可在线学习：1、学生可以在windows浏览器上在线观看视频（录播课程）。2、播放器具有快进、快退、暂停等基本功能。3、学生可以方便切换章节进行学习。什么是录播课程？录播课程就是提供录制好课程视频，供用户在线点播，反复学习。课程视频如何管理？媒资管理系统专门来管理课程视频，用户视频文件上传到媒资系统，并对视频进行编码处理。二、视频点播解决方案流媒体概括理解：流媒体就是将视频文件分成许多小块儿，将这些小块儿作为数据包通过网络发送出去，实现一边传输视频数据
复制链接

扫一扫