前端播放流媒体(RTMP,RTSP,HLS)

谁践踏了优雅 2022-06-13 02:48 1448阅读 0赞

#### 前言 ####

最近项目需要流媒体的播放，后端一共提供了 三种流数据(RTSP,RTMP,HLS),在不同的场景可能会使用到不同方式播放，就需要做到适配， 支持所有的流数据播放。花了一段时间研究，在这里和大家分享一下，还有些遗留问题，看大家有没有好的方法。

#### RTSP ####

###### 简介 ######

这种协议流数据前段播放，没有特别好的解决方法，需要在本机装一个vlc 插件，依靠这个插件才能让 RTSP 协议 在网页上能播放，但是目前高版本的 Chrome 浏览器不支持 NPAPI 插件，也就是说高版本的 Chrome 浏览器还是不能播放（46 以上的版本都不行）。

###### html code ######

代码很简单，更播放 flash 差别不是很大，需要改几个点，  
1.object 标签的 `type` , `codebase` 属性  
2.param 标签 `<param name='mrl' value='rtsp://***********************/Streaming/Channels/1' />`

###### js code ######

//获取 VLC js 队形 
         function getVLC(name) {
                if (window.document[name]) {
                    return window.document[name];
                }
                if (navigator.appName.indexOf("Microsoft Internet") == -1) {
                    if (document.embeds && document.embeds[name])
                        return document.embeds[name];
                } else {
                    return document.getElementById(name);
                }
            }
        
         // 根据地址切换视频
            function doGo(mrl) {
                try {
                    var vlc = getVLC("vlc"),
                        itemId = vlc.playlist.add(mrl);
                    vlc.playlist.playItem(itemId);
    
                } catch (e) {
                    console.log(e);
                }
            }
           //调用
         doGo(mrl)

我们用js 代码主要是用来切换地址，达到如果流数据 地址变化， 内容跟着变化。

VlC 给我们提供了丰富的API ,请查看 [VLC API][]

#### HLS ####

###### 简介 ######

Http Live Streaming （简称HLS) ，它在移动 Web 浏览器支持挺好，所以现在好多移动端直播都在用此协议。但在 PC Chrome,Firefox 上不支持，所以还需要借助flash 。在研究的过程中发现了 [video.js][] 这个插件，代码托管 在 github 上，开源。但是它不直接支持播放 HLS 协议的播放. 需要借助 [videojs-contrib-hls][] 但是我怎么测试都没成功，播放不了。大家有测试通的可以联系我。 经过一番的查找，github 上一顿搜索，黄天不负有心人，找见了这个库[FZ-live][] 我看他也是基于 video.js 的。

###### html code ######

直接写video 标签， 在 source 的 `src` 给上路径就可以，还有个要求，就是资源 不能跨域，需要在同一域下。

###### js code ######

//切换地址播放
    var player = videojs('video');
     player.ready(function() {
         var myPlayer = this;
         myPlayer.src(url);
         myPlayer.load(url);
         myPlayer.play();
       });

我们用js实现了切换地址播放。 video.js 这个插件 提供了好多[api][] 我们有需要可以查看,可以做出好多功能

#### RTMP ####

###### 简介 ######

Real Time Messaging Protocol（简称 RTMP）是 Macromedia 开发的一套视频直播协议，现在属于 Adobe。所以我们就只能借助 flash 了 。 在研究 video.js 插件的时候， 看它也能提供 RTMP 的播放，这下我们就省事多了。

###### html code ######

看到我没有写 source 标签，我们直接用js 来操作，做到播放 RTMP 和 HLS 的适配 .

###### js code ######

player.ready(function() {
        var myPlayer = this;
        myPlayer.reset();
        if (scope.type == 'hls') {
            console.log('hls');
            myPlayer.src({ type: "application/x-mpegURL", src: scope.url });
        } else {
            myPlayer.src({ type: "rtmp/flv", src: scope.url });
            console.log('rtmp');
        }
        myPlayer.load(scope.url);
        myPlayer.play();
    });

我们借助 player.src() 方法就是实现，根据不同的类型设置 src 的type 就可以。但是每次我们更改地址的时候，记得调用一下 player.reset() 方法会重置播放器 。要不会有问题，切换不了。

#### 结束语 ####

以上我是我在解决前段播放 流媒体数据的过程。其中还有几个问题，需要研究改进。

1.  RTSP 在 chrome 的高版本浏览器播放
2.  videojs-contrib-hls 这个库播放 hls （猜测，是不是后端给的数据流有问题）
    
    [http://www.cnblogs.com/qiaojie/p/5733335.html][http_www.cnblogs.com_qiaojie_p_5733335.html]

[VLC API]: https://wiki.videolan.org/Documentation:Documentation/
[video.js]: https://github.com/videojs/video.js
[videojs-contrib-hls]: https://github.com/videojs/videojs-contrib-hls
[FZ-live]: https://github.com/fzninja/FZ-live
[api]: http://docs.videojs.com/docs/api/index.html
[http_www.cnblogs.com_qiaojie_p_5733335.html]: http://www.cnblogs.com/qiaojie/p/5733335.html