HTML5实现视频直播功能思路详解

2019-01-28 21:52:43王振洲

了解完直播形式之后,接下来整体了解直播流程。  

三、直播整体流程  

直播整体流程大致可分为:

视频采集端:可以是电脑上的音视频输入设备、或手机端的摄像头、或麦克风,目前以移动端手机视频为主。  

直播流视频服务端:一台Nginx服务器,采集视频录制端传输的视频流(H264/ACC编码),由服务器端进行解析编码,推送RTMP/HLS格式视频流至视频播放端。  

视频播放端:可以是电脑上的播放器(QuickTime Player、VLC),手机端的native播放器,还有就是 H5 的video标签等,目前还是以手机端的native播放器为主。

(web前端学习交流群:328058344 禁止闲聊,非喜勿进!)

四、H5 录制视频

对于H5视频录制,可以使用强大的 webRTC (Web Real-Time Communication)是一个支持网页浏览器进行实时语音对话或视频对话的技术,缺点是只在 PC 的 Chrome 上支持较好,移动端支持不太理想。

使用 webRTC 录制视频基本流程  

① 调用 window.navigator.webkitGetUserMedia()  

获取用户的PC摄像头视频数据。  

② 将获取到视频流数据转换成 window.webkitRTCPeerConnection  

(一种视频流数据格式)。  

③ 利用 WebScoket  

将视频流数据传输到服务端。  

注意:

虽然Google一直在推WebRTC,目前已有不少成型的产品出现,但是大部分移动端的浏览器还不支持 webRTC(最新iOS 10.0也不支持),所以真正的视频录制还是要靠客户端(iOS,Android)来实现,效果会好一些。

WebRTC支持度

WebRTC支持度

iOS原生应用调用摄像头录制视频流程

① 音视频的采集,利用AVCaptureSession和AVCaptureDevice可以采集到原始的音视频数据流。