Skip to content

Commit 8decbcb

Browse files
committed
start!
1 parent 3e2a804 commit 8decbcb

File tree

3 files changed

+333
-0
lines changed

3 files changed

+333
-0
lines changed
Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# whip-whep
2+
whip-whep demonstrates using WHIP and WHEP with Pion. Since WHIP+WHEP is standardized signaling you can publish via tools like OBS and GStreamer.
3+
You can then watch it in sub-second time from your browser, or pull the video back into OBS and GStreamer via WHEP.
4+
5+
Further details about the why and how of WHIP+WHEP are below the instructions.
6+
7+
## Instructions
8+
9+
### Download whip-whep
10+
11+
This example requires you to clone the repo since it is serving static HTML.
12+
13+
```
14+
git clone https://github.com/pion/webrtc.git
15+
cd webrtc/examples/whip-whep
16+
```
17+
18+
### Run whip-whep
19+
Execute `go run *.go`
20+
21+
### Publish
22+
23+
You can publish via an tool that supports WHIP or via your browser. To publish via your browser open [http://localhost:8080](http://localhost:8080), and press publish.
24+
25+
To publish via OBS set `Service` to `WHIP` and `Server` to `http://localhost:8080/whip`. The `Bearer Token` can be whatever value you like.
26+
27+
28+
### Subscribe
29+
30+
Once you have started publishing open [http://localhost:8080](http://localhost:8080) and press the subscribe button. You can now view your video you published via
31+
OBS or your browser.
32+
33+
Congrats, you have used Pion WebRTC! Now start building something cool
34+
35+
## Why WHIP/WHEP?
36+
37+
WHIP/WHEP mandates that a Offer is uploaded via HTTP. The server responds with a Answer. With this strong API contract WebRTC support can be added to tools like OBS.
38+
39+
For more info on WHIP/WHEP specification, feel free to read some of these great resources:
40+
- https://webrtchacks.com/webrtc-cracks-the-whip-on-obs/
41+
- https://datatracker.ietf.org/doc/draft-ietf-wish-whip/
42+
- https://datatracker.ietf.org/doc/draft-ietf-wish-whep/
43+
- https://bloggeek.me/whip-whep-webrtc-live-streaming
Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<html>
2+
3+
<!--
4+
SPDX-FileCopyrightText: 2023 The Pion community <https://pion.ly>
5+
SPDX-License-Identifier: MIT
6+
-->
7+
<head>
8+
<title>whip-whep</title>
9+
</head>
10+
11+
<body>
12+
<button onclick="window.doWHIP()">Publish</button>
13+
<button onclick="window.doWHEP()">Subscribe</button>
14+
<h3> Video </h3>
15+
<video id="videoPlayer" autoplay muted controls style="width: 500"> </video>
16+
17+
18+
<h3> ICE Connection States </h3>
19+
<div id="iceConnectionStates"></div> <br />
20+
</body>
21+
22+
<script>
23+
let peerConnection = new RTCPeerConnection()
24+
25+
peerConnection.oniceconnectionstatechange = () => {
26+
let el = document.createElement('p')
27+
el.appendChild(document.createTextNode(peerConnection.iceConnectionState))
28+
29+
document.getElementById('iceConnectionStates').appendChild(el);
30+
}
31+
32+
window.doWHEP = () => {
33+
peerConnection.addTransceiver('video', { direction: 'recvonly' })
34+
35+
peerConnection.ontrack = function (event) {
36+
document.getElementById('videoPlayer').srcObject = event.streams[0]
37+
}
38+
39+
peerConnection.createOffer().then(offer => {
40+
peerConnection.setLocalDescription(offer)
41+
42+
fetch(`/whep`, {
43+
method: 'POST',
44+
body: offer.sdp,
45+
headers: {
46+
Authorization: `Bearer none`,
47+
'Content-Type': 'application/sdp'
48+
}
49+
}).then(r => r.text())
50+
.then(answer => {
51+
peerConnection.setRemoteDescription({
52+
sdp: answer,
53+
type: 'answer'
54+
})
55+
})
56+
})
57+
}
58+
59+
window.doWHIP = () => {
60+
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
61+
.then(stream => {
62+
document.getElementById('videoPlayer').srcObject = stream
63+
stream.getTracks().forEach(track => peerConnection.addTrack(track, stream))
64+
65+
peerConnection.createOffer().then(offer => {
66+
peerConnection.setLocalDescription(offer)
67+
68+
fetch(`/whip`, {
69+
method: 'POST',
70+
body: offer.sdp,
71+
headers: {
72+
Authorization: `Bearer none`,
73+
'Content-Type': 'application/sdp'
74+
}
75+
}).then(r => r.text())
76+
.then(answer => {
77+
peerConnection.setRemoteDescription({
78+
sdp: answer,
79+
type: 'answer'
80+
})
81+
})
82+
})
83+
})
84+
}
85+
</script>
86+
</html>
Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
// SPDX-FileCopyrightText: 2023 The Pion community <https://pion.ly>
2+
// SPDX-License-Identifier: MIT
3+
4+
//go:build !js
5+
// +build !js
6+
7+
// whip-whep demonstrates how to use the WHIP/WHEP specifications to exchange SPD descriptions
8+
// and stream media to a WebRTC client in the browser or OBS.
9+
package main
10+
11+
import (
12+
"fmt"
13+
"io"
14+
"net/http"
15+
16+
"github.com/pion/interceptor"
17+
"github.com/pion/interceptor/pkg/intervalpli"
18+
"github.com/pion/webrtc/v4"
19+
)
20+
21+
// nolint: gochecknoglobals
22+
var (
23+
videoTrack *webrtc.TrackLocalStaticRTP
24+
25+
peerConnectionConfiguration = webrtc.Configuration{
26+
ICEServers: []webrtc.ICEServer{
27+
{
28+
URLs: []string{"stun:stun.l.google.com:19302"},
29+
},
30+
},
31+
}
32+
)
33+
34+
// nolint:gocognit
35+
func main() {
36+
// Everything below is the Pion WebRTC API! Thanks for using it ❤️.
37+
var err error
38+
if videoTrack, err = webrtc.NewTrackLocalStaticRTP(webrtc.RTPCodecCapability{
39+
MimeType: webrtc.MimeTypeH264,
40+
}, "video", "pion"); err != nil {
41+
panic(err)
42+
}
43+
44+
http.Handle("/", http.FileServer(http.Dir(".")))
45+
http.HandleFunc("/whep", whepHandler)
46+
http.HandleFunc("/whip", whipHandler)
47+
48+
fmt.Println("Open http://localhost:8080 to access this demo")
49+
panic(http.ListenAndServe(":8080", nil)) // nolint: gosec
50+
}
51+
52+
func whipHandler(res http.ResponseWriter, req *http.Request) {
53+
// Read the offer from HTTP Request
54+
offer, err := io.ReadAll(req.Body)
55+
if err != nil {
56+
panic(err)
57+
}
58+
59+
// Create a MediaEngine object to configure the supported codec
60+
mediaEngine := &webrtc.MediaEngine{}
61+
62+
// Setup the codecs you want to use.
63+
// We'll only use H264 but you can also define your own
64+
if err = mediaEngine.RegisterCodec(webrtc.RTPCodecParameters{
65+
RTPCodecCapability: webrtc.RTPCodecCapability{
66+
MimeType: webrtc.MimeTypeH264, ClockRate: 90000, Channels: 0, SDPFmtpLine: "", RTCPFeedback: nil,
67+
},
68+
PayloadType: 96,
69+
}, webrtc.RTPCodecTypeVideo); err != nil {
70+
panic(err)
71+
}
72+
73+
// Create a InterceptorRegistry. This is the user configurable RTP/RTCP Pipeline.
74+
// This provides NACKs, RTCP Reports and other features. If you use `webrtc.NewPeerConnection`
75+
// this is enabled by default. If you are manually managing You MUST create a InterceptorRegistry
76+
// for each PeerConnection.
77+
interceptorRegistry := &interceptor.Registry{}
78+
79+
// Register a intervalpli factory
80+
// This interceptor sends a PLI every 3 seconds. A PLI causes a video keyframe to be generated by the sender.
81+
// This makes our video seekable and more error resilent, but at a cost of lower picture quality and higher bitrates
82+
// A real world application should process incoming RTCP packets from viewers and forward them to senders
83+
intervalPliFactory, err := intervalpli.NewReceiverInterceptor()
84+
if err != nil {
85+
panic(err)
86+
}
87+
interceptorRegistry.Add(intervalPliFactory)
88+
89+
// Use the default set of Interceptors
90+
if err = webrtc.RegisterDefaultInterceptors(mediaEngine, interceptorRegistry); err != nil {
91+
panic(err)
92+
}
93+
94+
// Create the API object with the MediaEngine
95+
api := webrtc.NewAPI(webrtc.WithMediaEngine(mediaEngine), webrtc.WithInterceptorRegistry(interceptorRegistry))
96+
97+
// Prepare the configuration
98+
99+
// Create a new RTCPeerConnection
100+
peerConnection, err := api.NewPeerConnection(peerConnectionConfiguration)
101+
if err != nil {
102+
panic(err)
103+
}
104+
105+
// Allow us to receive 1 video trac
106+
if _, err = peerConnection.AddTransceiverFromKind(webrtc.RTPCodecTypeVideo); err != nil {
107+
panic(err)
108+
}
109+
110+
// Set a handler for when a new remote track starts, this handler saves buffers to disk as
111+
// an ivf file, since we could have multiple video tracks we provide a counter.
112+
// In your application this is where you would handle/process video
113+
peerConnection.OnTrack(func(track *webrtc.TrackRemote, receiver *webrtc.RTPReceiver) { //nolint: revive
114+
for {
115+
pkt, _, err := track.ReadRTP()
116+
if err != nil {
117+
panic(err)
118+
}
119+
120+
if err = videoTrack.WriteRTP(pkt); err != nil {
121+
panic(err)
122+
}
123+
}
124+
})
125+
126+
// Send answer via HTTP Response
127+
writeAnswer(res, peerConnection, offer, "/whip")
128+
}
129+
130+
func whepHandler(res http.ResponseWriter, req *http.Request) {
131+
// Read the offer from HTTP Request
132+
offer, err := io.ReadAll(req.Body)
133+
if err != nil {
134+
panic(err)
135+
}
136+
137+
// Create a new RTCPeerConnection
138+
peerConnection, err := webrtc.NewPeerConnection(peerConnectionConfiguration)
139+
if err != nil {
140+
panic(err)
141+
}
142+
143+
// Add Video Track that is being written to from WHIP Session
144+
rtpSender, err := peerConnection.AddTrack(videoTrack)
145+
if err != nil {
146+
panic(err)
147+
}
148+
149+
// Read incoming RTCP packets
150+
// Before these packets are returned they are processed by interceptors. For things
151+
// like NACK this needs to be called.
152+
go func() {
153+
rtcpBuf := make([]byte, 1500)
154+
for {
155+
if _, _, rtcpErr := rtpSender.Read(rtcpBuf); rtcpErr != nil {
156+
return
157+
}
158+
}
159+
}()
160+
161+
// Send answer via HTTP Response
162+
writeAnswer(res, peerConnection, offer, "/whep")
163+
}
164+
165+
func writeAnswer(res http.ResponseWriter, peerConnection *webrtc.PeerConnection, offer []byte, path string) {
166+
// Set the handler for ICE connection state
167+
// This will notify you when the peer has connected/disconnected
168+
peerConnection.OnICEConnectionStateChange(func(connectionState webrtc.ICEConnectionState) {
169+
fmt.Printf("ICE Connection State has changed: %s\n", connectionState.String())
170+
171+
if connectionState == webrtc.ICEConnectionStateFailed {
172+
_ = peerConnection.Close()
173+
}
174+
})
175+
176+
if err := peerConnection.SetRemoteDescription(webrtc.SessionDescription{
177+
Type: webrtc.SDPTypeOffer, SDP: string(offer),
178+
}); err != nil {
179+
panic(err)
180+
}
181+
182+
// Create channel that is blocked until ICE Gathering is complete
183+
gatherComplete := webrtc.GatheringCompletePromise(peerConnection)
184+
185+
// Create answer
186+
answer, err := peerConnection.CreateAnswer(nil)
187+
if err != nil {
188+
panic(err)
189+
} else if err = peerConnection.SetLocalDescription(answer); err != nil {
190+
panic(err)
191+
}
192+
193+
// Block until ICE Gathering is complete, disabling trickle ICE
194+
// we do this because we only can exchange one signaling message
195+
// in a production application you should exchange ICE Candidates via OnICECandidate
196+
<-gatherComplete
197+
198+
// WHIP+WHEP expects a Location header and a HTTP Status Code of 201
199+
res.Header().Add("Location", path)
200+
res.WriteHeader(http.StatusCreated)
201+
202+
// Write Answer with Candidates as HTTP Response
203+
fmt.Fprint(res, peerConnection.LocalDescription().SDP) //nolint: errcheck
204+
}

0 commit comments

Comments
 (0)