利用docker搭建nginx rtmp流媒體服務(wù)器陨囊，將攝像頭的rtsp視頻流推送到流媒體服務(wù)器，在web頁面用video.js播放乃戈。
Docker搭建nginx rtmp流媒體服務(wù)器
可以用docker hub上別人上傳的鏡像直接用，https://hub.docker.com/r/alfg/nginx-rtmp 话告， 這個鏡像的地址有詳細(xì)說明。
docker pull alfg/nginx-rtmp
docker run -id -p 1935:1935 -p 8080:80 --name nginx-rtmp --rm alfg/nginx-rtmp
這個服務(wù)器的推流地址
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 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項(xiàng)目中使用卵慰，也是用video.js沙郭，在github上有個 https://github.com/surmon-china/vue-video-player適用于 Vue 的播放器組件
，就是在vue中集成video.js裳朋。
在vue單頁面應(yīng)用中使用：
先 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>
代碼自由編寫調(diào)整病线。
C#程序推流
推流可以用obs,好像很多直播網(wǎng)站就是用這個推流的，
但是現(xiàn)在的場景不同鲤嫡，需要在后臺把攝像頭的rtsp流推到服務(wù)器送挑，就用ffmpeg,因?yàn)閒fmpeg太強(qiáng)大了。
找了很久沒有找到合適的.Net Core 平臺的ffmpeg庫暖眼，由于程序運(yùn)行在windows（攝像頭的服務(wù)器在windows上惕耕，而且這臺服務(wù)器rtsp流只能在內(nèi)網(wǎng)訪問，很累）,目前不需要跨平臺诫肠，
那就直接通過C#的Process類直接調(diào)用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放在了項(xiàng)目根目錄下，通過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("進(jìn)程名稱：" + process.ProcessName);
}
}
}
