### 接入监控视频：
1. 主要概述：因为摄像头的视频流是通过 rtmp 推流的，直接通过vue3中的播放器(videojs) 播放会因为缺少flash插件无法播放，目前的主流浏览器也基本去flash 化，于是考虑将rtmp 转成hls 流后再进行播放；
2. ffmpeg:rtmp 转hls ,可以利用ffmpeg(查资料较多使用的一种)，配置环境变量：在“Path”变量原有变量值内容上加上d:\ffmpeg\bin(根据安装位置)，验证：cmd =>ffmpeg -version 出现版本号则成功
软件下载地址（百度网盘）
链接：https://pan.baidu.com/s/1wFxi115-ZP56iSNiwYqoXg
提取码：iw5a3. Nginx 使用ffmpeg只是得到了hls 流的视频（出现一个.m3u8文件及多个.ts 文件），因为一般不来考虑在本地存储所有的视频文件，一般考虑使用服务器讲得到的视频传递出去，合理设置参数，即使清理本地的文件。
3.1、下载Nginx,版本需求：nginx-1.7.11.3-Gryphon,该版本内置了rtmp 模块，普通的nginx 没有
//下载方式
链接：https://pan.baidu.com/s/1qd0YzKu_dPd0xs4pq0nPsw
提取码：6c113.2、 配置文件
解压缩后，打开conf下，添加文件nginx-win-rtmp.conf,添加以下内容：
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
rtmp{
server {
listen 1935;
chunk_size 4000;
#RTMP
application live {
live on;
# record first 1K of stream
record all;
record_path d:/Nginx/tmp/av;
record_max_size 1K;
# append current timestamp to each flv
record_unique on;
# publish only from localhost
allow publish 127.0.0.1;
deny publish all;
#allow play all;
}
#HLS
# For HLS to work please create a directory in tmpfs (/tmp/app here)
# for the fragments. The directory contents is served via HTTP (see
# http{} section in config)
#
# Incoming stream must be in H264/AAC. For iPhones use baseline H264
# profile (see ffmpeg example).
# This example creates RTMP stream from movie ready for HLS:
#
# ffmpeg -loglevel verbose -re -i movie.avi -vcodec libx264
# -vprofile baseline -acodec libmp3lame -ar 44100 -ac 1
# -f flv rtmp://localhost:1935/hls/movie
#
# If you need to transcode live stream use 'exec' feature.
#
application hls {
live on;
hls on;
hls_path d:/Nginx/tmp/hls;
hls_fragment 5s;
#hls_cleanup on;
hls_playlist_length 30s;
}
}
}
http{
server {
listen 8765;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
}
location /hls {
# Serve HLS fragments
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
alias d:/Nginx/tmp/hls;
expires -1;
add_header Cache-Control no-cache;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
}
location /hls2 {
# Serve HLS fragments
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
alias d:/Nginx/tmp/hls2;
expires -1;
add_header Cache-Control no-cache;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
}
location /hls3 {
# Serve HLS fragments
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
alias d:/Nginx/tmp/hls3;
expires -1;
add_header Cache-Control no-cache;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
}
location /hls4 {
# Serve HLS fragments
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
alias d:/Nginx/tmp/hls4;
expires -1;
add_header Cache-Control no-cache;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
}
location /stat {
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}
location /stat.xsl {
root /usr/local/extend_module/nginx-rtmp-module/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}上述代码有几个注意事项：
1.端口设置：rtmp 的端口设置为1935，这是公认的rtmp 端口，一般不改
2.http端口设置：8765，这个端口需保证并没有被占用，若被其他进程占用，则更改
3.application hls {
live on;
hls on;
hls_path d:/Nginx/tmp/hls;
hls_fragment 5s;
#hls_cleanup on;
hls_playlist_length 30s;
}
这一段代码表示hls地址存放的位置，本人使将安装包解压之后更改了名称，并放在了D盘下，可自行处理，但是要确保有正确路径（应该需要添加文件夹/hls）;
hls_fragment 和hls_playlist_length 表示hls 文件的时间长度，不宜设太短3.3、nginx 启动 3.3.1、在nginx 解压路径下运行cmd,或直接cmd 进入nginx 的解压路径， 运行nginx -t 测试conf； 运行nginx -V ,查看已加载的配置，找到 --add-module=objs/lib/nginx-rtmp-module 表示已加载rtmp模块，其实这是该版本内置的， 若 正常版本，需下载相应的安装包nginx-rtmp-module-master（本人未最终实现）
(题外话，可能使因为本人电脑的问题，运行本版本nginx命令的时候一直报错：由于找不到MSVCP100.dll,无法继续执行代码。若使用别的的nginx的版本就没有此问题，但是配置rtmp的时候又会报错，试了多次没配置成功，权衡之下，选择了nginx-1.7.11.3-Gryphon，所以只需要解决驱动的问题就行了。 查了资料，多种解决方法，但是没找到免费的，最终还是下载了驱动大师，开会员修复了此问题。没能白嫖，丢了程序员的脸，也做了次自己给自己买萝卜拉磨的驴，哎！哎！哎！)
3.3.2 、运行命令： nginx.exe -c conf/nginx-win-rtmp.conf，运行nginx,此时通过任务管理器可看到nginx 进程已打开，或打开网页localhost:8765(之前设的端口值)也显示 Welcome to nginx !
3.3.3、重新打开一个cmd,进入到ffmpeg安装路径下，运行命令：
ffmpeg -i rtmp://liteavapp.qcloud.com/live/liteavdemoplayerstreamid -c:v libx264 -c:a aac -strict -2 -f flv rtmp://localhost:1935/hls/cf
rtmp 直播流测试地址：rtmp://liteavapp.qcloud.com/live/liteavdemoplayerstreamid
//则ffmpeg 开启 将rtmp 流视频拉取到本地 ，路径为：//localhost:1935/hls/cf，本人的实际路径为：D:\Nginx\tmp\hls 
3.3.4、可在播放器上查看转换后的视频，本人使用的是VLC播放器，可查看网络直播流：媒体->打开网络串流->输入地址(http://127.0.0.1:8765/hls/cf.m3u8)->播放。至此，利用ffmpeg + nginx 将rtmp 转hls 的部分结束
4.VUE 接入转换后的hls视频流：
npm install video.js
npm install videojs-contrib-hls <!-- 直接上代码，因为环境可能不一致，各位见仁见智 -->
<!-- 使用video.js播放器 -->
<template>
<dv-loading v-if="loading" class="load_class">视频加载中...</dv-loading>
<video
ref="videoPlayer"
class="video-js vjs-default-skin"
controls
preload="auto"
></video>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import 'videojs-contrib-hls';
const videoPlayer = ref(null);
onMounted(() => {
// 初始化video.js播放器
const player = videojs(videoPlayer.value, {
// Video.js选项
controls: true, // 显示控制条
preload: 'auto', // 预加载视频
autoplay: true, // 尝试自动播放视频（但可能受浏览器自动播放策略限制）
fluid: true, // 播放器尺寸自适应容器
muted: false, // 是否静音
loop: false, // 是否循环播放
language: 'zh-CN', // 设置语言
// 播放源
sources: [
{
// src: 'http://127.0.0.1:8765/hls/cf.m3u8',
src: 'http://139.196.189.111:5000/hls/J21324887_playback.m3u8',
type: 'application/x-mpegURL'
}
]
});
// 为播放器添加错误处理
player.on('error', () => {
console.error('播放器错误');
});
});
</script> 
至此，利用ffmpeg+nginx + vue +videojs 转换视频流的部分结束！！！！
357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
