用Java开启直播之路（二）

ゞ浴缸里的玫瑰 2022-05-23 10:36 102阅读 0赞

#### 前记 ####

当我们使用**obs**和**red5**实现了一个简单的直播Demo之后，我们已经掌握的直播的一个基本的流程：`推流-编码-拉流-解码`，但是**red5**的view页面绝对不是我们所想要的，也不是我们所想呈现给用户看的界面，这时我们就需要去重写一个客户端去承载流的显示！本文将会介绍几种客户端拉流的方式，基于此基础上我们可以做一些扩展。

## 一、Video.js拉流 ##

[video.js][]是一款基于HTML5的网络视频播放器。它支持HTML5和Flash视频，以及YouTube和Vimeo（通过插件）。支持在桌面和移动设备上播放视频。这个项目从2010年中期开始，现已经在40多万个网站上使用。

video.js仍然需要支持H5的浏览器的配合，[这里][Link 1]这里查看目前所有支持的浏览器。

video.js部署简单，只需要如下一个简单的几行`html + js`代码就可以部署一个直播客户端，当然，需要浏览器允许video.js使用\*\*flash“\`。

<html>
        <head>
            <title>Video.js直播</title>
            <meta charset="utf-8">
            <link href="http://vjs.zencdn.net/5.5.3/video-js.css" rel="stylesheet">
            
            <script src="http://vjs.zencdn.net/ie8/1.1.1/videojs-ie8.min.js"></script>
        </head>
        <body>
            <h1>直播间</h1>
            <video id="my-video" class="video-js" controls preload="auto" width="640" height="300" poster="http://ppt.downhot.com/d/file/p/2014/08/12/9d92575b4962a981bd9af247ef142449.jpg" data-setup="{}">
    
                
                <source src="rtmp://cyberplayerplay.kaywang.cn/cyberplayer/demo201711-L1" type="rtmp/flv">
    
            </video>
    
            
            <script src="http://vjs.zencdn.net/5.5.3/video.js"></script>
    
            
            <script type="text/javascript"> var myPlayer = videojs('my-video'); videojs("my-video").ready(function(){ var myPlayer = this; myPlayer.play(); }); </script> 
        </body>
    </html>

video更多的帮助文档请查阅[http://docs.videojs.com/module-videojs.html][http_docs.videojs.com_module-videojs.html]

## 二、音视频转码MCT ##

#### 介绍 ####

音视频转码MCT（Multimedia Cloud Transcoder），结合百度云平台，为开发者和企业用户提供包括音视频存储、转码、CDN加速、多端安全播放器（Web/Android/iOS）、DRM（Digital Rights Management）数字版权管理等服务。

#### 优势 ####

**极速视频转码**

强大的分布式转码集群，极速的转码体验，支持主流视频格式转码，支持多码流多格式输出。

**CDN全网加速**

多年CDN技术积累，稳定快速，多线BGP接入，覆盖全网，企业级安全防护，为用户提供优质服务。

**安全存储**

服务可用性99.9%，可靠性99.999999999%，具有多级安全控制和防护保证数据安全。

**丰富的SDK支持**

支持RESTful API方式访问，支持多种开发语言的SDK，并提供Android/iOS/Web等多种平台的可定制的播放器。

#### 使用 ####

官方提供了多种视频协议播放的demo。

演示地址：[http://cyberplayer.bcelive.com/demo/new/index.html][http_cyberplayer.bcelive.com_demo_new_index.html]  
项目介绍：[https://cloud.baidu.com/doc/MCT/Web-SDK.html][https_cloud.baidu.com_doc_MCT_Web-SDK.html]

其中rtmp协议的demo：

<div id="playercontainer"></div>
    <script type="text/javascript" src="player/cyberplayer.js"></script>
    <script type="text/javascript"> var player = cyberplayer("playercontainer").setup({ width: 680, height: 448, file: "rtmp://cyberplayerplay.kaywang.cn/cyberplayer/demo201711-L1", // <—rtmp直播地址 autostart: true, stretching: "uniform", volume: 100, controls: true, rtmp: { reconnecttime: 5, // rtmp直播的重连次数 bufferlength: 1 // 缓冲多少秒之后开始播放 默认1秒 }, ak: "xxxxxxxxxxxxxxxx" // 公有云平台注册即可获得accessKey }); </script>

目前百度对音频转码这一块暂时不收费，但是仍然需要填写**accessKey**才可以正常使用MCT播放器，所以以后可能会收费，下面是**accessKey**的获取方式：

*  未注册，须先注册百度云账户。
 *  已注册，直接登录。

注册成功后进入个人中心页面，用户ID就相当于accessKey：  
![这里写图片描述][70]  
附赠MCT支持的流格式：  
**输入文件格式**

*  文件格式：3gpp, asf/wmv, avi, flv/f4v, mkv, mov/mp4/m4a, mp3, mp2, mpeg/mpg, ts/ogg, mts, wmv/wma, rm/rmvb, webm等。
 *  视频编码标准：H.264, H.263/H.263+, MPEG-1/2/4, VP8/9, Quicktime, RealVideo, WMV, MJPEG等。
 *  音频编码标准：MP1, MP2, MP3, AAC, AC-3, WMA, PCM, ADPCM, AMR, RealAudio, Vorbis, DSD等。

**输出文件格式**

*  文件格式：mp4, m3u8(HLS/A-HLS), flv, mp3, m4a  
    
    
     *  mp4为通用视频格式（Android/iOS/Windows兼容）；
     *  m3u8(HLS/A-HLS)为iOS默认视频格式；
     *  flv为Flash视频格式；
     *  mp3和m4a为音频文件格式。
 *  视频编码标准：H.264/AVC
 *  音频编码标准：AAC, MP3

目前先介绍这两种拉流方式，下一篇将会介绍如何在服务器上部署rtmp协议地址，实现一个简单的直播demo。

[video.js]: http://videojs.com/getting-started/
[Link 1]: http://videojs.com/html5-video-support/
[http_docs.videojs.com_module-videojs.html]: http://docs.videojs.com/module-videojs.html
[http_cyberplayer.bcelive.com_demo_new_index.html]: http://cyberplayer.bcelive.com/demo/new/index.html
[https_cloud.baidu.com_doc_MCT_Web-SDK.html]: https://cloud.baidu.com/doc/MCT/Web-SDK.html
[70]: /images/20220523/ac4e5967ec3d48f2936a91a759826e5e.png