diff --git a/package.json b/package.json index e66a0d9..09e172d 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "@testing-library/user-event": "^13.2.1", "@types/webscopeio__react-textarea-autocomplete": "^4.7.2", "@webscopeio/react-textarea-autocomplete": "^4.9.2", + "buffer": "^6.0.3", "hls.js": "^1.4.6", "lodash": "^4.17.21", "moment": "^2.29.4", @@ -20,14 +21,13 @@ "react-dom": "^18.2.0", "react-intersection-observer": "^9.5.1", "react-router-dom": "^6.13.0", - "react-scripts": "5.0.1", - "web-vitals": "^2.1.0" + "semantic-sdp": "^3.26.2", + "web-vitals": "^2.1.0", + "webrtc-adapter": "^8.2.3" }, "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject", + "start": "webpack serve", + "build": "webpack --node-env=production", "deploy": "npx wrangler pages publish build" }, "eslintConfig": { @@ -49,10 +49,30 @@ ] }, "devDependencies": { - "@babel/plugin-proposal-private-property-in-object": "^7.21.11", + "@babel/plugin-syntax-import-assertions": "^7.20.0", + "@babel/preset-env": "^7.21.5", + "@babel/preset-react": "^7.18.6", + "@formatjs/cli": "^6.0.1", + "@formatjs/ts-transformer": "^3.13.1", "@types/lodash": "^4.14.195", "@webbtc/webln-types": "^1.0.12", + "babel-loader": "^9.1.2", + "babel-plugin-formatjs": "^10.5.1", + "copy-webpack-plugin": "^11.0.0", + "css-loader": "^6.7.3", + "css-minimizer-webpack-plugin": "^5.0.0", + "eslint": "^8.43.0", + "eslint-plugin-formatjs": "^4.10.1", + "eslint-webpack-plugin": "^4.0.1", + "html-webpack-plugin": "^5.5.1", + "mini-css-extract-plugin": "^2.7.5", "prettier": "^2.8.8", - "typescript": "^5.1.3" + "ts-loader": "^9.4.2", + "typescript": "^5.1.3", + "webpack": "^5.82.1", + "webpack-bundle-analyzer": "^4.8.0", + "webpack-cli": "^5.1.1", + "webpack-dev-server": "^4.15.0", + "workbox-webpack-plugin": "^6.5.4" } } diff --git a/public/index.html b/public/index.html index a2044b9..39d74b9 100644 --- a/public/index.html +++ b/public/index.html @@ -3,12 +3,12 @@ - - - + + + Nostr stream diff --git a/src/element/live-video-player.tsx b/src/element/live-video-player.tsx index 1354f44..1d3edb5 100644 --- a/src/element/live-video-player.tsx +++ b/src/element/live-video-player.tsx @@ -1,5 +1,6 @@ import Hls from "hls.js"; import { HTMLProps, useEffect, useMemo, useRef, useState } from "react"; +import { WISH } from "wish"; export enum VideoStatus { Online = "online", @@ -52,3 +53,34 @@ export function LiveVideoPlayer( ); } + +export function WebRTCPlayer(props: HTMLProps & { stream?: string }) { + const video = useRef(null); + const streamCached = useMemo(() => "https://customer-uu10flpvos4pfhgu.cloudflarestream.com/7634aee1af35a2de4ac13ca3d1718a8b/webRTC/play", [props.stream]); + const [status, setStatus] = useState(); + //https://customer-uu10flpvos4pfhgu.cloudflarestream.com/7634aee1af35a2de4ac13ca3d1718a8b/webRTC/play + + useEffect(() => { + if (video.current && streamCached) { + const client = new WISH(); + client.addEventListener("log", console.debug); + client.WithEndpoint(streamCached, true) + + client.Play().then(s => { + if (video.current) { + video.current.srcObject = s; + } + }).catch(console.error); + return () => { client.Disconnect().catch(console.error); } + } + }, [video, streamCached]); + + return ( + <> +
+
{status}
+
+