deepsea-components 5.17.36 → 5.18.0

package/dist/components/rtspPlayer/reader.js

@@ -0,0 +1,389 @@
+class MediaMTXWebRTCReader {
+    retryPause = 2000;
+    conf;
+    state = "getting_codecs";
+    restartTimeout = null;
+    pc = null;
+    offerData = null;
+    sessionUrl = null;
+    queuedCandidates = [];
+    nonAdvertisedCodecs = [];
+    constructor(conf){
+        this.conf = conf;
+        this.getNonAdvertisedCodecs();
+    }
+    close() {
+        this.state = "closed";
+        if (this.pc) {
+            this.pc.close();
+            this.pc = null;
+        }
+        if (null !== this.restartTimeout) {
+            clearTimeout(this.restartTimeout);
+            this.restartTimeout = null;
+        }
+    }
+    static supportsNonAdvertisedCodec(codec, fmtp) {
+        return new Promise((resolve)=>{
+            const pc = new RTCPeerConnection({
+                iceServers: []
+            });
+            const mediaType = "audio";
+            let payloadType = "";
+            pc.addTransceiver(mediaType, {
+                direction: "recvonly"
+            });
+            pc.createOffer().then((offer)=>{
+                if (void 0 === offer.sdp) throw new Error("SDP not present");
+                if (offer.sdp.includes(` ${codec}`)) throw new Error("already present");
+                const sections = offer.sdp.split(`m=${mediaType}`);
+                const payloadTypes = sections.slice(1).map((section)=>section.split("\r\n")[0].split(" ").slice(3)).reduce((prev, cur)=>[
+                        ...prev,
+                        ...cur
+                    ], []);
+                payloadType = MediaMTXWebRTCReader.reservePayloadType(payloadTypes);
+                const lines = sections[1].split("\r\n");
+                lines[0] += ` ${payloadType}`;
+                lines.splice(lines.length - 1, 0, `a=rtpmap:${payloadType} ${codec}`);
+                if (void 0 !== fmtp) lines.splice(lines.length - 1, 0, `a=fmtp:${payloadType} ${fmtp}`);
+                sections[1] = lines.join("\r\n");
+                offer.sdp = sections.join(`m=${mediaType}`);
+                return pc.setLocalDescription(offer);
+            }).then(()=>pc.setRemoteDescription(new RTCSessionDescription({
+                    type: "answer",
+                    sdp: `v=0\r\no=- 6539324223450680508 0 IN IP4 0.0.0.0\r\ns=-\r\nt=0 0\r\na=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\nm=${mediaType} 9 UDP/TLS/RTP/SAVPF ${payloadType}\r\nc=IN IP4 0.0.0.0\r\na=ice-pwd:7c3bf4770007e7432ee4ea4d697db675\r\na=ice-ufrag:29e036dc\r\na=sendonly\r\na=rtcp-mux\r\na=rtpmap:${payloadType} ${codec}\r\n` + (void 0 !== fmtp ? `a=fmtp:${payloadType} ${fmtp}\r\n` : "")
+                }))).then(()=>resolve(true)).catch(()=>resolve(false)).finally(()=>pc.close());
+        });
+    }
+    static unquoteCredential(value) {
+        return JSON.parse(`"${value}"`);
+    }
+    static linkToIceServers(links) {
+        if (null === links) return [];
+        return links.split(", ").map((link)=>{
+            const match = link.match(/^<(.+?)>; rel="ice-server"(; username="(.*?)"; credential="(.*?)"; credential-type="password")?/i);
+            if (!match) return null;
+            const ret = {
+                urls: [
+                    match[1]
+                ]
+            };
+            if (void 0 !== match[3] && void 0 !== match[4]) {
+                ret.username = MediaMTXWebRTCReader.unquoteCredential(match[3]);
+                ret.credential = MediaMTXWebRTCReader.unquoteCredential(match[4]);
+                ret.credentialType = "password";
+            }
+            return ret;
+        }).filter((server)=>null !== server);
+    }
+    static parseOffer(sdp) {
+        const ret = {
+            iceUfrag: "",
+            icePwd: "",
+            medias: []
+        };
+        for (const line of sdp.split("\r\n"))if (line.startsWith("m=")) ret.medias.push(line.slice(2));
+        else if ("" === ret.iceUfrag && line.startsWith("a=ice-ufrag:")) ret.iceUfrag = line.slice(12);
+        else if ("" === ret.icePwd && line.startsWith("a=ice-pwd:")) ret.icePwd = line.slice(10);
+        return ret;
+    }
+    static reservePayloadType(payloadTypes) {
+        for(let i = 30; i <= 127; i++)if ((i <= 63 || i >= 96) && !payloadTypes.includes(i.toString())) {
+            const payloadType = i.toString();
+            payloadTypes.push(payloadType);
+            return payloadType;
+        }
+        throw new Error("unable to find a free payload type");
+    }
+    static enableStereoPcmau(payloadTypes, section) {
+        const lines = section.split("\r\n");
+        let payloadType = MediaMTXWebRTCReader.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 = MediaMTXWebRTCReader.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");
+    }
+    static enableMultichannelOpus(payloadTypes, section) {
+        const lines = section.split("\r\n");
+        let payloadType = MediaMTXWebRTCReader.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 = MediaMTXWebRTCReader.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 = MediaMTXWebRTCReader.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 = MediaMTXWebRTCReader.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 = MediaMTXWebRTCReader.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 = MediaMTXWebRTCReader.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");
+    }
+    static enableL16(payloadTypes, section) {
+        const lines = section.split("\r\n");
+        let payloadType = MediaMTXWebRTCReader.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 = MediaMTXWebRTCReader.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 = MediaMTXWebRTCReader.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");
+    }
+    static enableStereoOpus(section) {
+        let opusPayloadFormat = "";
+        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/")) {
+            opusPayloadFormat = lines[i].slice(9).split(" ")[0];
+            break;
+        }
+        if ("" === opusPayloadFormat) return section;
+        for(let i = 0; i < lines.length; i++)if (lines[i].startsWith(`a=fmtp:${opusPayloadFormat} `)) {
+            if (!lines[i].includes("stereo")) lines[i] += ";stereo=1";
+            if (!lines[i].includes("sprop-stereo")) lines[i] += ";sprop-stereo=1";
+        }
+        return lines.join("\r\n");
+    }
+    static editOffer(sdp, nonAdvertisedCodecs) {
+        const sections = sdp.split("m=");
+        const payloadTypes = sections.slice(1).map((section)=>section.split("\r\n")[0].split(" ").slice(3)).reduce((prev, cur)=>[
+                ...prev,
+                ...cur
+            ], []);
+        for(let i = 1; i < sections.length; i++)if (sections[i].startsWith("audio")) {
+            sections[i] = MediaMTXWebRTCReader.enableStereoOpus(sections[i]);
+            if (nonAdvertisedCodecs.includes("pcma/8000/2")) sections[i] = MediaMTXWebRTCReader.enableStereoPcmau(payloadTypes, sections[i]);
+            if (nonAdvertisedCodecs.includes("multiopus/48000/6")) sections[i] = MediaMTXWebRTCReader.enableMultichannelOpus(payloadTypes, sections[i]);
+            if (nonAdvertisedCodecs.includes("L16/48000/2")) sections[i] = MediaMTXWebRTCReader.enableL16(payloadTypes, sections[i]);
+            break;
+        }
+        return sections.join("m=");
+    }
+    static generateSdpFragment(offerData, candidates) {
+        const candidatesByMedia = {};
+        for (const candidate of candidates){
+            const mid = candidate.sdpMLineIndex;
+            if (null !== mid) {
+                candidatesByMedia[mid] ??= [];
+                candidatesByMedia[mid].push(candidate);
+            }
+        }
+        let frag = `a=ice-ufrag:${offerData.iceUfrag}\r\na=ice-pwd:${offerData.icePwd}\r\n`;
+        for(let mid = 0; mid < offerData.medias.length; mid++){
+            const mediaCandidates = candidatesByMedia[mid];
+            if (void 0 !== mediaCandidates) {
+                frag += `m=${offerData.medias[mid]}\r\na=mid:${mid}\r\n`;
+                for (const candidate of mediaCandidates)frag += `a=${candidate.candidate}\r\n`;
+            }
+        }
+        return frag;
+    }
+    handleError(err) {
+        if ("running" === this.state) {
+            var _this_conf_onError, _this_conf;
+            if (this.pc) {
+                this.pc.close();
+                this.pc = null;
+            }
+            this.offerData = null;
+            if (null !== this.sessionUrl) {
+                fetch(this.sessionUrl, {
+                    method: "DELETE"
+                });
+                this.sessionUrl = null;
+            }
+            this.queuedCandidates = [];
+            this.state = "restarting";
+            this.restartTimeout = window.setTimeout(()=>{
+                this.restartTimeout = null;
+                this.state = "running";
+                this.start();
+            }, this.retryPause);
+            null == (_this_conf_onError = (_this_conf = this.conf).onError) || _this_conf_onError.call(_this_conf, `${err}, retrying in some seconds`);
+        } else if ("getting_codecs" === this.state) {
+            var _this_conf_onError1, _this_conf1;
+            this.state = "failed";
+            null == (_this_conf_onError1 = (_this_conf1 = this.conf).onError) || _this_conf_onError1.call(_this_conf1, err);
+        }
+    }
+    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((codec)=>MediaMTXWebRTCReader.supportsNonAdvertisedCodec(codec[0], codec[1]).then((isSupported)=>{
+                if (!isSupported) return false;
+                return codec[0];
+            }))).then((codecs)=>codecs.filter((codec)=>false !== codec)).then((codecs)=>{
+            if ("getting_codecs" !== this.state) throw new Error("closed");
+            this.nonAdvertisedCodecs = codecs;
+            this.state = "running";
+            this.start();
+        }).catch((err)=>this.handleError(String(err)));
+    }
+    start() {
+        this.requestICEServers().then((iceServers)=>this.setupPeerConnection(iceServers)).then((offer)=>this.sendOffer(offer)).then((answer)=>this.setAnswer(answer)).catch((err)=>this.handleError(String(err)));
+    }
+    authHeader() {
+        if (void 0 !== this.conf.user && "" !== this.conf.user) {
+            const credentials = btoa(`${this.conf.user}:${this.conf.pass ?? ""}`);
+            return {
+                Authorization: `Basic ${credentials}`
+            };
+        }
+        if (void 0 !== this.conf.token && "" !== this.conf.token) return {
+            Authorization: `Bearer ${this.conf.token}`
+        };
+        return {};
+    }
+    requestICEServers() {
+        return fetch(this.conf.url, {
+            method: "OPTIONS",
+            headers: {
+                ...this.authHeader()
+            }
+        }).then((res)=>MediaMTXWebRTCReader.linkToIceServers(res.headers.get("Link")));
+    }
+    setupPeerConnection(iceServers) {
+        if ("running" !== this.state) throw new Error("closed");
+        const pc = new RTCPeerConnection({
+            iceServers,
+            sdpSemantics: "unified-plan"
+        });
+        this.pc = pc;
+        const direction = "recvonly";
+        pc.addTransceiver("video", {
+            direction
+        });
+        pc.addTransceiver("audio", {
+            direction
+        });
+        pc.createDataChannel("");
+        pc.onicecandidate = (evt)=>this.onLocalCandidate(evt);
+        pc.onconnectionstatechange = ()=>this.onConnectionState();
+        pc.ontrack = (evt)=>this.onTrack(evt);
+        pc.ondatachannel = (evt)=>this.onDataChannel(evt);
+        return pc.createOffer().then((offer)=>{
+            if (void 0 === offer.sdp) throw new Error("SDP not present");
+            offer.sdp = MediaMTXWebRTCReader.editOffer(offer.sdp, this.nonAdvertisedCodecs);
+            this.offerData = MediaMTXWebRTCReader.parseOffer(offer.sdp);
+            return pc.setLocalDescription(offer).then(()=>offer.sdp);
+        });
+    }
+    sendOffer(offer) {
+        if ("running" !== this.state) throw new Error("closed");
+        return fetch(this.conf.url, {
+            method: "POST",
+            headers: {
+                ...this.authHeader(),
+                "Content-Type": "application/sdp"
+            },
+            body: offer
+        }).then((res)=>{
+            switch(res.status){
+                case 201:
+                    break;
+                case 404:
+                    throw new Error("stream not found");
+                case 400:
+                    return res.json().then((body)=>{
+                        throw new Error(body.error ?? "bad request");
+                    });
+                default:
+                    throw new Error(`bad status code ${res.status}`);
+            }
+            const location = res.headers.get("location");
+            if (null === location) throw new Error("session location not present");
+            this.sessionUrl = new URL(location, this.conf.url).toString();
+            return res.text();
+        });
+    }
+    setAnswer(answer) {
+        if ("running" !== this.state) throw new Error("closed");
+        if (!this.pc) throw new Error("peer connection not present");
+        return this.pc.setRemoteDescription(new RTCSessionDescription({
+            type: "answer",
+            sdp: answer
+        })).then(()=>{
+            if ("running" !== this.state) return;
+            if (0 !== this.queuedCandidates.length) {
+                this.sendLocalCandidates(this.queuedCandidates);
+                this.queuedCandidates = [];
+            }
+        });
+    }
+    onLocalCandidate(evt) {
+        if ("running" !== this.state) return;
+        if (null !== evt.candidate) if (null === this.sessionUrl) this.queuedCandidates.push(evt.candidate);
+        else this.sendLocalCandidates([
+            evt.candidate
+        ]);
+    }
+    sendLocalCandidates(candidates) {
+        if (null === this.sessionUrl || null === this.offerData) return;
+        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(String(err)));
+    }
+    onConnectionState() {
+        if ("running" !== this.state || !this.pc) return;
+        if ("failed" === this.pc.connectionState || "closed" === this.pc.connectionState) this.handleError("peer connection closed");
+    }
+    onTrack(evt) {
+        var _this_conf_onTrack, _this_conf;
+        null == (_this_conf_onTrack = (_this_conf = this.conf).onTrack) || _this_conf_onTrack.call(_this_conf, evt);
+    }
+    onDataChannel(evt) {
+        var _this_conf_onDataChannel, _this_conf;
+        null == (_this_conf_onDataChannel = (_this_conf = this.conf).onDataChannel) || _this_conf_onDataChannel.call(_this_conf, evt);
+    }
+}
+export { MediaMTXWebRTCReader };

package/dist/index.cjs

@@ -54,6 +54,9 @@ var __webpack_modules__ = {
     "@/components/Ring": function(module) {
         module.exports = require("./components/Ring.cjs");
     },
+    "@/components/RtspPlayer": function(module) {
+        module.exports = require("./components/RtspPlayer.cjs");
+    },
     "@/components/Scroll": function(module) {
         module.exports = require("./components/Scroll.cjs");
     },
@@ -245,82 +248,88 @@ var __webpack_exports__ = {};
         return _components_Ring__WEBPACK_IMPORTED_MODULE_17__[key];
     }).bind(0, __WEBPACK_IMPORT_KEY__);
     __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-    var _components_Scroll__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__("@/components/Scroll");
+    var _components_RtspPlayer__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__("@/components/RtspPlayer");
+    var __WEBPACK_REEXPORT_OBJECT__ = {};
+    for(var __WEBPACK_IMPORT_KEY__ in _components_RtspPlayer__WEBPACK_IMPORTED_MODULE_18__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _components_RtspPlayer__WEBPACK_IMPORTED_MODULE_18__[key];
+    }).bind(0, __WEBPACK_IMPORT_KEY__);
+    __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+    var _components_Scroll__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__("@/components/Scroll");
     var __WEBPACK_REEXPORT_OBJECT__ = {};
-    for(var __WEBPACK_IMPORT_KEY__ in _components_Scroll__WEBPACK_IMPORTED_MODULE_18__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
-        return _components_Scroll__WEBPACK_IMPORTED_MODULE_18__[key];
+    for(var __WEBPACK_IMPORT_KEY__ in _components_Scroll__WEBPACK_IMPORTED_MODULE_19__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _components_Scroll__WEBPACK_IMPORTED_MODULE_19__[key];
     }).bind(0, __WEBPACK_IMPORT_KEY__);
     __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-    var _components_ScrollMask__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__("@/components/ScrollMask");
+    var _components_ScrollMask__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__("@/components/ScrollMask");
     var __WEBPACK_REEXPORT_OBJECT__ = {};
-    for(var __WEBPACK_IMPORT_KEY__ in _components_ScrollMask__WEBPACK_IMPORTED_MODULE_19__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
-        return _components_ScrollMask__WEBPACK_IMPORTED_MODULE_19__[key];
+    for(var __WEBPACK_IMPORT_KEY__ in _components_ScrollMask__WEBPACK_IMPORTED_MODULE_20__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _components_ScrollMask__WEBPACK_IMPORTED_MODULE_20__[key];
     }).bind(0, __WEBPACK_IMPORT_KEY__);
     __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-    var _components_SectionRing__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__("@/components/SectionRing");
+    var _components_SectionRing__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__("@/components/SectionRing");
     var __WEBPACK_REEXPORT_OBJECT__ = {};
-    for(var __WEBPACK_IMPORT_KEY__ in _components_SectionRing__WEBPACK_IMPORTED_MODULE_20__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
-        return _components_SectionRing__WEBPACK_IMPORTED_MODULE_20__[key];
+    for(var __WEBPACK_IMPORT_KEY__ in _components_SectionRing__WEBPACK_IMPORTED_MODULE_21__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _components_SectionRing__WEBPACK_IMPORTED_MODULE_21__[key];
     }).bind(0, __WEBPACK_IMPORT_KEY__);
     __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-    var _components_Skeleton__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__("@/components/Skeleton");
+    var _components_Skeleton__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__("@/components/Skeleton");
     var __WEBPACK_REEXPORT_OBJECT__ = {};
-    for(var __WEBPACK_IMPORT_KEY__ in _components_Skeleton__WEBPACK_IMPORTED_MODULE_21__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
-        return _components_Skeleton__WEBPACK_IMPORTED_MODULE_21__[key];
+    for(var __WEBPACK_IMPORT_KEY__ in _components_Skeleton__WEBPACK_IMPORTED_MODULE_22__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _components_Skeleton__WEBPACK_IMPORTED_MODULE_22__[key];
     }).bind(0, __WEBPACK_IMPORT_KEY__);
     __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-    var _components_Title__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__("@/components/Title");
+    var _components_Title__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__("@/components/Title");
     var __WEBPACK_REEXPORT_OBJECT__ = {};
-    for(var __WEBPACK_IMPORT_KEY__ in _components_Title__WEBPACK_IMPORTED_MODULE_22__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
-        return _components_Title__WEBPACK_IMPORTED_MODULE_22__[key];
+    for(var __WEBPACK_IMPORT_KEY__ in _components_Title__WEBPACK_IMPORTED_MODULE_23__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _components_Title__WEBPACK_IMPORTED_MODULE_23__[key];
     }).bind(0, __WEBPACK_IMPORT_KEY__);
     __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-    var _components_TransitionBox__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__("@/components/TransitionBox");
+    var _components_TransitionBox__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__("@/components/TransitionBox");
     var __WEBPACK_REEXPORT_OBJECT__ = {};
-    for(var __WEBPACK_IMPORT_KEY__ in _components_TransitionBox__WEBPACK_IMPORTED_MODULE_23__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
-        return _components_TransitionBox__WEBPACK_IMPORTED_MODULE_23__[key];
+    for(var __WEBPACK_IMPORT_KEY__ in _components_TransitionBox__WEBPACK_IMPORTED_MODULE_24__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _components_TransitionBox__WEBPACK_IMPORTED_MODULE_24__[key];
     }).bind(0, __WEBPACK_IMPORT_KEY__);
     __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-    var _components_TransitionNum__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__("@/components/TransitionNum");
+    var _components_TransitionNum__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__("@/components/TransitionNum");
     var __WEBPACK_REEXPORT_OBJECT__ = {};
-    for(var __WEBPACK_IMPORT_KEY__ in _components_TransitionNum__WEBPACK_IMPORTED_MODULE_24__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
-        return _components_TransitionNum__WEBPACK_IMPORTED_MODULE_24__[key];
+    for(var __WEBPACK_IMPORT_KEY__ in _components_TransitionNum__WEBPACK_IMPORTED_MODULE_25__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _components_TransitionNum__WEBPACK_IMPORTED_MODULE_25__[key];
     }).bind(0, __WEBPACK_IMPORT_KEY__);
     __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-    var _components_Trapezium__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__("@/components/Trapezium");
+    var _components_Trapezium__WEBPACK_IMPORTED_MODULE_26__ = __webpack_require__("@/components/Trapezium");
     var __WEBPACK_REEXPORT_OBJECT__ = {};
-    for(var __WEBPACK_IMPORT_KEY__ in _components_Trapezium__WEBPACK_IMPORTED_MODULE_25__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
-        return _components_Trapezium__WEBPACK_IMPORTED_MODULE_25__[key];
+    for(var __WEBPACK_IMPORT_KEY__ in _components_Trapezium__WEBPACK_IMPORTED_MODULE_26__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _components_Trapezium__WEBPACK_IMPORTED_MODULE_26__[key];
     }).bind(0, __WEBPACK_IMPORT_KEY__);
     __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-    var _components_Unify__WEBPACK_IMPORTED_MODULE_26__ = __webpack_require__("@/components/Unify");
+    var _components_Unify__WEBPACK_IMPORTED_MODULE_27__ = __webpack_require__("@/components/Unify");
     var __WEBPACK_REEXPORT_OBJECT__ = {};
-    for(var __WEBPACK_IMPORT_KEY__ in _components_Unify__WEBPACK_IMPORTED_MODULE_26__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
-        return _components_Unify__WEBPACK_IMPORTED_MODULE_26__[key];
+    for(var __WEBPACK_IMPORT_KEY__ in _components_Unify__WEBPACK_IMPORTED_MODULE_27__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _components_Unify__WEBPACK_IMPORTED_MODULE_27__[key];
     }).bind(0, __WEBPACK_IMPORT_KEY__);
     __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-    var _components_WriteExcel__WEBPACK_IMPORTED_MODULE_27__ = __webpack_require__("@/components/WriteExcel");
+    var _components_WriteExcel__WEBPACK_IMPORTED_MODULE_28__ = __webpack_require__("@/components/WriteExcel");
     var __WEBPACK_REEXPORT_OBJECT__ = {};
-    for(var __WEBPACK_IMPORT_KEY__ in _components_WriteExcel__WEBPACK_IMPORTED_MODULE_27__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
-        return _components_WriteExcel__WEBPACK_IMPORTED_MODULE_27__[key];
+    for(var __WEBPACK_IMPORT_KEY__ in _components_WriteExcel__WEBPACK_IMPORTED_MODULE_28__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _components_WriteExcel__WEBPACK_IMPORTED_MODULE_28__[key];
     }).bind(0, __WEBPACK_IMPORT_KEY__);
     __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-    var _components_WriteSheet__WEBPACK_IMPORTED_MODULE_28__ = __webpack_require__("@/components/WriteSheet");
+    var _components_WriteSheet__WEBPACK_IMPORTED_MODULE_29__ = __webpack_require__("@/components/WriteSheet");
     var __WEBPACK_REEXPORT_OBJECT__ = {};
-    for(var __WEBPACK_IMPORT_KEY__ in _components_WriteSheet__WEBPACK_IMPORTED_MODULE_28__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
-        return _components_WriteSheet__WEBPACK_IMPORTED_MODULE_28__[key];
+    for(var __WEBPACK_IMPORT_KEY__ in _components_WriteSheet__WEBPACK_IMPORTED_MODULE_29__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _components_WriteSheet__WEBPACK_IMPORTED_MODULE_29__[key];
     }).bind(0, __WEBPACK_IMPORT_KEY__);
     __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-    var _utils_getReactVersion__WEBPACK_IMPORTED_MODULE_29__ = __webpack_require__("@/utils/getReactVersion");
+    var _utils_getReactVersion__WEBPACK_IMPORTED_MODULE_30__ = __webpack_require__("@/utils/getReactVersion");
     var __WEBPACK_REEXPORT_OBJECT__ = {};
-    for(var __WEBPACK_IMPORT_KEY__ in _utils_getReactVersion__WEBPACK_IMPORTED_MODULE_29__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
-        return _utils_getReactVersion__WEBPACK_IMPORTED_MODULE_29__[key];
+    for(var __WEBPACK_IMPORT_KEY__ in _utils_getReactVersion__WEBPACK_IMPORTED_MODULE_30__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _utils_getReactVersion__WEBPACK_IMPORTED_MODULE_30__[key];
     }).bind(0, __WEBPACK_IMPORT_KEY__);
     __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-    var _utils_index__WEBPACK_IMPORTED_MODULE_30__ = __webpack_require__("@/utils/index");
+    var _utils_index__WEBPACK_IMPORTED_MODULE_31__ = __webpack_require__("@/utils/index");
     var __WEBPACK_REEXPORT_OBJECT__ = {};
-    for(var __WEBPACK_IMPORT_KEY__ in _utils_index__WEBPACK_IMPORTED_MODULE_30__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
-        return _utils_index__WEBPACK_IMPORTED_MODULE_30__[key];
+    for(var __WEBPACK_IMPORT_KEY__ in _utils_index__WEBPACK_IMPORTED_MODULE_31__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _utils_index__WEBPACK_IMPORTED_MODULE_31__[key];
     }).bind(0, __WEBPACK_IMPORT_KEY__);
     __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
 })();

package/dist/index.d.ts

@@ -16,6 +16,7 @@ export * from "./components/LoopSwiper";
 export * from "./components/ReadExcel";
 export * from "./components/ReadSheet";
 export * from "./components/Ring";
+export * from "./components/RtspPlayer";
 export * from "./components/Scroll";
 export * from "./components/ScrollMask";
 export * from "./components/SectionRing";

package/dist/index.js

@@ -16,6 +16,7 @@ export * from "./components/LoopSwiper.js";
 export * from "./components/ReadExcel.js";
 export * from "./components/ReadSheet.js";
 export * from "./components/Ring.js";
+export * from "./components/RtspPlayer.js";
 export * from "./components/Scroll.js";
 export * from "./components/ScrollMask.js";
 export * from "./components/SectionRing.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deepsea-components",
-  "version": "5.17.36",
+  "version": "5.18.0",
   "description": "格数科技自用组件库",
   "type": "module",
   "exports": {
@@ -41,8 +41,8 @@
     "hls.js": "^1.6.13",
     "smooth-scrollbar": "^8.8.4",
     "stable-hash": "^0.0.6",
-    "soda-hooks": "6.16.23",
-    "deepsea-tools": "5.47.10"
+    "deepsea-tools": "5.47.10",
+    "soda-hooks": "6.16.23"
   },
   "devDependencies": {
     "typescript": ">=5.8.3"

package/src/components/RtspPlayer.tsx

@@ -0,0 +1,93 @@
+"use client"
+
+import { ComponentProps, FC, useEffect, useImperativeHandle, useRef } from "react"
+
+import { MediaMTXWebRTCReader } from "@/components/rtspPlayer/reader"
+
+export interface RtspPlayerProps extends Omit<ComponentProps<"video">, "src" | "children"> {
+    src: string
+    user?: string
+    pass?: string
+    token?: string
+    onReaderError?: (error: string) => void
+}
+
+function getWhepUrl(src: string) {
+    const url = new URL(src, window.location.href)
+
+    if (url.protocol !== "http:" && url.protocol !== "https:") {
+        throw new Error("RtspPlayer expects a MediaMTX HTTP(S) playback URL, not an RTSP URL")
+    }
+
+    const pathname = url.pathname.replace(/\/+$/, "")
+    url.pathname = pathname.endsWith("/whep") ? pathname : `${pathname}/whep`
+    url.hash = ""
+
+    return url.toString()
+}
+
+function stopStream(stream: MediaStream) {
+    stream.getTracks().forEach(track => track.stop())
+}
+
+export const RtspPlayer: FC<RtspPlayerProps> = ({ ref, src, user, pass, token, onReaderError, ...rest }) => {
+    const video = useRef<HTMLVideoElement>(null)
+    const onReaderErrorRef = useRef(onReaderError)
+
+    useImperativeHandle(ref, () => video.current!, [])
+
+    useEffect(() => {
+        onReaderErrorRef.current = onReaderError
+    }, [onReaderError])
+
+    useEffect(() => {
+        const { current: player } = video
+        if (!player || !src) return
+
+        if (typeof RTCPeerConnection === "undefined" || typeof MediaStream === "undefined") {
+            onReaderErrorRef.current?.("RtspPlayer requires WebRTC support in the current browser")
+            return
+        }
+
+        let whepUrl: string
+
+        try {
+            whepUrl = getWhepUrl(src)
+        } catch (error) {
+            onReaderErrorRef.current?.(error instanceof Error ? error.message : String(error))
+            return
+        }
+
+        let closed = false
+        const fallbackStream = new MediaStream()
+        const reader = new MediaMTXWebRTCReader({
+            url: whepUrl,
+            user,
+            pass,
+            token,
+            onError: error => onReaderErrorRef.current?.(error),
+            onTrack: evt => {
+                if (closed) return
+
+                const stream = evt.streams[0] ?? fallbackStream
+
+                if (evt.streams.length === 0 && !fallbackStream.getTracks().includes(evt.track)) fallbackStream.addTrack(evt.track)
+                if (player.srcObject !== stream) player.srcObject = stream
+            },
+        })
+
+        return () => {
+            closed = true
+            reader.close()
+
+            const { srcObject } = player
+            if (srcObject instanceof MediaStream) stopStream(srcObject)
+            if (srcObject !== fallbackStream) stopStream(fallbackStream)
+
+            player.srcObject = null
+            player.load()
+        }
+    }, [src, user, pass, token])
+
+    return <video ref={video} {...rest} />
+}