Home > Developer > Web Develop
1, the company used before:
Live: Rtmp+jwplayer
On demand: h5 (MP4 file)
Cons: Poor compatibility, seemingly with the system version, browser, browser version is related. There is the rtmp push stream generated files are FLV format, need to transcode into MP4 to on-demand.
2, the advantages of srs+flv.js:
Of course, compatibility has greatly improved, in the PC-side Google, Firefox can play, mobile phone-side Firefox can, Google does not, the other is not measured.
3, to see the effect:
Style is not added, the official demon directly copy it over.
4, Flv.js download, build:
Github:https://github.com/bilibili/flv.js
After decompression, enter Mater:
Build:
npm install
npm install -g gulp
gulp release
Generated the JS we need under the dist.
Flv.html:
<! DOCTYPE html>
<html>
<head>
<meta content = "text / html; charset = utf-8" http-equiv = "Content-Type">
</ head>
<body>
<script src = "flv.min.js"> </ script>
<video id = "videoElement"> </ video>
<script>
if (flvjs.isSupported ()) {
var videoElement = document.getElementById (‘videoElement’);
var flvPlayer = flvjs.createPlayer ({
type: ‘flv’,
url: ‘http://192.168.2.192/live/video.flv’
});
flvPlayer.attachMediaElement (videoElement);
flvPlayer.load ();
flvPlayer.play ();
}
</ script>
</ body>
</ html>
type can be mp4, flv. The type of the url must correspond, which can be a server file or a temporary file for rtmp streaming.
In this step, you can test whether the on-demand is normal. The file should be accessed under the http server under the http protocol and cannot be accessed in the form of a file. The http server can be nginx, python, tomcat, etc.
5. If the previous step is successful, the next step is to set up an SRS server.
Github: https://github.com/ossrs/srs/wiki/v2_CN_SampleHttpFlv
This article is more detailed, here are the simple recording steps:
Assuming you have downloaded and compiled SRS, you can refer to: SRS server setup, ffmpeg local push stream
First copy the http.flv.live.conf in the conf to my.http.flv.live.conf with the content:
# the config for srs to remux rtmp to flv live stream.
# @see https://github.com/ossrs/srs/wiki/v2_CN_DeliveryHttpStream
# @see full.conf for detail config.
listen 1935;
max_connections 1000;
daemon off;
srs_log_tank console;
http_server {
enabled on;
listen 80;
dir ./objs/nginx/html;
}
vhost __defaultVhost__ {
http_remux {
enabled on;
mount [vhost] / [app] / [stream] .flv;
hstrs on;
}
dvr {
# https://github.com/ossrs/srs/wiki/v2_CN_DVR
enabled on;
dvr_path ./objs/nginx/html/[app]/[stream].flv;
dvr_plan session;
dvr_duration 30;
dvr_wait_keyframe on;
time_jitter full;
}
}
Here the service port of http is 80, the configuration to save the rtmp stream file is added, and the storage path is specified.
Start SRS:
./objs/srs -c conf / my.http.flv.live.conf
The next step is to push stream.
Assume you have ffmpeg installed.
ffmpeg -re -i /root/Videos/video.flv -c copy -f flv rtmp: //192.168.2.192/live/video
If the streaming is successful, you can play rtmp: //192.168.2.192/live/video in VLC, so the URL in the previous html is: http://192.168.2.192/live/video.flv,
Copy the previous html / js to / RS / objs / nginx / html / of SRS, and visit http: //ip/flv.html (The http service at this time is provided by SRS, which is different from the previous one). Note that the The IPs in the HTML are consistent, otherwise cross-domain errors will be reported.
At this point, the prototype of the entire live on-demand service was successfully established!
SRS + flv.js creates a highly compatible live and on-demand platform
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
