nginx rtmp + video.js + 摄像头rtsp流
2019-05-28 本文已影响271人
GongZH丶
利用docker搭建nginx rtmp流媒体服务器，将摄像头的rtsp视频流推送到流媒体服务器，在web页面用video.js播放。
Docker搭建nginx rtmp流媒体服务器
可以用docker hub上别人上传的镜像直接用，https://hub.docker.com/r/alfg/nginx-rtmp ， 这个镜像的地址有详细说明。
docker pull alfg/nginx-rtmp
docker run -id -p 1935:1935 -p 8080:80 --name nginx-rtmp --rm alfg/nginx-rtmp
这个服务器的推流地址
rtmp://localhost:1935/stream/hello
拉流地址是
http://localhost:8080/live/hello.m3u8
上面地址的 ‘hello’可以自定义
我们可以尝试用obs推流
image.png
image.png
然后就可以用VLC播放了
video.js播放
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>demo</title>
<link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet" />
</head>
<body>
<video
id="myVideo"
class="video-js vjs-default-skin vjs-big-play-centered"
controls
autoplay
muted
preload="auto"
width="1080"
height="708"
data-setup="{}"
>
<source
id="source"
src="http://localhost:8080/live/hello.m3u8"
type="application/x-mpegURL"
/>
</video>
</body>
<script src="https://vjs.zencdn.net/7.4.1/video.js"></script>
</html>
在Vue项目中使用，也是用video.js，在github上有个 https://github.com/surmon-china/vue-video-player适用于 Vue 的播放器组件
，就是在vue中集成video.js。
在vue单页面应用中使用：
先 npm install vue-video-player --save
然后
<template>
<div id="video_player_demo">
<video-player class="video-player-box"
ref="videoPlayer"
:options="playerOptions"
:playsinline="true"
customEventName="customstatechangedeventname"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
@ended="onPlayerEnded($event)"
@waiting="onPlayerWaiting($event)"
@playing="onPlayerPlaying($event)"
@loadeddata="onPlayerLoadeddata($event)"
@timeupdate="onPlayerTimeupdate($event)"
@canplay="onPlayerCanplay($event)"
@canplaythrough="onPlayerCanplaythrough($event)"
@statechanged="playerStateChanged($event)"
@ready="playerReadied">
</video-player>
</div>
</template>
<script>
// require styles
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
export default {
components: {
videoPlayer
},
data() {
return {
playerOptions: {
// videojs options
muted: true,
autoplay: true,
widt: '460',
height: '360',
language: 'en',
playbackRates: [0.7, 1.0, 1.5, 2.0],
sources: [
{
type: 'application/x-mpegURL',
src: 'http://localhost:8080/live/hello.m3u8'
}
],
poster: '/static/images/author.jpg'
}
}
},
methods: {
// listen event
onPlayerPlay(player) {
// console.log('player play!', player)
},
onPlayerPause(player) {
// console.log('player pause!', player)
},
// or listen state event
playerStateChanged(playerCurrentState) {
// console.log('player current update state', playerCurrentState)
},
// player is ready
playerReadied(player) {
console.log('the player is readied', player)
// you can use it to do something...
// player.[methods]
}
}
}
</script>
代码自由编写调整。
C#程序推流
推流可以用obs,好像很多直播网站就是用这个推流的，
但是现在的场景不同，需要在后台把摄像头的rtsp流推到服务器，就用ffmpeg,因为ffmpeg太强大了。
找了很久没有找到合适的.Net Core 平台的ffmpeg库，由于程序运行在windows（摄像头的服务器在windows上，而且这台服务器rtsp流只能在内网访问，很累）,目前不需要跨平台，
那就直接通过C#的Process类直接调用ffmpeg.exe来推流。
写个控制台程序：
using System;
using System.Diagnostics;
using System.IO;
using System.Threading;
using ffmpeg_demo.Test;
namespace ffmpeg_demo
{
class Program
{
static void Main(string[] args)
{
string fromRTSP = "rtsp://admin:admin@192.168.0.1/cam/realmonitor?channel=1&subtype=0";
string toRTMP = "rtmp://localhost:1935/stream/hello";
ProcessStartInfo processStartInfo = new ProcessStartInfo();
// 把ffmpeg.exe放在了项目根目录下，通过Directory.GetCurrentDirectory()直接获取到地址
processStartInfo.FileName = Directory.GetCurrentDirectory() + @"\ffmpeg.exe";
processStartInfo.Arguments = " -i " + fromRTSP + " -f flv -an " + toRTMP;
processStartInfo.CreateNoWindow = false;
Process process = new Process();
process.StartInfo = processStartInfo;
process.Start();
Console.WriteLine("进程名称：" + process.ProcessName);
}
}
}
