项目地址:Gitee:https://gitee.com/AiShiYuShiJiePingXing/streaming_media
流媒体系列博文及资料:
博客:爱是与世界平行:流媒体栏目
流媒体项目,实现在浏览器无插件形式播放视频,实现方式包含多种案例,将使用过的案例整合在一个项目之中,提供流媒体播放的方案参考!
本软件为开源软件,遵守开源协议:MIT
用于在网页端播放视频,支持mp4,flv,m3u8及rtmp协议的直播,支持移动端,PC端
软件分为两部分,1:javascript构建支持HTML5环境的播放器,2:actionscript3.0构建支持ie9以前支持flashplayer环境的播放器
ckplayer不存在安装过程,将下载包里的ckplayer文件夹(该文件夹包含ckplayer.js,ckplayer.swf,ckplayer.json等文件)上传到网站环境中即可使用,在需要播放视频的页面上插入下面代码即可,注意引入ckplayer.js文件的路径
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8" data-name="ckplayer"></script>
<div class="video" style="width: 600px;height: 400px;">播放器容器</div>
<script type="text/javascript">
//定义一个变量:videoObject,用来做为视频初始化配置
var videoObject = {
container: '.video', //“#”代表容器的ID,“.”或“”代表容器的class
variable: 'player', //播放函数名称,该属性必需设置,值等于下面的new ckplayer()的对象
video: 'http://ckplayer-video.oss-cn-shanghai.aliyuncs.com/sample-mp4/05cacb4e02f9d9e.mp4'//视频地址
};
var player = new ckplayer(videoObject);//初始化播放器
</script>
使用过程中碰到问题,请至官网查看手册:http://www.ckplayer.com/manual/
EasyPlayer.js H5播放器,是一款能够同时支持HTTP、RTMP、HTTP-FLV、HLS(m3u8)视频直播与视频点播等多种协议,支持H.264、H.265、AAC等多种音视频编码格式,支持mse、wasm等多种解码方式,支持Windows、Linux、Android、iOS全平台终端的H5播放器。
1.引入
copy EasyWasmPlayer.js 到项目中
copy libDecoder.wasm到项目或者www的根目录(一定要根目录)
2.在 html 中引用 EasyWasmPlayer.js
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EasyWasmPlayer-Demotitle>
<script src="./EasyWasmPlayer.js">script>
<style>
.box {
width:600px;
height:400px;
}
style>
head>
<body>
<div class="box">
<div id="Player">div>
div>
<script>
// 实例化播放器
var Player = new WasmPlayer(null,'Player',callbackFun,{
cbUserPtr:this, decodeType:"auto", openAudio:1, BigPlay:false, Height:true});
// 调用播放
Player.play('url', 1)
script>
body>
html>
var player = new wasmPlayer(url,ID,callbackFun,{cbUserPtr:this, decodeType"auto" or “soft”, openAudio"1" or “0”, BigPlay"true" or “false”, Height:" true" or "false});
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
url | 视频地址 | String | null |
ID | 播放器实例的divID (必传) | String | - |
callbackFun | 事件回调 | function | - |
cbUserPtr | 自定义指针 (this的指向) | this | |
decodeType | 解码类型(auto:默认,soft:强制H265解码) | String | auto |
openAudio | 是否打开音频 | Boolean | false |
BigPlay | 是否开启大的播放按钮 | Boolean | false |
Height | 播放器尺寸是否继承父盒子的 | Boolean | false |
play(url,autoplay,currentTime)
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
url | 播放流地址 | String | - |
autoplay | 是否自动播放 | Boolean | 默认0 |
currentTime | 视频开始时间(换算成秒) | Number | 默认this |
方法名 | 说明 | 参数 |
---|---|---|
play | 播放事件 | url:‘流地址’,autoplay: ‘自动播放’,currentTime:‘开始时间’ |
pause | 播放暂停 | - |
destroy | 停止播放 | - |
openAudio | 打开声音 | - |
closeAudio | 关闭声音 | - |
startLoding | 开始加载动画 | - |
endLoding | 结束加载动画 | - |
fullScreen | 开启或退出全屏 | - |
测试页面:http://127.0.0.1:7081/flv.html
前端使用flvjs播放
http://127.0.0.1:7081/live/{url}/live.flv url=base64(视频流地址)
(该接口直接响应flv格式视频流)
var flvPlayer = flvjs.createPlayer({type: ‘flv’,url:‘http://127.0.0.1:7081/live/{base64加密后的流地址}/live.flv’,isLive: true});
flvPlayer.attachMediaElement(document.getElementById(id));
flvPlayer.load();
flvPlayer.play();
对于转包装方式一路流在i5 7500配置下cpu占用在1%左右
2020-07-17
更新了转码的方法,现在对输入的流没有任何要求了,对于符合H264,AAC的流会使用低性能消耗的转包装方式进行,其他格式会先进行转码操作
worker_processes 1; #运行在Windows上时,设置为1,因为Windows不支持Unix domain socket
#worker_processes auto; #1.3.8和1.2.5以及之后的版本
#worker_cpu_affinity 0001 0010 0100 1000; #只能用于FreeBSD和Linux
#worker_cpu_affinity auto; #1.9.10以及之后的版本
error_log logs/error.log error;
#如果此模块被编译为动态模块并且要使用与RTMP相关的功
#能时,必须指定下面的配置项并且它必须位于events配置
#项之前,否则NGINX启动时不会加载此模块或者加载失败
#load_module modules/ngx_http_flv_live_module.so;
events {
worker_connections 4096;
}
http {
include mime.types;
default_type application/octet-stream;
keepalive_timeout 65;
server {
listen 80;
location / {
root /var/www;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
location /live {
flv_live on; #打开HTTP播放FLV直播流功能
chunked_transfer_encoding on; #支持'Transfer-Encoding: chunked'方式回复
add_header 'Access-Control-Allow-Origin' '*'; #添加额外的HTTP头
add_header 'Access-Control-Allow-Credentials' 'true'; #添加额外的HTTP头
}
location /hls {
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
root /tmp;
add_header 'Cache-Control' 'no-cache';
}
location /dash {
root /tmp;
add_header 'Cache-Control' 'no-cache';
}
location /stat {
#推流播放和录制统计数据的配置
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}
location /stat.xsl {
root /var/www/rtmp; #指定stat.xsl的位置
}
#如果需要JSON风格的stat, 不用指定stat.xsl
#但是需要指定一个新的配置项rtmp_stat_format
#location /stat {
# rtmp_stat all;
# rtmp_stat_format json;
#}
location /control {
rtmp_control all; #rtmp控制模块的配置
}
}
}
rtmp_auto_push on;
rtmp_auto_push_reconnect 1s;
rtmp_socket_dir /tmp;
rtmp {
out_queue 4096;
out_cork 8;
max_streams 128;
timeout 15s;
drop_idle_publisher 15s;
log_interval 5s; #log模块在access.log中记录日志的间隔时间,对调试非常有用
log_size 1m; #log模块用来记录日志的缓冲区大小
server {
listen 1935;
server_name www.test.*; #用于虚拟主机名后缀通配
application myapp {
live on;
gop_cache on; #打开GOP缓存,减少首屏等待时间
}
application hls {
live on;
hls on;
hls_path /tmp/hls;
}
application dash {
live on;
dash on;
dash_path /tmp/dash;
}
}
server {
listen 1935;
server_name *.test.com; #用于虚拟主机名前缀通配
application myapp {
live on;
gop_cache on; #打开GOP缓存,减少首屏等待时间
}
}
server {
listen 1935;
server_name www.test.com; #用于虚拟主机名完全匹配
application myapp {
live on;
gop_cache on; #打开GOP缓存,减少首屏等待时间
}
}
}
FFCH4J项目全称:FFmpeg命令处理器,鉴于很多小伙伴们反馈原名太长,改为‘FFCH4J’
Java封装的提供ffmpeg命令执行、停止、查询功能的简单管理器 。
FFCH4j不仅仅只支持ffmpeg命令,还支持执行多平台的命令行指令,不管是执行linux命令还是windows的命令行都是手到擒来(注意:本项目并未屏蔽某些敏感操作,比如rm -rf,当然这会产生一些风险,还请注意规避)。
除了保证命令行运行,还拥有独立的轻量级的保活线程来重启因为异常故障导致中断的任务。
零依赖(不依赖任何第三方jar包,只需要java运行环境即可运行),完全接口化(所有内部组件都实现了完全接口化,开发人员可以方便的修改和扩展程序,比如自行实现持久层接口来替换默认的持久层)。