Simple steps to create a network video Live platform classification: Learn 2013-02-04 13:20 read (1132) Comments (0)
Whether it is personal play or enterprise use, live radio always appear relatively high-end and mysterious, today we look at how to use a few simple steps to achieve a flash streaming media server-based network video direct live platform.
1. Service-Side Preparation
Common free flash Streaming media server has domestic and international Open source red5 ums only windows platform installation package, and java developed red5
UMS relatively simple, full classic Windows Program installation procedures, no configuration during installation, automatic registration as system services after installation, basic applications without configuration, advanced settings are Chinese GUI interface, Suitable for novice use.
Red5to beWindowsThe system is available in both green and installed versions because of its useJavadevelopment, all must be installedJavaRun the Environment pack (JRE). It is important to note that the current latest1.01versionRed5Default UsageJava7compile, need to installJRE7; If the download isSetup-red5-1.0.1-java6.exesimilar version, you need to installJRE6. From0.9.1The installation version will register the system service, its basic application also does not need to configure, but the advanced application needs to modify the configuration document, to the user request relatively high. Red5During installation, you are prompted to let the input bindingIPand provideHTTPport number of the service, if you keep the default direct carriage return, you do not have to enter it. Tested, in the same terminal sampling setup case,Red5screen ratioUMSmore fluid and clear, recommended use.
After the Red5 or UMS are installed and running, the system is enabled by default to use the RTMP protocol to deliver the video stream using the 1935 port, which is provided by default Live service point whose access address is rtmp://< Your server ip>/live.
2. Release-Ready
The publishing side is our platform for publishing live video and audio, which does not need to run on the server as long as it can be connected to the server. There are two common types of publishers:Red5 , the default installation, provides a web - run publisher that uses Flash , whose default access address is http://< Your Server ip>:5080/demos/publisher.html In addition, it runs in the form of traditional software . Adobe Flash Media Live Encoder , you need to download the installation. Relatively speaking, the former is more convenient for web-based operation, while the latter is better stability.
The former configures the main steps: (1) Modify bottom leftServertab in Locationaccess the address for the server, as described abovertmp://<Your Serverip>/live, set the encoding, buffering, and so on as needed, and then clickConnect, if the lower right corner appearsConnected to Serverindicates a successful connection to the server;2) Switch toVideo,Audioset parameters such as video, audio input device, and click on the tab interface, respectively.Startbutton,StartThe button text will change toApply, which means that you can continue to change the parameters and click this button to make the new settings work, set the top leftPublishThe screen captured by the camera will appear in the tab interface;3) ModifyPublishtab, underNamefor the name of the video stream, such asMylivechat, select itsTypeThe drop-down box isLive, then the access address of the video stream isrtmp://<Your ServerIp>/live/mylivechat, and finally clickPublishbutton, the live video was published successfully.
The Adobe Flash Media Live Encoder settings are the same as Red5 publisher , except that the name has changed and is not mentioned.
These two publishers also provide some other useful functions, such as online recording, video adjustment, volume control, etc., interested in self-pondering.
3. Watch Live Preparation
Whether based onWebor is it the usual form of software that generally supportsRTMPthe protocol's player can be connected to the video stream that was successfully published previously as described in Live view. Based onWebplayed byFlashThe player mainly hasJW Player,CMP4,Ckplayer,FlowPlayer,UMSBring your ownlive.swfand so on, where the least delay isHTML5version ofFlowPlayer, unfortunatelyIE6/7not supportedHTML5;CMP4good compatibility, support Chinese path. If the video server address is26.137.32.254, access point isLive, the video stream isLivestream ', here are a few commonWebThe calling code of the player for reference.
Ckplayer 's playback code:
<div id= "Player" ></div>
<script type= "Text/javascript" src= "Ckplayer/ckplayer.js" charset= "Utf-8" ></script>
<script type= "Text/javascript" >
var flashvars={
F: ' Rtmp://26.137.32.254/live/livestream ',// video address
I: ' http://26.137.32.254/v4/statics/images/fantan_bg.jpg ',// initial picture address
D: ' http://26.137.32.254/v4/statics/images/fantan_bg.jpg ',// pause when playing ads,swf/ Pictures
V: ' 0-100 ',// default volume, between
P: ' 0 ',// video default 0 is paused,1 is play
B: ' 0x000 ',// player background color, if not set, will be transparent by default
};
var params={bgcolor: ' #000000 ', allowfullscreen:true,allowscriptaccess: ' Always ', wmode: ' Opaque '};
var attributes={id: ' Ckplayer_player ', Name: ' Ckplayer_player '};
swfobject.embedswf (' ckplayer/ckplayer.swf ', ' Player ', ' 296 ', ' + ', ' 10.0.0 ', ' ckplayer/expressinstall.swf ', Flashvars, params, attributes);
</script>
CMP4 's playback code:
<div id= "Player" style= "width:300px;height:225px;" ></div>
<script type= "Text/javascript" src= "Cmp/cmp.js" ></script>
<script type= "Text/javascript" >
var flashvars = {
Name: "CMP4",
Bg_video: "Images/fantan_bg.jpg",
Video_image: "Images/fantan_bg.jpg",
SRC: "ftp://26.137.32.253/web/movie/1 movie / 1942 . flv",// play normal video
rtmp: "Rtmp://26.137.32.254/live",
SRC: "Livestream",
Buffer_time: "0.1",
Skin: "Tvlive.zip"
};
var htm = cmp.create ("CMP", "100%", "100%", "cmp/cmp.swf", flashvars);
document.getElementById ("Player"). InnerHTML = htm;
</script>
the playback code of the UMS comes with the player:
<script type= "Text/javascript" src= "Player.js" ></script>
<script type= "Text/javascript" >
var so = new SWFObject (' live.swf ', ' ply ', ' n ', ' n ', ' 9 ', ' #000000 ');
So.addparam (' allowFullScreen ', ' true ');
So.addparam (' allowscriptaccess ', ' always ');
So.addparam (' wmode ', ' opaque ');
So.addvariable (' file ', ' livestream ');
So.addvariable (' Streamer ', ' rtmp://26.137.32.254:1935/live ');
So.write (' Mediaspace ');
</script>
Simple steps to create a network video live platform (turn)