首页 > 其他分享 >WebRTC服务搭建(使用SRS)

WebRTC服务搭建(使用SRS)

时间：2023-11-11 20:23:35浏览次数：37  
标签：self 27.42 SRS live 49.4 推流 WebRTC 搭建

原贴：https://www.psvmc.cn/article/2021-01-21-webrtc-srs.html

WebRTC服务搭建(使用SRS)

 发表于 2021-01-21 |  分类于 live WebRTC服务搭建(使用SRS)

SRS4

目前SRS对WebRTC的支持进度如下：

  • SRS4.0.14，支持了RTMP推流，WebRTC播放。
  • SRS4.0.76，支持了WebRTC推流，WebRTC播放。
  • SRS4.0.95，支持了WebRTC推流，RTMP播放。

Srs4已经支持WebRTC的推流和拉流了。

1
2
3
4
 
CANDIDATE="49.4.27.42"
docker run --rm -it -p 1935:1935 -p 1985:1985 -p 8080:8080 \
    --env CANDIDATE=$CANDIDATE -p 8000:8000/udp \
    registry.cn-hangzhou.aliyuncs.com/ossrs/srs:4 ./objs/srs -c conf/docker.conf

注意如果RTMP转WebRTC流播放，必须使用配置文件rtmp2rtc.conf

1
2
3
4
 
CANDIDATE="49.4.27.42"
docker run --rm -it -p 1935:1935 -p 1985:1985 -p 8080:8080 \
    --env CANDIDATE=$CANDIDATE -p 8000:8000/udp \
    registry.cn-hangzhou.aliyuncs.com/ossrs/srs:4 ./objs/srs -c conf/rtmp2rtc.conf

端口说明

端口作用
8080(tcp) 网页访问对应端口
1985(tcp) RTC接口对应端口
1935(tcp) RTMP端口
8000(udp) WebRTC端口

注意

一定要开放这几个端口。

查看端口是否畅通

TCP端口

1
2
3
 
telnet 49.4.27.42 8080
telnet 49.4.27.42 1985
telnet 49.4.27.42 1935

UDP端口

1
2
3
4
5
6
7
 
# 服务端
yum install netcat -y
nc -ul 8000

# 客户端
yum install netcat -y
nc -u 49.4.27.42 8000

我们可以访问

http://49.4.27.42:8080

WebRTC推流地址

http://49.4.27.42:8080/players/rtc_publisher.html

WebRTC播流地址

http://49.4.27.42:8080/players/rtc_player.html

播放WebRTC是不需要https，但是推送WebRTC是必须要https，否则我们获取不了媒体。

Nginx反代

配置域名和HTTPS

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
 
upstream live_xhkjt {   
  server 127.0.0.1:8080;
}  

upstream live_rtc {   
  server 127.0.0.1:1985;
}  

server {
  listen 80;
  server_name live.xhkjedu.com;

  client_max_body_size  200m;
  listen 443  ssl; 
  ssl_certificate   /etc/nginx/cert/xhkjedu.pem;
  ssl_certificate_key  /etc/nginx/cert/xhkjedu.key;
  ssl_session_timeout 5m;
  ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
  ssl_prefer_server_ciphers on;      


  location / {
    proxy_pass http://live_xhkjt/;  
    proxy_set_header Host $host;  
    proxy_set_header X-Real-IP $remote_addr;  
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;    
  }

  location /rtc/ {
    proxy_pass http://live_rtc/rtc/;  
    proxy_set_header Host $host;  
    proxy_set_header X-Real-IP $remote_addr;  
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;     
  }
}

访问地址

https://live.xhkjedu.com/

原来的代码逻辑是根据推流地址变换的，所以不能正常使用

示例推流代码

https://gitee.com/psvmc/srs-push.git

推流

使用官方Docker推流

使用官方推荐的docker推流

1
 
docker run --rm registry.cn-hangzhou.aliyuncs.com/ossrs/srs:encoder ffmpeg -stream_loop -1 -re -i ./doc/source.200kbps.768x320.flv -c copy -f flv rtmp://49.4.27.42/live/livestream

WebRTC推流

注意以下情况才能正常推流

  • 本地HTTP，地址为localhost或127.0.0.1
  • 公网 HTTPS

或者

HTTP在Chrome浏览器快捷方式中添加

1
 
--ignore-certificate-errors --allow-running-insecure-content --unsafely-treat-insecure-origin-as-secure="http://49.4.27.42:8080"

调试

1
 
chrome://webrtc-internals

示例推流代码

https://gitee.com/psvmc/srs-push.git

这个是我稍微修改后的代码，主要为了便于理解。

注意

当使用SRS这样的媒体中转服务器时，是不再需要stun和turn服务器的。

因为我们中转服务器就在公网上，并且推流是单向的从客户端到服务器所以就不需要stun服务器了。

示例代码：

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
 
function SrsRtcPublisherAsync () {
  var self = {};

  self.pc = new RTCPeerConnection(null);
  self.stream = new MediaStream();
  self.constraints = {
    audio: true,
    video: {
      width: { ideal: 480, max: 576 }
    }
  };

  self.publish = async function (streamUrl, apiUrl) {
    self.pc.addTransceiver("audio", { direction: "sendonly" });
    self.pc.addTransceiver("video", { direction: "sendonly" });

    if (
      !navigator.mediaDevices &&
      window.location.protocol === "http:" &&
      window.location.hostname !== "localhost"
    ) {
      throw new SrsError(
        "HttpsRequiredError",
        `Please use HTTPS or localhost to publish, read https://github.com/ossrs/srs/issues/2762#issuecomment-983147576`
      );
    }
    var stream = await navigator.mediaDevices.getUserMedia(self.constraints);

    // @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrack
    stream.getTracks().forEach(function (track) {
      self.pc.addTrack(track);
      self.ontrack && self.ontrack({ track: track });
    });

    var offer = await self.pc.createOffer();
    await self.pc.setLocalDescription(offer);
    var data = {
      tid: getId(),
      streamurl: streamUrl,
      clientip: null,
      sdp: offer.sdp
    };
    var session = await rtc_req(apiUrl + "/rtc/v1/publish/", data);
    await self.pc.setRemoteDescription(
      new RTCSessionDescription({ type: "answer", sdp: session.sdp })
    );
    return session;
  };

  // Close the publisher.
  self.close = function () {
    self.pc && self.pc.close();
    self.pc = null;
  };

  // The callback when got local stream.
  // @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrack
  self.ontrack = function (event) {
    // Add track to stream of SDK.
    self.stream.addTrack(event.track);
  };


  return self;
}

从代码中我们可以看几个关键的步骤

1
2
3
4
5
6
7
8
9
10
11
 
self.pc = new RTCPeerConnection(null);
// 添加媒体流
self.pc.addTrack(track);
var offer = await self.pc.createOffer();

// 本地描述
await self.pc.setLocalDescription(offer);
// 远程描述
await self.pc.setRemoteDescription(
  new RTCSessionDescription({type: "answer", sdp: session.sdp})
);

而其中的远程描述就是请求SRS的服务器接口获取的。这样就建立好连接了，是不是很简单。

本地推流

下载FFMPEG

https://ffmpeg.org/download.html#build-windows

添加到环境变量

D:\Tools\ffmpeg\bin

相关测试视频文件

链接：https://pan.baidu.com/s/1RIJOAwgVDdEV0UMHNaxVjQ
提取码：psvm

文件推流

1
 
ffmpeg -re -i ./source.200kbps.768x320.flv -c copy -f flv -y rtmp://49.4.27.42/live/livestream

本地桌面推流

桌面整体推流

1
 
ffmpeg -f gdigrab -i desktop -framerate 30 -vcodec libx264 -b:v 512k -preset ultrafast -pix_fmt yuv422p -f flv rtmp://49.4.27.42/live/livestream

多屏只推送主屏

1
 
ffmpeg -f gdigrab -s 1920x1080 -i desktop -framerate 30 -vcodec libx264 -b:v 512k -preset ultrafast -pix_fmt yuv422p -f flv rtmp://49.4.27.42/live/livestream

注意

-s 1920x1080表示分辨率

摄像头麦克风推流

获取设备名称

1
 
ffmpeg -list_devices true -f dshow -i dummy

我这获取到的

麦克风：麦克风 (Realtek Audio)

摄像头：Integrated Webcam

查看摄像头视频

1
 
ffplay -f dshow -i video="Integrated Webcam"

摄像头推流

1
 
ffmpeg -f dshow -i video="Integrated Webcam" -vcodec libx264 -b:v 512k  -preset:v ultrafast -f flv rtmp://49.4.27.42/live/livestream

摄像头+麦克风推流

1
 
ffmpeg -f dshow -i video="Integrated Webcam":audio="麦克风 (Realtek Audio)" -vcodec libx264 -b:v 512k -b:a 16k -r 25 -acodec copy -preset ultrafast -f flv rtmp://49.4.27.42/live/livestream

流播放

RTMP流

VLC播放器

https://www.videolan.org/vlc/

播放地址

rtmp://49.4.27.42/live/livestream

FLV流

可以通个这个播放

http://49.4.27.42:8080/players/srs_player.html

其中播放地址

http://49.4.27.42:8080/live/livestream.flv

录制

1
2
3
4
5
6
7
8
9
10
 
vhost __defaultVhost__ {
    dvr {
        enabled         on;
        dvr_path        /data/rtmplive/[app]/[stream]/[2006]/[01]_[02]/[15]_[04]_[05]_[999].flv;
        dvr_plan        session;
        dvr_duration    30;
        dvr_wait_keyframe on;
        time_jitter    full;
    }
}

默认我们按照上文配置就可以保证推流的时候自动录制，但是并不是所有的流都要录制

我们可以配置多个vhost，根据域名的不同来区分是否录制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
vhost live1.psvmc.cn {
  dvr {
        enabled         on;
        dvr_path        /data/rtmplive/[app]/[stream]/[2006]/[01]_[02]/[15]_[04]_[05]_[999].flv;
        dvr_plan        session;
        dvr_duration    30;
        dvr_wait_keyframe on;
        time_jitter    full;
    }
}

vhost live2.psvmc.cn {
}

vhost __defaultVhost__ {
}

标签：self,27.42,SRS,live,49.4,推流,WebRTC,搭建
From： https://www.cnblogs.com/zmkp/p/17826272.html

相关文章

  • 非web应用下快速搭建Spring环境
    Spring诞生之初就不是为web项目定制的。首先我们要弄明白常用的web项目和非web项目的区别在哪儿？无疑是服务启动和执行逻辑触发的方式：web项目需要依赖web容器来启动，通过http请求来触发相关的服务；非web项目则不需要依赖web容器来启动，它可以是自启动的；添加Spring依赖<properti......
  • 图床搭建
    搭建自己的图床腾讯云配置当前腾讯云的对象存储服务还是挺便宜的，如果仅用于存储博客中的一些图片，个人使用量不高，一年花费\(<10\)元。创建存储桶腾讯云官方的介绍：存储桶（Bucket）是对象的载体，可理解为存放对象的“容器”，且该“容器”无容量上限。对象以扁平化结构存放在存储桶中，无......
  • 【小沐学前端】Windows下搭建WordPress（一、相关工具下载）
    1、简介WordPress是基于PHP和MySQL的免费开源内容管理系统（CMS）。它是全球使用最广泛的CMS软件，截至2019年5月，它为排名前1000万个网站中提供了超过30％的支持，并拥有在使用CMS构建的所有网站中，估计有60％的市场份额。1.1Nginxnginx[enginex]是一个HTTP和反向代理服务器，邮件代理......
  • VS Code搭建Node.js环境
    VSCode搭建Node.js环境VSCode集成了方便的Node.js插件，使您可以轻松安装和配置Node.js环境。您可以采用以下步骤来搭建Node.js环境。1.安装VSCode在VSCode官网上下载并安装VSCode2.安装Node.js插件在VSCode插件市场中搜索并安装“Node.js”扩展3.配置Node.js路径单......
  • Linux搭建文件服务器
    @目录基于centos7.9搭建http文件服务器基于centos7.9搭建nginx文件服务器基于ubuntu2204搭建http文件服务器IP环境192.168.200.100VMware17基于centos7.9搭建http文件服务器安装httpd[root@localhost~]#yuminstall-yhttpd关闭防火墙以及selinux[root@loc......
  • docker 搭建 matebase
    环境搭建docker/mnt/docker_data/metabase是你本地一个有权限的目录dockerrun-d-p3000:3000-v/mnt/docker_data/metabase:/tmp-e"MB_DB_FILE=/tmp/metabase.db"--namemetabasemetabase/metabasedocker-compose启动version:'2'services:metabase:ima......
  • K8S基础：搭建K8S集群（v1.27.6）
    Kubernetes 是一个可移植、可扩展的开源平台，用于管理容器化的工作负载和服务，可促进声明式配置和自动化。Kubernetes拥有一个庞大且快速增长的生态，其服务、支持和工具的使用范围相当广泛。准备节点主机名IP系统&内核配置master01k8s0110.70.5.190Centos7.9，Kernel5.4.259-1.el7.el......
  • 日志系统搭建
    1.定义docker-composeversion:'3'services:elasticsearch:image:elasticsearch:7.6.2container_name:elasticsearchprivileged:trueuser:rootenvironment:#设置集群名称为elasticsearch-cluster.name=elasticsearch......
  • 【板子申请】Ai-M61-32S开发环境搭建-wuboy19
    【板子申请】Ai-M61-32S开发环境搭建-wuboy19window10vscode环境安装vscode官网下载windows版本图1官网界面图图2安装成功图博主百度网盘下载百度网盘链接提取码：9jydgit安装git官网下载链接图3git安装过程图博主网盘下载git百度网盘链接提取码：n3z......
  • Kubernetes常用命令及yml文件、集群网络 Kubernetes组件介绍及环境搭建
    Kubernetes常用命令及yml文件、集群网络Kubernetes组件介绍及环境搭建Kubernetes组件介绍及环境搭建一、kubernetes常用命令说明：因为k8s的命令都是通过kubectl组件接收的，这个组件只在master节点有，所以k8s的命令都是在master节点中执行kubectlgetnodes#查看当前集群中......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99