SRS+flv.js打造兼容性较高的直播、点播平台

1、公司之前用的是:

直播:rtmp+jwplayer

点播:h5(mp4文件)

弊端:兼容性差,貌似跟系统版本,浏览器,浏览器版本都有关。还有就是rtmp推流生成的文件是flv格式,需要转码成mp4才能点播。

2、SRS+flv.js的优点:

当然是兼容性大大提高了,在pc端谷歌,火狐都可以播放,手机端火狐可以,谷歌不行,其他没测。

3、上图,看看效果:

样式什么的没添加,官方的demon 直接copy过来。

4、flv.js下载,构建:

Github:https://github.com/Bilibili/flv.js

解压后进入mater:

构建:

npm install
npm install -g gulp
gulp release

在dist下生成了我们需要的js

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可以是mp4,flv。url的类型要对应,可以是服务器的文件,也可以是rtmp推流的临时文件。

在这一步可以测试下点播是否正常,文件应该放在http服务器下以http协议访问,不能是文件形式访问。http服务器可以是nginx,python,tomcat等都可以

5、如果上一步成功,接下来就是搭建SRS服务器了

Github : https://github.com/ossrs/srs/wiki/v2_CN_SampleHttpFlv

这篇文章介绍的比较详细,下面是简单记录步骤:

假定你已经下载并编译好了SRS,可以参考:SRS服务器搭建,ffmpeg 本地推流

首先复制conf中的http.flv.live.conf为my.http.flv.live.conf,内容:

# 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;

   }

}

这里该了http的服务端口为80,添加了保存rtmp流文件的配置,指定存储路径./objs/nginx/html/[app]/[stream].flv。

启动SRS:

./objs/srs -c conf/my.http.flv.live.conf

接下来就是推流了。

假定你安装了ffmpeg。

ffmpeg -re -i /root/Videos/video.flv -c copy -f flv rtmp://192.168.2.192/live/video

如果推流成功那就可以在VLC中播放rtmp://192.168.2.192/live/video了,这样之前的html中的url就是:http://192.168.2.192/live/video.flv,

把之前的html/js copy到SRS的/objs/nginx/html/ 下,访问 http://ip/flv.html(这时的http服务由SRS提供,和之前的不一样) ,注意ip要和html中的ip一致,否则会报跨域的错。

至此整个直播点播服务的雏形就搭建成功!

时间: 2024-10-28 09:47:49

SRS+flv.js打造兼容性较高的直播、点播平台的相关文章

集RTMP、HLS、FLV,、WebSocket 于一身的网页直播/点播播放器方案EasyPlayer.js视频播放界面快照和拉伸按钮显示多个的处理流程

背景分析 EasyPlayer几乎涵盖了开发者所需的全部平台,尤其是在web端的EasyPlayer.js,极大地方便了开发者在解决B/S型业务开发时遇到的播放器接入的问题,比如:不懂前端的js代码.没有公网服务器放置这些js脚本和网页.微信对接入IP播放地址有限制等. EasyPlayer.js适时地推出了一款非常优秀的工具页面,集 rtmp, hls, flv, websocket 于一身的网页直播/点播播放器, 使用简单, 功能强大,不论是测试,还是被集成,都很方便. 支持m3u8播放;

js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等(带图片说明)

网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;(点击查看大图) 网页可见区域宽: document.body.offsetWidth (包括边线的宽);网页可见区域高: document.body.offsetHeight (包括边线的宽);(点击查看大图)有没有发现,offsetWidth和clientWidth的区别,offsetWidt是连滚动条一起包含在内的. 网页正文全文宽: documen

js 利用canvas + flv.js实现 视频流 截屏 、本地下载功能实现,兼容火狐,谷歌, 截屏跨域的坑

1 本地视频截屏(canvsa) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=&q

Flv.js

Flv.js 是 HTML5 Flash 视频(FLV)播放器,纯原生 JavaScript 开发,没有用到 Flash.由 bilibili 网站开源. 该项目依托于 Media Source Extensions,受到 hls.js 的启发. 概览: 一个实现了在 HTML5 视频中播放 FLV 格式视频的 JavaScript 库.它的工作原理是将 FLV 文件流转码复用成 ISO BMFF(MP4 碎片)片段,然后通过 Media Source Extensions 将 MP4 片段喂进

JS打造的点灯小游戏

类似于模方游戏的网页小游戏代码,游戏玩法:在方格上点击,你可以将下面的方格全部填成蓝色吗?快开动你智慧脑筋,看看有什么技巧与规律. <HTML> <HEAD> <TITLE>接触角测定仪</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <style type="text/css"> <!-

js实现未知宽高的元素在指定元素中垂直水平居中

js实现未知宽高的元素在指定元素中垂直水平居中:本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中效果,代码如下: <!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.soft

js获取网页屏高 屏宽

<SCRIPT LANGUAGE="JavaScript"> <!-- //document.body.scrollTop 滚动条的上端距离 //document.body.scrollLeft 滚动条的左端距离 window.onload = function() { var s = ""; s += " 网页可见区域宽:"+ document.body.clientWidth; s += " 网页可见区域高:&qu

JS和jQuery宽高详解(上篇)

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 12.5px "Trebuchet MS" } li.li1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 12.5px "Trebuchet MS" } span.s1 { } span.s2 { font: 12.0px Helvetica } ol.o

CSS+js打造的网页版俄罗斯方块游戏

<HTML> <SCRIPT> parent.moveTo((screen.width-775)/2,(screen.height-540)/2); parent.resizeTo(775,540) </SCRIPT> <HEAD> <META NAME="Title" CONTENT="JScript Simple Tetris"> <TITLE>CSS+js打造的网页版俄罗斯方块游戏丨石家庄