流媒体(RTMP,RTSP,HLS)

流媒体(RTMP,RTSP,HLS)

前言

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

RTSP

简介

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

html code
  <object type=‘application/x-vlc-plugin‘ id=‘vlc‘ width="200" height="500" events=‘True‘ pluginspage="http://www.videolan.org" codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz">
     <param name=‘mrl‘ value=‘rtsp://***********************/Streaming/Channels/1‘ />
     <param name=‘volume‘ value=‘50‘ />
     <param name=‘autoplay‘ value=‘true‘ />
     <param name=‘loop‘ value=‘false‘ />
     <param value="transparent" name="wmode">
     <embed id=‘vlc‘ wmode="transparent" type="application/x-vlc-plugin" width="200" height="500" pluginspage="http://www.videolan.org" allownetworking="internal" allowscriptaccess="always" quality="high" src="rtsp://***********************/Streaming/Channels/1">
  </object>

代码很简单,更播放 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 代码主要是用来切换地址,达到如果流数据 地址变化, 内容跟着变化

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 id="video" class="video-js vjs-default-skin" controls  preload="none" data-setup=‘{}‘>
    <source src="./src/z.m3u8" type="application/x-mpegURL">
</video>

直接写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
<video id="vlc" class="video-js vjs-default-skin" controls  preload="none" data-setup=‘{}‘></video>

看到我没有写 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 (猜测,是不是后端给的数据流有问题)

分类: Realtime Streaming

时间: 2024-10-06 18:53:23

流媒体(RTMP,RTSP,HLS)的相关文章

rtmp/rtsp/hls公网测试地址

相信大家在调试播放器的时候,都有这样的困惑,很难找到合适的公有测试源,以下是大牛直播SDK整理的真正可用的直播地址源. 其中,rtmp和rtsp的url,用https://github.com/daniulive/SmarterStreaming 的播放器验证通过. hls的地址,用vlc验证通过. RTMP协议直播源 香港卫视:rtmp://live.hkstv.hk.lxdns.com/live/hks 这个rtmp url不是一直可用(2018年11月更新),如不可用,可以访问以下两个ur

[转]流媒体协议介绍(rtp/rtcp/rtsp/rtmp/mms/hls)

[转]流媒体协议介绍(rtp/rtcp/rtsp/rtmp/mms/hls) http://blog.csdn.net/tttyd/article/details/12032357 RTP 参考文档 RFC3550/RFC3551 Real-time Transport Protocol)是用于Internet上针对多媒体数据流的一种传输层协议.RTP协议详细说明了在互联网上传递音频和视频的标准数据包格式.RTP 协议常用于流媒体系统(配合RTCP协议),视频会议和一键通(Push to Tal

最简单的基于Flash的流媒体示例:网页播放器(HTTP,RTMP,HLS)

本文继续上一篇文章,记录一些基于Flash的流媒体处理的例子.本文记录一些基于Flash技术的网页播放器.基于Flash的网页播放器相比于其他网页播放器来说最大的优势就是"免插件安装"了,这一点可以很大的提高用户的体验质量.早些时候网络视频(尤其是直播)一般都使用ActiveX控件作为视频播放器,而这些控件并不普及,所以终端用户必须下载相关的插件才能收看节目,因而对很多不熟悉电脑的用户造成了很大的障碍.直到Flash网页播放器的出现,这一障碍才得到了解决.本文将会记录几个常用的网页播放

rtmp与hls流媒体服务器搭建:ubuntu下Nginx搭建初探与rtmp-module的添加

关键词:Nignx(http服务器):rtmp,hls(流媒体服务) 前言:感谢开源,感谢战斗民族.现在在做流媒体服务的一些工作,流媒体服务器搭建的网上教程多入牛毛,但是细细查看,发现很多同志贴上来的教程都有些许问题,还有一些是爬别人的数据得来的,排版上也有问题,让新手无所适从.本文也是通过翻看一些优质的博文得到的这篇分享.以下分享的网址就是引用的博文,安利一下. 1. http://redstarofsleep.iteye.com/blog/2123752 2. http://blog.csd

RTSP/RTMP/FLV/HLS视频流安防互联网摄像头音视频流媒体服务html设置http缓存代码方式一览

背景分析 众所周知,为了让用户更好的了解与使用EasyNVR,熟悉EasyNVR的相关功能,将EasyNVR与本地应用场景更好的融合,我们团队提出产品免费试用的途径.EasyNVR主要功能包括通过RTSP协议接入摄像机.支持Onvif协议,支持云台控制,焦距缩放.全平台(web/Android/iOS/微信/H5)观看,支持RTMP.HLS.http-flv协议.支持CDN接入,直接在每一个通道配置填写独立的阿里云/腾讯云CDN的RTMP推流地址即可.支持全网页配置管理.支持用户管理,权限验证.

推流和拉流的概念以及RTMP和HLS协议

https://www.bbsmax.com/A/x9J2wZM56o/ 推流为将直播内容推送至服务器的过程:拉流为服务器已有直播内容,用指定地址进行拉取的过程. rtmp rtmp是Real Time Messaging Protocol(实时消息传输协议)的首字母缩写.该协议基于TCP,是一个协议族,包括RTMP基本协议及RTMPT/RTMPS/RTMPE等多种变种.RTMP是一种设计用来进行实时数据通信的网络协议,主要用来在Flash/AIR平台和支持RTMP协议的流媒体/交互服务器之间进

【转】直播流程,视频推流,视频拉流,简介,SMTP、RTMP、HLS、 PLPlayerKit

原:https://www.cnblogs.com/baitongtong/p/11248966.html 1 .音视频处理的一般流程: 数据采集→数据编码→数据传输(流媒体服务器) →解码数据→播放显示1.数据采集:摄像机及拾音器收集视频及音频数据,此时得到的为原始数据涉及技术或协议:摄像机:CCD.CMOS拾音器:声电转换装置(咪头).音频放大电路2.数据编码:使用相关硬件或软件对音视频原始数据进行编码处理(数字化)及加工(如音视频混合.打包封装等),得到可用的音视频数据涉及技术或协议:编码

Windows平台RTMP/RTSP直播推送模块设计和使用说明

开发背景 好多开发者一直反馈,Windows平台,做个推屏或者推摄像头,推RTMP或者RTSP出去,不知道哪些功能是必须的,哪些设计是可有可无的,还有就是,不知道如何选技术方案,以下是基于我们设计的Windows平台RTSP.RTMP直播推送模块,设计和使用说明,供大家参考. 整体方案架构 Windows平台RTMP或RTSP推送,系采集端模块,主要完成,屏幕或者摄像头数据.麦克风或扬声器数据的采集,编码,然后按照特定格式打包,通过RTMP或者RTSP传输出去,实现直播目的. 对应设计架构图的“

vue播放rtmp、hls m3u8格式视频

选用Video.js作为视频播放库,如果要支持hls m3u8还需要videojs-contrib-hls组件的支持. 安装Video.js npm install --save video.js 安装videojs-contrib-hls npm install --save videojs-contrib-hls 创建一个vue的播放组件 src/components/VideoPlayer/index.vue <template> <div> <video ref=&q