关于海康音视频流在浏览器上播放需求

关于海康音视频流在浏览器上播放需求

    • 用到的资源
      • FFmpeg [https://ffmpeg.zeranoe.com/builds/](https://ffmpeg.zeranoe.com/builds/).
      • EasyDarwin开源流媒体服务器:[https://github.com/EasyDarwin/EasyDarwin](https://github.com/EasyDarwin/EasyDarwin)
      • VLC播放器: [https://www.videolan.org/ ](https://www.videolan.org/).
      • Nginx服务器: [http://nginx.org/en/download.html](http://nginx.org/en/download.html).
    • 工具配置
      • EasyDarwin:
      • ffmpeg: 配置ffmpeg环境变量
    • 工具使用
      • 开启EasyDarwinService 并打开EasyDarwin.exe
      • 地址栏输入http://localhost:10008(或在配置文件自定义的端口)/
      • 输入刚才测试的RTSP地址
      • 完成后可在拉流列表看到拉取的流信息
      • Video.js实现播放
      • 项目实在本机环境下测试过 一些细节比如断流续播 多窗口展示 等等功能还需二次开发 第一次写博客 一些细节可能没写 哪里不对请留言

最近老师让做个可以把海康rtsp转网络视频流并可以在网页播放 来供学校领导实时查看学校教学情况的流媒体服务器 正好看到现成的轮子 EasyDarwin开源流媒体服务器

官网:http://www.easydarwin.org/

用到的资源

FFmpeg https://ffmpeg.zeranoe.com/builds/.

关于海康音视频流在浏览器上播放需求_第1张图片

EasyDarwin开源流媒体服务器:https://github.com/EasyDarwin/EasyDarwin

关于海康音视频流在浏览器上播放需求_第2张图片

VLC播放器: https://www.videolan.org/ .

Nginx服务器: http://nginx.org/en/download.html.

工具配置

EasyDarwin:

(1)easydarwin根目录找到easydarwin.ini
(2)开启本地存储
(3)配置本地ffmpeg路径 并指定可执行文件如:C:\Users \RTMP\ffmpeg-20200623-ce297b4-win64-static\bin(\ffmpeg)
(4)根据需要更改本地存储所将要保存的根目录
关于海康音视频流在浏览器上播放需求_第3张图片

(5)根据需要更改端口 Nginx配置文件

worker_processes  2;
events {
    worker_connections  8192;
}
rtmp {
    server {
        listen 1935;
        chunk_size 4000;
        application live {
             live on;
             record all;
             record_path /tmp/av;
             record_max_size 1K;
             record_unique on;
             allow publish 127.0.0.1;
             deny publish all;
        }
    }
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        off;
    server_names_hash_bucket_size 128;
    server {
        listen       80;
        server_name  localhost;
        location /stat {
            rtmp_stat all;
            rtmp_stat_stylesheet stat.xsl;
        }
        location /stat.xsl {
            root nginx-rtmp-module/;
        }
        location /control {
            rtmp_control all;
        }



        location / {
            root   html;
            index  index.html index.htm;
        }


        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}


ffmpeg: 配置ffmpeg环境变量

关于海康音视频流在浏览器上播放需求_第4张图片

工具使用

###VLC测试RTSP流是否可用
关于海康音视频流在浏览器上播放需求_第5张图片

开启EasyDarwinService 并打开EasyDarwin.exe

注:EasyDarwin.exe在运行中不可关闭,因为测试中默认配置文件将视频存储地址设为C盘目录下 所以打开EasyDarwin.exe时需右键以管理员模式打开!
关于海康音视频流在浏览器上播放需求_第6张图片

地址栏输入http://localhost:10008(或在配置文件自定义的端口)/

关于海康音视频流在浏览器上播放需求_第7张图片

输入刚才测试的RTSP地址

rtsp://admin:password@10.***.***.*:/h264/ch1/main/av_stream

关于海康音视频流在浏览器上播放需求_第8张图片

完成后可在拉流列表看到拉取的流信息

关于海康音视频流在浏览器上播放需求_第9张图片
并可以在本地看到存储的m3u8文件
关于海康音视频流在浏览器上播放需求_第10张图片

Video.js实现播放

此时EasyDarwin已经将RTSP格式视频流转换成HLS格式视频流 保存到了本地 并将hls(m3u8) 流推出了 但是h5自带的video还不可以直接播放HLS流 这里借助了Video.js实现播放


<html>
<head>
    <meta charset=utf-8 />
    <title>videojs-contrib-hls embedtitle>

    <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
    <script src="https://unpkg.com/video.js/dist/video.js">script>
    <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js">script>
head>
<body>
<h1 style="text-align: center">Video.js Example Embedh1>
<video id="my_video_2" class="video-js vjs-default-skin" controls preload="auto" style="margin: 0 auto" width="1200" height="700"
       data-setup='{}'>
    <source src="http://127.0.0.1:10008/record/h264/ch1/main/av_stream/20200716/out.m3u8" type="application/x-mpegURL">
video>
body>
html>

项目实在本机环境下测试过 一些细节比如断流续播 多窗口展示 等等功能还需二次开发 第一次写博客 一些细节可能没写 哪里不对请留言

你可能感兴趣的:(流媒体服务器,rtmp,ffmpeg,nginx)