OPC/mediamtx
2
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

webrtc: improve JavaScript classes (#4455)

Browse Source 
* add close() method

* move support functions into classes as static methods

* convert arrow functions into standard functions

* make most methods private

* add JSDocs
This commit is contained in:
Alessandro Ros
2025-04-21 15:01:46 +02:00
committed by GitHub
parent 44aa4ba50f
commit 0c501e2507
2 changed files with 513 additions and 434 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/servers/webrtc/publisher.js
+232 -195
View File
@@ -1,29 +1,83 @@
'use strict';
(() => {
/**
* @callback OnError
* @param {string} err - error.
*/
const unquoteCredential = (v) => (
JSON.parse(`"${v}"`)
);
/**
* @callback OnConnected
*/
const linkToIceServers = (links) => (
(links !== null) ? links.split(', ').map((link) => {
/**
* @typedef Conf
* @type {object}
* @property {string} url - absolute URL of the WHIP endpoint.
* @property {MediaStream} stream - stream that contains outgoing tracks.
* @property {string} videoCodec - outgoing video codec.
* @property {number} videoBitrate - outgoing video bitrate.
* @property {string} audioCodec - outgoing audio bitrate.
* @property {number} audioBitrate - outgoing audio bitrate.
* @property {boolean} audioVoice - whether audio is voice.
* @property {OnError} onError - called when there's an error.
* @property {OnConnected} onConnected - called when connected.
*/
/** WebRTC/WHIP publisher. */
class MediaMTXWebRTCPublisher {
/**
* Create a MediaMTXWebRTCPublisher.
* @param {Conf} conf - configuration.
*/
constructor(conf) {
this.retryPause = 2000;
this.conf = conf;
this.state = 'running';
this.restartTimeout = null;
this.pc = null;
this.offerData = null;
this.sessionUrl = null;
this.queuedCandidates = [];
this.#start();
}
/**
* Close the publisher and all its resources.
*/
close = () => {
this.state = 'closed';
if (this.pc !== null) {
this.pc.close();
}
if (this.restartTimeout !== null) {
clearTimeout(this.restartTimeout);
}
};
static #unquoteCredential(v) {
return JSON.parse(`"${v}"`);
}
static #linkToIceServers(links) {
return (links !== null) ? links.split(', ').map((link) => {
const m = link.match(/^<(.+?)>; rel="ice-server"(; username="(.*?)"; credential="(.*?)"; credential-type="password")?/i);
const ret = {
urls: [m[1]],
};
if (m[3] !== undefined) {
ret.username = unquoteCredential(m[3]);
ret.credential = unquoteCredential(m[4]);
ret.username = this.#unquoteCredential(m[3]);
ret.credential = this.#unquoteCredential(m[4]);
ret.credentialType = 'password';
}
return ret;
}) : []
);
}) : [];
}
const parseOffer = (offer) => {
static #parseOffer(offer) {
const ret = {
iceUfrag: '',
icePwd: '',
@@ -41,9 +95,9 @@
}
return ret;
};
}
const generateSdpFragment = (od, candidates) => {
static #generateSdpFragment(od, candidates) {
const candidatesByMedia = {};
for (const candidate of candidates) {
const mid = candidate.sdpMLineIndex;
@@ -71,9 +125,9 @@
}
return frag;
};
}
const setCodec = (section, codec) => {
static #setCodec(section, codec) {
const lines = section.split('\r\n');
const lines2 = [];
const payloadFormats = [];
@@ -110,9 +164,9 @@
}
return lines3.join('\r\n');
};
}
const setVideoBitrate = (section, bitrate) => {
static #setVideoBitrate(section, bitrate) {
let lines = section.split('\r\n');
for (let i = 0; i < lines.length; i++) {
@@ -123,9 +177,9 @@
}
return lines.join('\r\n');
};
}
const setAudioBitrate = (section, bitrate, voice) => {
static #setAudioBitrate(section, bitrate, voice) {
let opusPayloadFormat = '';
let lines = section.split('\r\n');
@@ -153,66 +207,46 @@
}
return lines.join('\r\n');
};
}
const editOffer = (sdp, videoCodec, audioCodec, audioBitrate, audioVoice) => {
static #editOffer(sdp, videoCodec, audioCodec, audioBitrate, audioVoice) {
const sections = sdp.split('m=');
for (let i = 0; i < sections.length; i++) {
if (sections[i].startsWith('video')) {
sections[i] = setCodec(sections[i], videoCodec);
sections[i] = this.#setCodec(sections[i], videoCodec);
} else if (sections[i].startsWith('audio')) {
sections[i] = setAudioBitrate(setCodec(sections[i], audioCodec), audioBitrate, audioVoice);
sections[i] = this.#setAudioBitrate(this.#setCodec(sections[i], audioCodec), audioBitrate, audioVoice);
}
}
return sections.join('m=');
};
}
const editAnswer = (sdp, videoBitrate) => {
static #editAnswer(sdp, videoBitrate) {
const sections = sdp.split('m=');
for (let i = 0; i < sections.length; i++) {
if (sections[i].startsWith('video')) {
sections[i] = setVideoBitrate(sections[i], videoBitrate);
sections[i] = this.#setVideoBitrate(sections[i], videoBitrate);
}
}
return sections.join('m=');
};
}
const retryPause = 2000;
class MediaMTXWebRTCPublisher {
constructor(conf) {
this.conf = conf;
this.state = 'initializing';
this.restartTimeout = null;
this.pc = null;
this.offerData = null;
this.sessionUrl = null;
this.queuedCandidates = [];
this.start();
}
start = () => {
this.state = 'running';
this.requestICEServers()
.then((iceServers) => this.setupPeerConnection(iceServers))
.then((offer) => this.sendOffer(offer))
.then((answer) => this.setAnswer(answer))
.catch((err) => {
this.handleError(err.toString());
});
};
handleError = (err) => {
if (this.state === 'restarting' || this.state === 'error') {
return;
}
#start() {
this.#requestICEServers()
.then((iceServers) => this.#setupPeerConnection(iceServers))
.then((offer) => this.#sendOffer(offer))
.then((answer) => this.#setAnswer(answer))
.catch((err) => {
this.#handleError(err.toString());
});
}
#handleError(err) {
if (this.state === 'running') {
if (this.pc !== null) {
this.pc.close();
this.pc = null;
@@ -228,167 +262,170 @@
}
this.queuedCandidates = [];
this.state = 'restarting';
if (this.state === 'running') {
this.state = 'restarting';
this.restartTimeout = window.setTimeout(() => {
this.restartTimeout = null;
this.state = 'running';
this.#start();
}, this.retryPause);
this.restartTimeout = window.setTimeout(() => {
this.restartTimeout = null;
this.start();
}, retryPause);
if (this.conf.onError !== undefined) {
this.conf.onError(err + ', retrying in some seconds');
}
} else {
this.state = 'error';
if (this.conf.onError !== undefined) {
this.conf.onError(err);
}
if (this.conf.onError !== undefined) {
this.conf.onError(`${err}, retrying in some seconds`);
}
};
}
}
requestICEServers = () => {
return fetch(this.conf.url, {
method: 'OPTIONS',
})
.then((res) => linkToIceServers(res.headers.get('Link')));
};
#requestICEServers() {
return fetch(this.conf.url, {
method: 'OPTIONS',
})
.then((res) => MediaMTXWebRTCPublisher.#linkToIceServers(res.headers.get('Link')));
}
setupPeerConnection = (iceServers) => {
this.pc = new RTCPeerConnection({
iceServers,
// https://webrtc.org/getting-started/unified-plan-transition-guide
sdpSemantics: 'unified-plan',
#setupPeerConnection(iceServers) {
if (this.state !== 'running') {
throw new Error('closed');
}
this.pc = new RTCPeerConnection({
iceServers,
// https://webrtc.org/getting-started/unified-plan-transition-guide
sdpSemantics: 'unified-plan',
});
this.pc.onicecandidate = (evt) => this.#onLocalCandidate(evt);
this.pc.onconnectionstatechange = () => this.#onConnectionState();
this.conf.stream.getTracks().forEach((track) => {
this.pc.addTrack(track, this.conf.stream);
});
return this.pc.createOffer()
.then((offer) => {
this.offerData = MediaMTXWebRTCPublisher.#parseOffer(offer.sdp);
return this.pc.setLocalDescription(offer)
.then(() => offer.sdp);
});
}
this.pc.onicecandidate = (evt) => this.onLocalCandidate(evt);
this.pc.onconnectionstatechange = () => this.onConnectionState();
#sendOffer(offer) {
if (this.state !== 'running') {
throw new Error('closed');
}
this.conf.stream.getTracks().forEach((track) => {
this.pc.addTrack(track, this.conf.stream);
});
offer = MediaMTXWebRTCPublisher.#editOffer(
offer,
this.conf.videoCodec,
this.conf.audioCodec,
this.conf.audioBitrate,
this.conf.audioVoice);
return this.pc.createOffer()
.then((offer) => {
this.offerData = parseOffer(offer.sdp);
return this.pc.setLocalDescription(offer)
.then(() => offer.sdp);
});
};
sendOffer = (offer) => {
offer = editOffer(
offer,
this.conf.videoCodec,
this.conf.audioCodec,
this.conf.audioBitrate,
this.conf.audioVoice);
return fetch(this.conf.url, {
method: 'POST',
headers: {
'Content-Type': 'application/sdp',
},
body: offer,
})
.then((res) => {
switch (res.status) {
return fetch(this.conf.url, {
method: 'POST',
headers: {
'Content-Type': 'application/sdp',
},
body: offer,
})
.then((res) => {
switch (res.status) {
case 201:
break;
case 400:
return res.json().then((e) => { throw new Error(e.error); });
default:
throw new Error(`bad status code ${res.status}`);
}
this.sessionUrl = new URL(res.headers.get('location'), this.conf.url).toString();
return res.text();
});
};
setAnswer = (answer) => {
if (this.state !== 'running') {
return;
}
answer = editAnswer(answer, this.conf.videoBitrate);
return this.pc.setRemoteDescription(new RTCSessionDescription({
type: 'answer',
sdp: answer,
}))
.then(() => {
if (this.queuedCandidates.length !== 0) {
this.sendLocalCandidates(this.queuedCandidates);
this.queuedCandidates = [];
}
});
};
onLocalCandidate = (evt) => {
if (this.state !== 'running') {
return;
}
if (evt.candidate !== null) {
if (this.sessionUrl === null) {
this.queuedCandidates.push(evt.candidate);
} else {
this.sendLocalCandidates([evt.candidate]);
}
}
};
sendLocalCandidates = (candidates) => {
fetch(this.sessionUrl, {
method: 'PATCH',
headers: {
'Content-Type': 'application/trickle-ice-sdpfrag',
'If-Match': '*',
},
body: generateSdpFragment(this.offerData, candidates),
})
.then((res) => {
switch (res.status) {
this.sessionUrl = new URL(res.headers.get('location'), this.conf.url).toString();
return res.text();
});
}
#setAnswer(answer) {
if (this.state !== 'running') {
throw new Error('closed');
}
answer = MediaMTXWebRTCPublisher.#editAnswer(answer, this.conf.videoBitrate);
return this.pc.setRemoteDescription(new RTCSessionDescription({
type: 'answer',
sdp: answer,
}))
.then(() => {
if (this.state !== 'running') {
return;
}
if (this.queuedCandidates.length !== 0) {
this.#sendLocalCandidates(this.queuedCandidates);
this.queuedCandidates = [];
}
});
}
#onLocalCandidate(evt) {
if (this.state !== 'running') {
return;
}
if (evt.candidate !== null) {
if (this.sessionUrl === null) {
this.queuedCandidates.push(evt.candidate);
} else {
this.#sendLocalCandidates([evt.candidate]);
}
}
}
#sendLocalCandidates(candidates) {
fetch(this.sessionUrl, {
method: 'PATCH',
headers: {
'Content-Type': 'application/trickle-ice-sdpfrag',
'If-Match': '*',
},
body: MediaMTXWebRTCPublisher.#generateSdpFragment(this.offerData, candidates),
})
.then((res) => {
switch (res.status) {
case 204:
break;
case 404:
throw new Error('stream not found');
default:
throw new Error(`bad status code ${res.status}`);
}
})
.catch((err) => {
this.handleError(err.toString());
});
};
onConnectionState = () => {
if (this.state !== 'running') {
return;
}
// "closed" can arrive before "failed" and without
// the close() method being called at all.
// It happens when the other peer sends a termination
// message like a DTLS CloseNotify.
if (this.pc.connectionState === 'failed'
|| this.pc.connectionState === 'closed'
) {
this.handleError('peer connection closed');
} else if (this.pc.connectionState === 'connected') {
if (this.conf.onConnected !== undefined) {
this.conf.onConnected();
}
}
};
})
.catch((err) => {
this.#handleError(err.toString());
});
}
window.MediaMTXWebRTCPublisher = MediaMTXWebRTCPublisher;
#onConnectionState() {
if (this.state !== 'running') {
return;
}
})();
// "closed" can arrive before "failed" and without
// the close() method being called at all.
// It happens when the other peer sends a termination
// message like a DTLS CloseNotify.
if (this.pc.connectionState === 'failed'
|| this.pc.connectionState === 'closed'
) {
this.#handleError('peer connection closed');
} else if (this.pc.connectionState === 'connected') {
if (this.conf.onConnected !== undefined) {
this.conf.onConnected();
}
}
}
}
window.MediaMTXWebRTCPublisher = MediaMTXWebRTCPublisher;
internal/servers/webrtc/reader.js
+281 -239
View File
@@ -1,16 +1,65 @@
'use strict';
(() => {
/**
* @callback OnError
* @param {string} err - error.
*/
const supportsNonAdvertisedCodec = (codec, fmtp) => (
new Promise((resolve) => {
/**
* @callback OnTrack
* @param {RTCTrackEvent} evt - track event.
*/
/**
* @typedef Conf
* @type {object}
* @property {string} url - absolute URL of the WHEP endpoint.
* @property {OnError} onError - called when there's an error.
* @property {OnTrack} onTrack - called when there's a track available.
*/
/** WebRTC/WHEP reader. */
class MediaMTXWebRTCReader {
/**
* Create a MediaMTXWebRTCReader.
* @param {Conf} conf - configuration.
*/
constructor(conf) {
this.retryPause = 2000;
this.conf = conf;
this.state = 'getting_codecs';
this.restartTimeout = null;
this.pc = null;
this.offerData = null;
this.sessionUrl = null;
this.queuedCandidates = [];
this.#getNonAdvertisedCodecs();
}
/**
* Close the reader and all its resources.
*/
close() {
this.state = 'closed';
if (this.pc !== null) {
this.pc.close();
}
if (this.restartTimeout !== null) {
clearTimeout(this.restartTimeout);
}
}
static #supportsNonAdvertisedCodec(codec, fmtp) {
return new Promise((resolve) => {
const payloadType = 118; // TODO: dynamic
const pc = new RTCPeerConnection({ iceServers: [] });
const mediaType = 'audio';
pc.addTransceiver(mediaType, { direction: 'recvonly' });
pc.createOffer()
.then((offer) => {
if (offer.sdp.includes(' ' + codec)) { // codec is advertised, there's no need to add it manually
if (offer.sdp.includes(` ${codec}`)) { // codec is advertised, there's no need to add it manually
throw new Error('already present');
}
const sections = offer.sdp.split(`m=${mediaType}`);
@@ -24,24 +73,24 @@
offer.sdp = sections.join(`m=${mediaType}`);
return pc.setLocalDescription(offer);
})
.then(() => {
return pc.setRemoteDescription(new RTCSessionDescription({
.then(() => (
pc.setRemoteDescription(new RTCSessionDescription({
type: 'answer',
sdp: 'v=0\r\n'
+ 'o=- 6539324223450680508 0 IN IP4 0.0.0.0\r\n'
+ 's=-\r\n'
+ 't=0 0\r\n'
+ 'a=fingerprint:sha-256 0D:9F:78:15:42:B5:4B:E6:E2:94:3E:5B:37:78:E1:4B:54:59:A3:36:3A:E5:05:EB:27:EE:8F:D2:2D:41:29:25\r\n'
+ `m=${mediaType} 9 UDP/TLS/RTP/SAVPF ${payloadType}` + '\r\n'
+ `m=${mediaType} 9 UDP/TLS/RTP/SAVPF ${payloadType}\r\n`
+ 'c=IN IP4 0.0.0.0\r\n'
+ 'a=ice-pwd:7c3bf4770007e7432ee4ea4d697db675\r\n'
+ 'a=ice-ufrag:29e036dc\r\n'
+ 'a=sendonly\r\n'
+ 'a=rtcp-mux\r\n'
+ `a=rtpmap:${payloadType} ${codec}` + '\r\n'
+ ((fmtp !== undefined) ? `a=fmtp:${payloadType} ${fmtp}` + '\r\n' : ''),
}));
})
+ `a=rtpmap:${payloadType} ${codec}\r\n`
+ ((fmtp !== undefined) ? `a=fmtp:${payloadType} ${fmtp}\r\n` : ''),
}))
))
.then(() => {
resolve(true);
})
@@ -51,31 +100,31 @@
.finally(() => {
pc.close();
});
})
);
});
}
const unquoteCredential = (v) => (
JSON.parse(`"${v}"`)
);
static #unquoteCredential(v) {
return JSON.parse(`"${v}"`);
}
const linkToIceServers = (links) => (
(links !== null) ? links.split(', ').map((link) => {
static #linkToIceServers(links) {
return (links !== null) ? links.split(', ').map((link) => {
const m = link.match(/^<(.+?)>; rel="ice-server"(; username="(.*?)"; credential="(.*?)"; credential-type="password")?/i);
const ret = {
urls: [m[1]],
};
if (m[3] !== undefined) {
ret.username = unquoteCredential(m[3]);
ret.credential = unquoteCredential(m[4]);
ret.username = this.#unquoteCredential(m[3]);
ret.credential = this.#unquoteCredential(m[4]);
ret.credentialType = 'password';
}
return ret;
}) : []
);
}) : [];
}
const parseOffer = (sdp) => {
static #parseOffer(sdp) {
const ret = {
iceUfrag: '',
icePwd: '',
@@ -93,9 +142,9 @@
}
return ret;
};
}
const reservePayloadType = (payloadTypes) => {
static #reservePayloadType(payloadTypes) {
// everything is valid between 30 and 127, except for interval between 64 and 95
// https://chromium.googlesource.com/external/webrtc/+/refs/heads/master/call/payload_type.h#29
for (let i = 30; i <= 127; i++) {
@@ -106,90 +155,90 @@
}
}
throw Error('unable to find a free payload type');
};
}
const enableStereoPcmau = (payloadTypes, section) => {
let lines = section.split('\r\n');
static #enableStereoPcmau(payloadTypes, section) {
const lines = section.split('\r\n');
let payloadType = reservePayloadType(payloadTypes);
let payloadType = this.#reservePayloadType(payloadTypes);
lines[0] += ` ${payloadType}`;
lines.splice(lines.length - 1, 0, `a=rtpmap:${payloadType} PCMU/8000/2`);
lines.splice(lines.length - 1, 0, `a=rtcp-fb:${payloadType} transport-cc`);
payloadType = reservePayloadType(payloadTypes);
payloadType = this.#reservePayloadType(payloadTypes);
lines[0] += ` ${payloadType}`;
lines.splice(lines.length - 1, 0, `a=rtpmap:${payloadType} PCMA/8000/2`);
lines.splice(lines.length - 1, 0, `a=rtcp-fb:${payloadType} transport-cc`);
return lines.join('\r\n');
};
}
const enableMultichannelOpus = (payloadTypes, section) => {
let lines = section.split('\r\n');
static #enableMultichannelOpus(payloadTypes, section) {
const lines = section.split('\r\n');
let payloadType = reservePayloadType(payloadTypes);
let payloadType = this.#reservePayloadType(payloadTypes);
lines[0] += ` ${payloadType}`;
lines.splice(lines.length - 1, 0, `a=rtpmap:${payloadType} multiopus/48000/3`);
lines.splice(lines.length - 1, 0, `a=fmtp:${payloadType} channel_mapping=0,2,1;num_streams=2;coupled_streams=1`);
lines.splice(lines.length - 1, 0, `a=rtcp-fb:${payloadType} transport-cc`);
payloadType = reservePayloadType(payloadTypes);
payloadType = this.#reservePayloadType(payloadTypes);
lines[0] += ` ${payloadType}`;
lines.splice(lines.length - 1, 0, `a=rtpmap:${payloadType} multiopus/48000/4`);
lines.splice(lines.length - 1, 0, `a=fmtp:${payloadType} channel_mapping=0,1,2,3;num_streams=2;coupled_streams=2`);
lines.splice(lines.length - 1, 0, `a=rtcp-fb:${payloadType} transport-cc`);
payloadType = reservePayloadType(payloadTypes);
payloadType = this.#reservePayloadType(payloadTypes);
lines[0] += ` ${payloadType}`;
lines.splice(lines.length - 1, 0, `a=rtpmap:${payloadType} multiopus/48000/5`);
lines.splice(lines.length - 1, 0, `a=fmtp:${payloadType} channel_mapping=0,4,1,2,3;num_streams=3;coupled_streams=2`);
lines.splice(lines.length - 1, 0, `a=rtcp-fb:${payloadType} transport-cc`);
payloadType = reservePayloadType(payloadTypes);
payloadType = this.#reservePayloadType(payloadTypes);
lines[0] += ` ${payloadType}`;
lines.splice(lines.length - 1, 0, `a=rtpmap:${payloadType} multiopus/48000/6`);
lines.splice(lines.length - 1, 0, `a=fmtp:${payloadType} channel_mapping=0,4,1,2,3,5;num_streams=4;coupled_streams=2`);
lines.splice(lines.length - 1, 0, `a=rtcp-fb:${payloadType} transport-cc`);
payloadType = reservePayloadType(payloadTypes);
payloadType = this.#reservePayloadType(payloadTypes);
lines[0] += ` ${payloadType}`;
lines.splice(lines.length - 1, 0, `a=rtpmap:${payloadType} multiopus/48000/7`);
lines.splice(lines.length - 1, 0, `a=fmtp:${payloadType} channel_mapping=0,4,1,2,3,5,6;num_streams=4;coupled_streams=4`);
lines.splice(lines.length - 1, 0, `a=rtcp-fb:${payloadType} transport-cc`);
payloadType = reservePayloadType(payloadTypes);
payloadType = this.#reservePayloadType(payloadTypes);
lines[0] += ` ${payloadType}`;
lines.splice(lines.length - 1, 0, `a=rtpmap:${payloadType} multiopus/48000/8`);
lines.splice(lines.length - 1, 0, `a=fmtp:${payloadType} channel_mapping=0,6,1,4,5,2,3,7;num_streams=5;coupled_streams=4`);
lines.splice(lines.length - 1, 0, `a=rtcp-fb:${payloadType} transport-cc`);
return lines.join('\r\n');
};
}
const enableL16 = (payloadTypes, section) => {
let lines = section.split('\r\n');
static #enableL16(payloadTypes, section) {
const lines = section.split('\r\n');
let payloadType = reservePayloadType(payloadTypes);
let payloadType = this.#reservePayloadType(payloadTypes);
lines[0] += ` ${payloadType}`;
lines.splice(lines.length - 1, 0, `a=rtpmap:${payloadType} L16/8000/2`);
lines.splice(lines.length - 1, 0, `a=rtcp-fb:${payloadType} transport-cc`);
payloadType = reservePayloadType(payloadTypes);
payloadType = this.#reservePayloadType(payloadTypes);
lines[0] += ` ${payloadType}`;
lines.splice(lines.length - 1, 0, `a=rtpmap:${payloadType} L16/16000/2`);
lines.splice(lines.length - 1, 0, `a=rtcp-fb:${payloadType} transport-cc`);
payloadType = reservePayloadType(payloadTypes);
payloadType = this.#reservePayloadType(payloadTypes);
lines[0] += ` ${payloadType}`;
lines.splice(lines.length - 1, 0, `a=rtpmap:${payloadType} L16/48000/2`);
lines.splice(lines.length - 1, 0, `a=rtcp-fb:${payloadType} transport-cc`);
return lines.join('\r\n');
};
}
const enableStereoOpus = (section) => {
static #enableStereoOpus(section) {
let opusPayloadFormat = '';
let lines = section.split('\r\n');
const lines = section.split('\r\n');
for (let i = 0; i < lines.length; i++) {
if (lines[i].startsWith('a=rtpmap:') && lines[i].toLowerCase().includes('opus/')) {
@@ -203,7 +252,7 @@
}
for (let i = 0; i < lines.length; i++) {
if (lines[i].startsWith('a=fmtp:' + opusPayloadFormat + ' ')) {
if (lines[i].startsWith(`a=fmtp:${opusPayloadFormat} `)) {
if (!lines[i].includes('stereo')) {
lines[i] += ';stereo=1';
}
@@ -214,9 +263,9 @@
}
return lines.join('\r\n');
};
}
const editOffer = (sdp, nonAdvertisedCodecs) => {
static #editOffer(sdp, nonAdvertisedCodecs) {
const sections = sdp.split('m=');
const payloadTypes = sections.slice(1)
@@ -225,16 +274,16 @@
for (let i = 1; i < sections.length; i++) {
if (sections[i].startsWith('audio')) {
sections[i] = enableStereoOpus(sections[i]);
sections[i] = this.#enableStereoOpus(sections[i]);
if (nonAdvertisedCodecs.includes('pcma/8000/2')) {
sections[i] = enableStereoPcmau(payloadTypes, sections[i]);
sections[i] = this.#enableStereoPcmau(payloadTypes, sections[i]);
}
if (nonAdvertisedCodecs.includes('multiopus/48000/6')) {
sections[i] = enableMultichannelOpus(payloadTypes, sections[i]);
sections[i] = this.#enableMultichannelOpus(payloadTypes, sections[i]);
}
if (nonAdvertisedCodecs.includes('L16/48000/2')) {
sections[i] = enableL16(payloadTypes, sections[i]);
sections[i] = this.#enableL16(payloadTypes, sections[i]);
}
break;
@@ -242,9 +291,9 @@
}
return sections.join('m=');
};
}
const generateSdpFragment = (od, candidates) => {
static #generateSdpFragment(od, candidates) {
const candidatesByMedia = {};
for (const candidate of candidates) {
const mid = candidate.sdpMLineIndex;
@@ -254,50 +303,28 @@
candidatesByMedia[mid].push(candidate);
}
let frag = 'a=ice-ufrag:' + od.iceUfrag + '\r\n'
+ 'a=ice-pwd:' + od.icePwd + '\r\n';
let frag = `a=ice-ufrag:${od.iceUfrag}\r\n`
+ `a=ice-pwd:${od.icePwd}\r\n`;
let mid = 0;
for (const media of od.medias) {
if (candidatesByMedia[mid] !== undefined) {
frag += 'm=' + media + '\r\n'
+ 'a=mid:' + mid + '\r\n';
frag += `m=${media}\r\n`
+ `a=mid:${mid}\r\n`;
for (const candidate of candidatesByMedia[mid]) {
frag += 'a=' + candidate.candidate + '\r\n';
frag += `a=${candidate.candidate}\r\n`;
}
}
mid++;
}
return frag;
};
const retryPause = 2000;
class MediaMTXWebRTCReader {
constructor(conf) {
this.conf = conf;
this.state = 'initializing';
this.restartTimeout = null;
this.pc = null;
this.offerData = null;
this.sessionUrl = null;
this.queuedCandidates = [];
this.getNonAdvertisedCodecs()
.then(() => this.start())
.catch((err) => {
this.handleError(err);
});
}
handleError = (err) => {
if (this.state === 'restarting' || this.state === 'error') {
return;
}
}
#handleError(err) {
if (this.state === 'running') {
if (this.pc !== null) {
this.pc.close();
this.pc = null;
@@ -313,92 +340,106 @@
}
this.queuedCandidates = [];
this.state = 'restarting';
if (this.state === 'running') {
this.state = 'restarting';
this.restartTimeout = window.setTimeout(() => {
this.restartTimeout = null;
this.state = 'running';
this.#start();
}, this.retryPause);
this.restartTimeout = window.setTimeout(() => {
this.restartTimeout = null;
this.start();
}, retryPause);
if (this.conf.onError !== undefined) {
this.conf.onError(err + ', retrying in some seconds');
}
} else {
this.state = 'error';
if (this.conf.onError !== undefined) {
this.conf.onError(err);
}
if (this.conf.onError !== undefined) {
this.conf.onError(`${err}, retrying in some seconds`);
}
};
} else if (this.state === 'getting_codecs') {
this.state = 'failed';
getNonAdvertisedCodecs = () => {
return Promise.all([
['pcma/8000/2'],
['multiopus/48000/6', 'channel_mapping=0,4,1,2,3,5;num_streams=4;coupled_streams=2'],
['L16/48000/2'],
]
.map((c) => supportsNonAdvertisedCodec(c[0], c[1]).then((r) => (r) ? c[0] : false)))
.then((c) => c.filter((e) => e !== false))
.then((codecs) => {
this.nonAdvertisedCodecs = codecs;
});
};
if (this.conf.onError !== undefined) {
this.conf.onError(err);
}
}
}
start = () => {
this.state = 'running';
#getNonAdvertisedCodecs() {
Promise.all([
['pcma/8000/2'],
['multiopus/48000/6', 'channel_mapping=0,4,1,2,3,5;num_streams=4;coupled_streams=2'],
['L16/48000/2'],
]
.map((c) => MediaMTXWebRTCReader.#supportsNonAdvertisedCodec(c[0], c[1]).then((r) => ((r) ? c[0] : false))))
.then((c) => c.filter((e) => e !== false))
.then((codecs) => {
if (this.state !== 'getting_codecs') {
throw new Error('closed');
}
this.requestICEServers()
.then((iceServers) => this.setupPeerConnection(iceServers))
.then((offer) => this.sendOffer(offer))
.then((answer) => this.setAnswer(answer))
.catch((err) => {
this.handleError(err.toString());
});
};
requestICEServers = () => {
return fetch(this.conf.url, {
method: 'OPTIONS',
this.nonAdvertisedCodecs = codecs;
this.state = 'running';
this.#start();
})
.then((res) => linkToIceServers(res.headers.get('Link')))
};
setupPeerConnection = (iceServers) => {
this.pc = new RTCPeerConnection({
iceServers,
// https://webrtc.org/getting-started/unified-plan-transition-guide
sdpSemantics: 'unified-plan',
.catch((err) => {
this.#handleError(err);
});
}
const direction = 'recvonly';
this.pc.addTransceiver('video', { direction });
this.pc.addTransceiver('audio', { direction });
#start() {
this.#requestICEServers()
.then((iceServers) => this.#setupPeerConnection(iceServers))
.then((offer) => this.#sendOffer(offer))
.then((answer) => this.#setAnswer(answer))
.catch((err) => {
this.#handleError(err.toString());
});
}
this.pc.onicecandidate = (evt) => this.onLocalCandidate(evt);
this.pc.onconnectionstatechange = () => this.onConnectionState();
this.pc.ontrack = (evt) => this.onTrack(evt);
#requestICEServers() {
return fetch(this.conf.url, {
method: 'OPTIONS',
})
.then((res) => MediaMTXWebRTCReader.#linkToIceServers(res.headers.get('Link')));
}
return this.pc.createOffer()
.then((offer) => {
offer.sdp = editOffer(offer.sdp, this.nonAdvertisedCodecs);
this.offerData = parseOffer(offer.sdp);
#setupPeerConnection(iceServers) {
if (this.state !== 'running') {
throw new Error('closed');
}
return this.pc.setLocalDescription(offer)
.then(() => offer.sdp);
});
};
this.pc = new RTCPeerConnection({
iceServers,
// https://webrtc.org/getting-started/unified-plan-transition-guide
sdpSemantics: 'unified-plan',
});
sendOffer = (offer) => {
return fetch(this.conf.url, {
method: 'POST',
headers: {'Content-Type': 'application/sdp'},
body: offer,
})
.then((res) => {
switch (res.status) {
const direction = 'recvonly';
this.pc.addTransceiver('video', { direction });
this.pc.addTransceiver('audio', { direction });
this.pc.onicecandidate = (evt) => this.#onLocalCandidate(evt);
this.pc.onconnectionstatechange = () => this.#onConnectionState();
this.pc.ontrack = (evt) => this.#onTrack(evt);
return this.pc.createOffer()
.then((offer) => {
offer.sdp = MediaMTXWebRTCReader.#editOffer(offer.sdp, this.nonAdvertisedCodecs);
this.offerData = MediaMTXWebRTCReader.#parseOffer(offer.sdp);
return this.pc.setLocalDescription(offer)
.then(() => offer.sdp);
});
}
#sendOffer(offer) {
if (this.state !== 'running') {
throw new Error('closed');
}
return fetch(this.conf.url, {
method: 'POST',
headers: {'Content-Type': 'application/sdp'},
body: offer,
})
.then((res) => {
switch (res.status) {
case 201:
break;
case 404:
@@ -407,93 +448,94 @@
return res.json().then((e) => { throw new Error(e.error); });
default:
throw new Error(`bad status code ${res.status}`);
}
this.sessionUrl = new URL(res.headers.get('location'), this.conf.url).toString();
return res.text();
});
};
setAnswer = (answer) => {
if (this.state !== 'running') {
return;
}
return this.pc.setRemoteDescription(new RTCSessionDescription({
type: 'answer',
sdp: answer,
}))
.then(() => {
if (this.queuedCandidates.length !== 0) {
this.sendLocalCandidates(this.queuedCandidates);
this.queuedCandidates = [];
}
});
};
onLocalCandidate = (evt) => {
if (this.state !== 'running') {
return;
}
if (evt.candidate !== null) {
if (this.sessionUrl === null) {
this.queuedCandidates.push(evt.candidate);
} else {
this.sendLocalCandidates([evt.candidate]);
}
}
};
sendLocalCandidates = (candidates) => {
fetch(this.sessionUrl, {
method: 'PATCH',
headers: {
'Content-Type': 'application/trickle-ice-sdpfrag',
'If-Match': '*',
},
body: generateSdpFragment(this.offerData, candidates),
})
.then((res) => {
switch (res.status) {
this.sessionUrl = new URL(res.headers.get('location'), this.conf.url).toString();
return res.text();
});
}
#setAnswer(answer) {
if (this.state !== 'running') {
throw new Error('closed');
}
return this.pc.setRemoteDescription(new RTCSessionDescription({
type: 'answer',
sdp: answer,
}))
.then(() => {
if (this.state !== 'running') {
return;
}
if (this.queuedCandidates.length !== 0) {
this.#sendLocalCandidates(this.queuedCandidates);
this.queuedCandidates = [];
}
});
}
#onLocalCandidate(evt) {
if (this.state !== 'running') {
return;
}
if (evt.candidate !== null) {
if (this.sessionUrl === null) {
this.queuedCandidates.push(evt.candidate);
} else {
this.#sendLocalCandidates([evt.candidate]);
}
}
}
#sendLocalCandidates(candidates) {
fetch(this.sessionUrl, {
method: 'PATCH',
headers: {
'Content-Type': 'application/trickle-ice-sdpfrag',
'If-Match': '*',
},
body: MediaMTXWebRTCReader.#generateSdpFragment(this.offerData, candidates),
})
.then((res) => {
switch (res.status) {
case 204:
break;
case 404:
throw new Error('stream not found');
default:
throw new Error(`bad status code ${res.status}`);
}
})
.catch((err) => {
this.handleError(err.toString());
});
};
onConnectionState = () => {
if (this.state !== 'running') {
return;
}
// "closed" can arrive before "failed" and without
// the close() method being called at all.
// It happens when the other peer sends a termination
// message like a DTLS CloseNotify.
if (this.pc.connectionState === 'failed'
|| this.pc.connectionState === 'closed'
) {
this.handleError('peer connection closed');
}
};
onTrack = (evt) => {
if (this.conf.onTrack !== undefined) {
this.conf.onTrack(evt);
}
};
}
})
.catch((err) => {
this.#handleError(err.toString());
});
}
window.MediaMTXWebRTCReader = MediaMTXWebRTCReader;
#onConnectionState() {
if (this.state !== 'running') {
return;
}
})();
// "closed" can arrive before "failed" and without
// the close() method being called at all.
// It happens when the other peer sends a termination
// message like a DTLS CloseNotify.
if (this.pc.connectionState === 'failed'
|| this.pc.connectionState === 'closed'
) {
this.#handleError('peer connection closed');
}
}
#onTrack(evt) {
if (this.conf.onTrack !== undefined) {
this.conf.onTrack(evt);
}
}
}
window.MediaMTXWebRTCReader = MediaMTXWebRTCReader;