stream.place
Live video on the AT Protocol
1import { PlayerProtocol } from "@streamplace/components";
2import useStreamplaceNode from "hooks/useStreamplaceNode";
3import { useMemo } from "react";
4
5const protocolSuffixes = {
6 m3u8: PlayerProtocol.HLS,
7 mp4: PlayerProtocol.PROGRESSIVE_MP4,
8 webm: PlayerProtocol.PROGRESSIVE_WEBM,
9 webrtc: PlayerProtocol.WEBRTC,
10};
11
12export function srcToUrl(
13 props: {
14 src: string;
15 selectedRendition?: string;
16 },
17 protocol: PlayerProtocol,
18): {
19 url: string;
20 protocol: string;
21} {
22 const { url } = useStreamplaceNode();
23 return useMemo(() => {
24 if (props.src.startsWith("http://") || props.src.startsWith("https://")) {
25 const segments = props.src.split(/[./]/);
26 const suffix = segments[segments.length - 1];
27 if (protocolSuffixes[suffix]) {
28 return {
29 url: props.src,
30 protocol: protocolSuffixes[suffix],
31 };
32 } else {
33 throw new Error(`unknown playback protocol: ${suffix}`);
34 }
35 }
36 let outUrl: string;
37 if (protocol === PlayerProtocol.HLS) {
38 if (props.selectedRendition === "auto") {
39 outUrl = `${url}/api/playback/${props.src}/hls/index.m3u8`;
40 } else {
41 outUrl = `${url}/api/playback/${props.src}/hls/index.m3u8?rendition=${props.selectedRendition || "source"}`;
42 }
43 } else if (protocol === PlayerProtocol.PROGRESSIVE_MP4) {
44 outUrl = `${url}/api/playback/${props.src}/stream.mp4`;
45 } else if (protocol === PlayerProtocol.PROGRESSIVE_WEBM) {
46 outUrl = `${url}/api/playback/${props.src}/stream.webm`;
47 } else if (protocol === PlayerProtocol.WEBRTC) {
48 outUrl = `${url}/api/playback/${props.src}/webrtc?rendition=${props.selectedRendition || "source"}`;
49 } else {
50 throw new Error(`unknown playback protocol: ${protocol}`);
51 }
52 return {
53 protocol: protocol,
54 url: outUrl,
55 };
56 }, [props.src, props.selectedRendition, protocol, url]);
57}