Streaming Media (Rtmp,rtsp,hls)

Introduction to Streaming Media (Rtmp,rtsp,hls)

Recent projects require streaming media playback, the backend provides a total of three stream data (Rtsp,rtmp,hls), in different scenarios may be used in different ways to play, it needs to be adapted to support all streaming data playback. Spent a period of time to study, here and share with you, there are some legacy problems, see if you have a good way.

About RTSP

This protocol stream data front play, there is no particularly good solution, need to install a VLC plugin, rely on this plugin to let the RTSP protocol can play on the Web page, but the current high version of the Chrome browser does not support the NPAPI plugin, that is, the high version of Chrome The browser is still not playable (46 or more versions are not available).

HTML code

  <ObjectType=' 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" ><ParamName=' MRL 'Value=' Rtsp://***********************/streaming/channels/1 '/><ParamName=' Volume 'Value='/> '<ParamName=' AutoPlay 'Value=' True '/><ParamName=' Loop 'Value=' False '/><ParamValue="Transparent"Name="Wmode" ><Embedid= ' VLC ' wmode=  "Transparent" type= "application/ X-vlc-plugin "width=" $ "height= "
                                                               
                                                                pluginspage=
                                                                 "/http" www.videolan.org "allownetworking=" internal " allowscriptaccess= "always" quality=< Span class= "hljs-string" > "high" src= "rtsp://****************** /STREAMING/CHANNELS/1 "> </OBJECT>   
                                                                

The code is very simple, more play flash difference is not very big, need to change a few points,
1.object tags type , codebase properties
2.param Label<param name=‘mrl‘ value=‘rtsp://***********************/Streaming/Channels/1‘ />

JS Code

     Get VLC JS FormationfunctionGETVLC (Name) {if (Window.document[name]) {ReturnWindow.document[name]; }if (Navigator.appName.indexOf ("Microsoft Internet") = =-1) {if (document.embeds && document.embeds[name]) return document.embeds[name];} else {return  document.getElementById (name); }} //based on address switch video function dogo (MRL) {try { var VLC = GETVLC ( "VLC"), ItemId = Vlc.playlist.add (MRL); Vlc.playlist.playItem (ITEMID); } catch (e) {console.log (e);}} //call Dogo (MRL)            

We use the JS code is mainly used to switch the address, to achieve if the stream data address changes, the content follows the change

About HLS

Http Live Streaming (HLS), which is very good in mobile Web browser support, so now a lot of mobile live is in use this protocol. However, it is not supported on PC Chrome,firefox, so you need to use Flash. In the course of the study found video.js this plugin, code hosted on GitHub, open source. However, it does not directly support playback of the HLS protocol. Need to use Videojs-contrib-hls but I do not test the success, not play. You can contact me if you have a test pass. After a look, GitHub on a search, Huang Tian not negative, find this library fz-live I see he is based on 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>

Directly write the video tag, on the source of the src path can be, there is a requirement that the resources can not cross the domain, need to be under the same domain.

JS Code

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

We use JS to achieve the switch address playback. Video.js This plugin provides a lot of API we need to be able to view, can make a good multi-function

About RTMP

Real time Messaging Protocol (RTMP) is a set of video live protocols developed by Macromedia and now belongs to Adobe. So we can only use flash. In the study of the Video.js plug-in, it can also provide RTMP playback, which we will be more convenient.

HTML code

<video id="vlc" class="video-js vjs-default-skin" controls  preload="none" data-setup=‘{}‘></video>

See I did not write the source tag, we directly use JS to operate, to play RTMP and HLS matching.

JS Code

 player.ready ( function (var myplayer = this; Myplayer.reset (); if (Scope.type =  Console.log (type:  "Application/x-mpegurl", Src:scope.url}); } else {myplayer.src ({type: console.log (              

We use the PLAYER.SRC () method is implementation, according to different types of SRC type can be set. But every time we change the address, remember to call the Player.reset () method to reset the player. If there's no problem, you can't switch.

Conclusion

Above me is the process that I am solving the stream media data in the previous paragraph. There are several issues that need to be studied for improvement.

1. RTSP plays in Chrome's high-version browser
   2.videojs-contrib-hls This library plays HLS (guess, is not a problem with backend-given traffic)

Category: Realtime streaming

Streaming Media (Rtmp,rtsp,hls)