SRS5.0之WebRTC推流流程分析

前言

    上文简要分析了SRS之WebRTC的播放流程,本文来分析WebRTC的推流流程。

环境搭建

    环境搭建请参见 SRS5.0之WebRTC播放流程分析 一文,WebRTC推流所不同的SRS配置如下:


listen              1935;
max_connections     100;
daemon              off;
srs_log_tank        console;

http_server {
    enabled         on;
    listen          8081;
    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 *;
}

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;
    }
}

    特别指出candidate配置,可配置为*,也可指定为所在机器的IP地址:

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

信令分析

    HTTP信令

    首先用wireshark抓包分析webrtc推流的信令流程: 

    Chrome浏览器首先向地址 /rtc/v1/publish POST一段数据,发送offer:

{
	"api": "http://localhost:1985/rtc/v1/publish/",
	"tid": "7e37fd9",
	"streamurl": "webrtc://localhost/live/rtc-test",
	"clientip": null,
	"sdp": "v=0\r\no=- 2168287549096471063 2 IN IP4 127.0.0.1\r\ns=-\r\nt=0 0\r\na=group:BUNDLE 0 1\r\na=extmap-allow-mixed\r\na=msid-semantic: WMS\r\nm=audio 9 UDP/TLS/RTP/SAVPF 111 63 103 104 9 0 8 106 105 13 110 112 113 126\r\nc=IN IP4 0.0.0.0\r\na=rtcp:9 IN IP4 0.0.0.0\r\na=ice-ufrag:eS/a\r\na=ice-pwd:AnJOUZYJuLHZPJ4RljsGa6Mq\r\na=ice-options:trickle\r\na=fingerprint:sha-
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现SRS的WebRTC推流,可以使用Vue.js结合WebRTC和SRS的API。下面是实现的一些步骤: 1. 首先在Vue.js项目中安装WebRTC和SRS的依赖包。 ``` npm install webrtc-adapter srs-librtmp --save ``` 2. 在Vue.js的组件中引入WebRTC和SRS的依赖库。 ```javascript import adapter from 'webrtc-adapter'; import { SrsRtmpClient } from 'srs-librtmp'; ``` 3. 实现WebRTC的视频采集和编码,以及SRS的RTMP推流。 ```javascript // 初始化SrsRtmpClient const srs = new SrsRtmpClient('rtmp://your-server-ip/app/streamKey'); // 获取视频流 navigator.mediaDevices.getUserMedia({ video: true }) .then((stream) => { // 获取video元素 const videoElement = this.$refs.video; // 将视频流绑定到video元素 videoElement.srcObject = stream; // 创建WebRTC PeerConnection const pc = new RTCPeerConnection(); // 将视频流添加到PeerConnection stream.getTracks().forEach((track) => { pc.addTrack(track, stream); }); // 监听ICE Candidate事件 pc.onicecandidate = (event) => { if (event.candidate) { // 发送ICE Candidate到SRS服务器 srs.sendIceCandidate(event.candidate); } }; // 监听SDP Offer事件 pc.createOffer().then((offer) => { pc.setLocalDescription(offer); // 发送SDP Offer到SRS服务器 srs.sendSdpOffer(offer); }); // 监听SDP Answer事件 srs.on('sdpAnswer', (answer) => { pc.setRemoteDescription(answer); }); }) .catch((error) => { console.error('getUserMedia error: ', error); }); // 开始推流 srs.start(); ``` 4. 在Vue.js的模板中添加video元素。 ```html <template> <div> <video ref="video" autoplay></video> </div> </template> ``` 这样,就可以使用Vue.js实现SRS的WebRTC推流了。需要注意的是,SRS服务器需要支持WebRTC推流功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值