网络摄像头RTSP视频流WEB端实时播放实现方案

IPC视频流怎么实时在WEB浏览器播放,视频流格式是RTSP。
下面我整理了自己实现的方案以及网上看到的一些方案

一、FFmpeg + nginx 将转 hls 通过 video.js 在支持h5浏览器播放(我实现的)

参见:Nginx+FFmpeg实现rtsp流转hls流,在WEB通过H5 video实现视频播放

不足:hls延迟较rtmp、http-flv大

二、FFmpeg + nginx-rtmp-module + h5 video,rtsp转rtmp播放

https://blog.csdn.net/gui66497/article/details/78590190
https://blog.csdn.net/LLittleF/article/details/81111713

注:通过video.js播放rtmp流。需要将代码放到服务器,本地windows电脑无法播放

不足:需要浏览器开启flash

三、FFmpeg + nginx-http-flv-module + flv.js,rtsp转rtmp,直接播放flv格式

基于nginx-rtmp-module,通过配置将rtmp转为flv,最后通过flv.js播放。
https://github.com/winshining/nginx-http-flv-module/blob/master/README.CN.md
https://segmentfault.com/a/1190000016043297
https://blog.csdn.net/qq_22633333/article/details/96288603#comments

这种方式是最理想的,我目前找到的方案。当然单指不想花钱买收费方案的。

四、WebRTC

https://github.com/lulop-k/kurento-rtsp2webrtc
https://www.jianshu.com/p/1ddfa72de165

            

使用 getUserMedia 和功能策略在跨域 iframe 中访问相机和麦克风

如果您尝试在最新版本的 Chrome 上getUserMedia()使用跨源 iframe访问相机和麦克风,默认情况下它将失败。

我们已经多次遇到过这种情况,因为Pipe 音频和视频录制平台的用户试图将 Pipe 嵌入到使用 iframe 嵌入外部 HTML 和 JS 代码的Wix网站或Google 站点中。

原因源于 2017 年和 2018 年对 Chrome 进行的一系列安全和隐私更改:

  1. Chrome 60 引入了功能策略,为开发人员提供了一种方法来控制其网站内敏感功能的使用
  2. 默认情况下, Chrome 64 会阻止跨源 iframe

网站升级为https后引用http报错:This request has been blocked; the content must be served over HTTPS

HTTPS 是 HTTP over Secure Socket Layer,以安全为目标的 HTTP 通道,所以在 HTTPS 承载的页面上不允许出现 http 请求,一旦出现就是提示或报错:

Mixed Content: The page at ‘https://www.taobao.com/‘ was loaded over HTTPS, but requested an insecure image ‘http://g.alicdn.com/s.gif’. This content should also be served over HTTPS.

HTTPS改造之后,我们可以在很多页面中看到如下警报:

很多运营对 https

supervisor 添加新配置不生效的问题,supervisor 提示:xxx: ERROR (no such process)

增加了新的配置文件xxx.conf后,使用supervisorctl start xxx 提示 “xxx: ERROR (no such process)”。

使用supervisorctl start all也不行。

解决:

 

在新增配置文件后,要使用

supervisorctl reread

supervisorctl reload (不运行这一步会导致启动不了)

supervisorctl update命令,使用此命令后会自动加载新的配置,并且启动该进程。

 

 

 

音频降噪音,回声消除,自动增益代码示例

json

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <style>
    html, body{
      height: 100%;
      width: 100%;
    }
    #video{
      height: 300px;
      width: 300px;
    }
  </style>
  <script>
    $(() => {
      var constraints =  {
        audio: {
          echoCancellationType: 'system',//browser|system
          echoCancellation: true,
          noiseSuppression: 
        

nginx 流媒体服务器,nginx tcp http负载均衡,nginx 流转发,nginx 推流,nginx rtmp

用到了   https://github.com/winshining/nginx-http-flv-module

nginx 流媒体服务器,nginx tcp http负载均衡,nginx 流转发,nginx 推流,nginx rtmp

user www-data;
worker_processes auto;
pid /run/nginx.pid;
#worker_cpu_affinity  auto; #1.9.10 以及之后的版本

include /etc/nginx/modules-enabled/*.conf;

load_module modules/ngx_http_flv_live_module.so;


worker_rlimit_nofile 200000;


events {
  worker_connections 10240;
  #multi_accept on;
}

http {

  ##
  # Basic Settings
  
    

为 NGINX 和 NGINX Plus 编译第三方动态模块

编辑器 - 宣布动态模块支持的原始版本(在 NGINX 开源 1.9.11 中,2016 年 2 月)的博客文章重定向到这里。该帖子中描述的构建过程已被弃用。

这篇文章是关于在 NGINX Open Source 和 NGINX Plus 中使用第三方动态模块的两部分系列文章的一部分。

  • 这篇文章提供了编译第三方动态模块的分步说明,这些模块可以在运行时由 NGINX Open Source 或 NGINX Plus 加载。
  • 第二篇文章提供了为生产环境自动构建第三方动态模块的指导和工具。它解释了如何为包括版本依赖性检查的第三方动态模块创建可安装包。

NGINX Open Source 1.11.5 和NGINX Plus Release R11引入了动态模块的二进制兼容性。本文解释了如何编译第三方模块以在开发环境中与 NGINX Open