技术研究之SRS

标签： 无 分类： 未分类 创建时间：2025-04-14 11:11:14 更新时间：2025-09-26 04:44:39

1.前言

使用srs搭建了直播服务。

参考文章:
【1】.SRS源码分析-rtmp转rtc流程
【2】.WebRTC播放组件之 jswebrtc 使用与详述
【3】.如何使用 flv.js：播放 FLV 视频文件的完整指南
【4】.JSWebrtc – 支持 SRS 的 Webrtc 播放器 这个是 jswebrtc 的使用。
【5】.JSWebrtc 项目常见问题解决方案
【6】. vue使用JSWebrtc播放webrtc视频流
【7】.WebRTC

2.编辑配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
# vi /usr/local/srs/conf/rtmp2rtc.conf
daemon              off;
srs_log_tank        console;

http_server {
    enabled         on;
    listen          8080;
    dir             ./objs/nginx/html;
}

http_api {
    enabled         on;
    listen          1985;
}
stats {
    network         0;
}
rtc_server {
    enabled on;
    listen 8000; # UDP port
    # @see https://ossrs.net/lts/zh-cn/docs/v4/doc/webrtc#config-candidate
    candidate 120.55.3.6;
}

vhost __defaultVhost__ {
    rtc {
        enabled     on;
        # @see https://ossrs.net/lts/zh-cn/docs/v4/doc/webrtc#rtmp-to-rtc
        rtmp_to_rtc on;
        # @see https://ossrs.net/lts/zh-cn/docs/v4/doc/webrtc#rtc-to-rtmp
        rtc_to_rtmp on;
listen              1935;
max_connections     1000;
daemon              off;
srs_log_tank        console;

http_server {
    enabled         on;
    listen          8080;
    dir             ./objs/nginx/html;
}

http_api {
    enabled         on;
    listen          1985;
}
stats {
    network         0;
}
rtc_server {
    enabled on;
    listen 8000; # UDP port
    # @see https://ossrs.net/lts/zh-cn/docs/v4/doc/webrtc#config-candidate
    candidate $CANDIDATE;
}

vhost __defaultVhost__ {
    rtc {
        enabled     on;
        # @see https://ossrs.net/lts/zh-cn/docs/v4/doc/webrtc#rtmp-to-rtc
        rtmp_to_rtc on;
        # @see https://ossrs.net/lts/zh-cn/docs/v4/doc/webrtc#rtc-to-rtmp
        rtc_to_rtmp on;
    }
    http_remux {
        enabled     on;
        mount       [vhost]/[app]/[stream].flv;
    }

    tcp_nodelay     on;
    min_latency     on;
    play {
        gop_cache       off;
        queue_length    10;
        mw_latency      100;
    }

    publish {
        mr off;
    }
}

3.启动

1
2
3
4
docker run --rm -itd -p 10009:1935 -p 7080:8080 -p 1985:1985 \
    --env CANDIDATE=xxx  -p 8000:8000/udp \
    -v /usr/local/srs/conf/rtmp2rtc.conf:/conf/rtmp2rtc.conf \
    registry.cn-hangzhou.aliyuncs.com/ossrs/srs:v6.0-a1 ./objs/srs -c /conf/rtmp2rtc.conf

4.开启防火墙

将 udp 端口 8000打开，这点特别的重要，以至于我都费了很长时间才解决了这个问题。

5.配置nginx

配置nginx主要就是对内部端口进行隐藏，同时可以配置 https ，有些网站可能需要 https 才能访问，这样借助于 nginx 就可以直接操作了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
# http 配置
server {
    listen 10014;
    server_name  xxx;


    add_header Access-Control-Allow-Headers *;

    # For SRS homepage, console and players
    #   http://r.ossrs.net/console/
    #   http://r.ossrs.net/players/
    #location / {
    #    proxy_pass http://127.0.0.1:7080/;
    #}
    location /live/ {
        proxy_pass http://127.0.0.1:7080/live/;
    }
    # For SRS streaming, for example:
    #   http://r.ossrs.net/live/livestream.flv
    #   http://r.ossrs.net/live/livestream.m3u8
    location ~ /.+/.*\.(flv|m3u8|ts|aac|mp3)$ {
        proxy_pass http://127.0.0.1:7080$request_uri;
    }
    # For SRS backend API for console.
    location /api/ {
        proxy_pass http://127.0.0.1:1985/api/;
    }
    # For SRS WebRTC publish/play API.
    location /rtc/ {
        if ($request_method = OPTIONS) {
                add_header Access-Control-Allow-Origin $http_origin;
                add_header Access-Control-Allow-Headers *;
                add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
                #add_header Access-Control-Allow-Credentials true;
                return 200;
        }
        #proxy_hide_header Access-Control-Allow-Origin;
        proxy_pass http://127.0.0.1:1985/rtc/;
    }
 }

 ## SRS 的 https 连接
 server {
    listen 10015 ssl;
    server_name  xxx;

    ssl_certificate      cert/xxx.pem;
    ssl_certificate_key  cert/xxx.key;
    ssl_session_cache    shared:SSL:1m;
    ssl_session_timeout  5m;
    ssl_ciphers  HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers  on;

    add_header Access-Control-Allow-Headers *;

    # For SRS homepage, console and players
    #   http://r.ossrs.net/console/
    #   http://r.ossrs.net/players/
    #location / {
    #    proxy_pass http://127.0.0.1:7080/;
    #}
    location /live/ {
        proxy_pass http://127.0.0.1:7080/live/;
    }
    location /players/ {
        proxy_pass http://127.0.0.1:7080/players/;
    }
    # For SRS streaming, for example:
    #   http://r.ossrs.net/live/livestream.flv
    #   http://r.ossrs.net/live/livestream.m3u8
    location ~ /.+/.*\.(flv|m3u8|ts|aac|mp3)$ {
        proxy_pass http://127.0.0.1:7080$request_uri;
    }
    # For SRS backend API for console.
    location /api/ {
        proxy_pass http://127.0.0.1:1985/api/;
    }
    # For SRS WebRTC publish/play API.
    location /rtc/ {
        if ($request_method = OPTIONS) {
                add_header Access-Control-Allow-Origin $http_origin;
                add_header Access-Control-Allow-Headers *;
                add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
                #add_header Access-Control-Allow-Credentials true;
                return 200;
        }
        #proxy_hide_header Access-Control-Allow-Origin;
        proxy_pass http://127.0.0.1:1985/rtc/;
    }
 }

6.前端展示

前端使用 jswebrtc 进行播放就可以了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
 * 创建播放器
 */
function createPlay(pullUrl, videoElement) {
let videoPlay = new jswebrtc.Player(pullUrl, {
    video: videoElement,
    autoplay: true,
    onPlay: (obj: any) => {
    console.log('开始直播：', obj);
    livePara.liveState = true;
    },
});
videoPlay.play();
return videoPlay;
}
**本文已结束，感谢您的观看**
鼓励一下

往期推荐

文章目录
  1. 1. 1.前言
  2. 2. 2.编辑配置
  3. 3. 3.启动
  4. 4. 4.开启防火墙
  5. 5. 5.配置nginx
  6. 6. 6.前端展示
小额赞助
本人提供免费与付费咨询服务，感谢您的支持！赞助请发邮件（ititchuan@gmail.com）通知，方便公布您的善意！
**光 3.01 元
Sun 3.00 元
ititchuan 3.00 元
捐赠者名单 合计：9.01 元
微信公众号
广告位
诚心邀请广大金主爸爸洽谈合作
每日一省
isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

2021-04-07 链接地址
每日二省
为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

2021-04-07 链接地址
每日三省
== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

2021-04-07 链接地址
每日英语
Happiness is time precipitation, smile is the lonely sad.
幸福是年华的沉淀，微笑是寂寞的悲伤。
2016 ——— 美文