前言

最近项目中，有遇到线上系统需要访问内网是视频资源，经过查阅资料及实践。最终实现外网播放视频流。

一、具体操作环境

  1. 线上环境使用 阿里云 服务器2. 内网环境使用 专网与外网互通3. nginx 版本 1.20.14. 视频流格式：WebSocket  ws://5. 前端使用 Vue

二、操作步骤

1.网络请求拓扑图

2.修改配置Nginx.conf


http {upstream live {server 192.168.1.22:1000;keepalive 64;}map $http_upgrade $connection_upgrade {default upgrade;'' close;}server {location /ws_sms {proxy_pass     http://live/sms;proxy_set_header Host $host:$server_port;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";}}}

2.重启Nginx

nginx -s reload

3.使用 flv.js 来实现视频播放功能

首先使用cnpm 安装 flv.js
在播放页面引入 flv.js
直接上干货！！！

<template><div><el-dialog title="视频监控" :visible.sync="dialogVisible" width="60%" :modal="false"><div><video id="videoElement1" name="videoElement" class="centeredVideo" controls muted autoplay width="100%" height="100%" /></div></el-dialog></div></template><script>
import flvjs from 'flv.js'export default {name: 'PreviewDialog',components: { },data() {return {dialogVisible: false}},mounted() {},methods: {init(data) {this.dialogVisible = true// 将原地址替换成 Nginx反向代理的地址 let ws_url = data.httpUrl.replaceAll('192.168.1.22:1000/sms', window.location.host + "/ws_sms")this.$nextTick(() => {if (flvjs.isSupported()) {let player = nullvar videoElement = document.getElementById('videoElement1')player = flvjs.createPlayer({type: 'flv', // => 媒体类型 flv 或 mp4isLive: true, // => 是否为直播流hasAudio: false, // => 是否开启声音url: ws_url // => 视频流地址})player.attachMediaElement(videoElement) // => 绑DOMplayer.load()player.play()} else {console.log('flvjs不支持')}})}}
}
</script>

总结

通过上述步骤，即可完成外网访问内网视频资源。按此方案可以解决类似问题。
特此记录。

Nginx+Flv：外网播放内网视频流解决方案相关推荐

使用NGINX代理通过外网连接内网服务器的mysql和redis等
使用NGINX代理通过外网连接内网服务器的mysql和redis等前言使用工具安装OpenResty 前言服务器A.B,现在A和B互通,外网可以访问A,但是访问不到B,数据库等中间件安装在B服 ...
Nginx反向代理：通过外网访问内网数据库（mysql）
Nginx反向代理:通过外网访问内网数据库前言项目场景: 问题描述及分析: 解决方案: 1 在部署nginx里配置端口IP 2 在外网nginx配置反向代理参数 3 重启nginx 前言部署ng ...
scaner 从外网到内网域渗透
scaner 从外网到内网域渗透本次实验环境靶场来自于暗月(moonsec)师傅,文中内容全由个人理解编制,若有错处,大佬勿喷,个人学艺不精:本文中提到的任何技术都源自于靶场练习,仅供学习参考,请勿 ...
外网访问内网(内网穿透)
什么是内网穿透内网穿透,即NAT穿透,网络连接时术语,计算机是局域网内时,外网与内网的计算机节点需要连接通信,有时就会出现不支持内网穿透.就是说映射端口,能让外网的电脑找到处于内网的电脑,提高下载速 ...
scaner从外网到内网域渗透笔记
scaner 从外网到内网域渗透 1.环境配置 1.1靶场信息用到的虚拟机共有三个分别是 12server-db .12-dc .web1 12server-db.web1 这两个可以使用桥接或者 ...
Docker+Frp+NGinx+云服务器实现HTTPS内网穿透
Docker+Frp+NGinx+云服务器实现HTTPS内网穿透服务端搭建 (用docker-compose 服务器端搭建) 前置条件 1. 一台有公网ip的服务器2. 记得在服务器安全组开放对应 ...
内网、外网、内网穿透、端口映射、IPV4、IPV6场景探讨
先附上各自概念,概念性的东西对于我们有一个大概的认识,那么实际使用与生活中又有哪些场景,来一一列举一些,了解下互联网的魅力! 一.内网内网也叫局域网(Local Area Network,LAN), ...
工控攻防演示——从外网到内网控制系统设备的入侵
给实验室写的文章,在安全客上发表,在这里再发下一.概述实验目的通过工控靶场学习web渗透.内网渗透.工控安全相关知识技能. 靶场信息本实验通过vmware 搭建了靶场的外网和内网环境,在内网环境中 ...
让外网访问内网Ngrok工具
让外网访问内网,通常一些开发的情况下会遇到这种问题,这里记录一个软件工具ngrok. 通常微信客户端,自己做测试可以直接配上本地地址用: 本地做测试服务,连调外网.这个网上有下载地址:https:// ...

Nginx+Flv：外网播放内网视频流解决方案

文章目录

前言

一、具体操作环境

二、操作步骤

1.网络请求拓扑图

2.修改配置Nginx.conf

2.重启Nginx

3.使用 flv.js 来实现视频播放功能

总结

Nginx+Flv：外网播放内网视频流解决方案相关推荐

最新文章

热门文章

Nginx+Flv：外网播放内网视频流 解决方案

文章目录

前言

一、具体操作环境

二、操作步骤

1.网络请求拓扑图

2.修改配置Nginx.conf

2.重启Nginx

3.使用 flv.js 来实现视频播放功能

总结

Nginx+Flv：外网播放内网视频流 解决方案相关推荐

最新文章

热门文章

Nginx+Flv：外网播放内网视频流解决方案

Nginx+Flv：外网播放内网视频流解决方案相关推荐