AxisCommunications · shurkaxaa · Feb 9, 2022
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Example of H.264 RTSP video streaming via WebSocket Proxy</title>
+  </head>
+
+  <body>
+    <div style="width: 640px; height: 480px; padding: 10px">
+      <media-stream-player
+	variant="normal"
+	format="RTP_H264"
+        rtspurl="rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov"
+        wsproxy="172.16.0.56/websockify/?ip=wowzaec2demo.streamlock.net&port=554"
+      />
+    </div>
+    <script src="./media-stream-player.min.js"></script>
+  </body>
+</html>
@@ -27,6 +27,8 @@ const DEFAULT_FORMAT = Format.JPEG
 
 interface BasicPlayerProps {
   readonly hostname: string
+  readonly wsproxy: string
+  readonly rtspurl: string
   readonly vapixParams?: VapixParameters
   readonly format?: Format
   readonly autoPlay?: boolean
@@ -46,6 +48,8 @@ export const BasicPlayer = forwardRef<PlayerNativeElement, BasicPlayerProps>(
   (
     {
       hostname,
+      wsproxy,
+      rtspurl,
       vapixParams = {},
       format = DEFAULT_FORMAT,
       autoPlay = false,
@@ -57,6 +61,8 @@ export const BasicPlayer = forwardRef<PlayerNativeElement, BasicPlayerProps>(
   ) => {
     const [play, setPlay] = useState(autoPlay)
     const [host, setHost] = useState(hostname)
+    const [ws_proxy, setWSProxy] = useState(wsproxy)
+    const [rtsp_url, setRTSPURL] = useState(rtspurl)
 
     /**
      * Controls
@@ -75,25 +81,31 @@ export const BasicPlayer = forwardRef<PlayerNativeElement, BasicPlayerProps>(
         setPlay(false)
       } else {
         setHost(hostname)
+        setWSProxy(wsproxy)
+        setRTSPURL(rtspurl)
         setPlay(true)
       }
-    }, [play, hostname])
+    }, [play, hostname, wsproxy, rtspurl])
 
     useEffect(() => {
       const cb = () => {
         if (document.visibilityState === 'visible') {
           setPlay(true)
           setHost(hostname)
+          setWSProxy(wsproxy)
+          setRTSPURL(rtspurl)
         } else if (document.visibilityState === 'hidden') {
           setPlay(false)
           setHost('')
+          setWSProxy('')
+          setRTSPURL('')
         }
       }
 
       document.addEventListener('visibilitychange', cb)
 
       return () => document.removeEventListener('visibilitychange', cb)
-    }, [hostname])
+    }, [hostname, wsproxy, rtspurl])
 
     /**
      * Aspect ratio
@@ -156,6 +168,8 @@ export const BasicPlayer = forwardRef<PlayerNativeElement, BasicPlayerProps>(
                 refresh={0}
                 play={play}
                 host={host}
+                wsproxy={ws_proxy}
+                rtspurl={rtsp_url}
                 format={format}
                 parameters={vapixParams}
                 onPlaying={onPlaying}

@@ -150,6 +150,7 @@ interface ControlsProps {
   readonly format: Format
   readonly volume?: number
   readonly setVolume?: (v: number) => void
+  readonly showSettings?: boolean
 }
 
 export const Controls: React.FC<ControlsProps> = ({
@@ -172,6 +173,7 @@ export const Controls: React.FC<ControlsProps> = ({
   format,
   volume,
   setVolume,
+  showSettings = true,
 }) => {
   const controlArea = useRef(null)
   const userActive = useUserActive(controlArea)
@@ -400,9 +402,11 @@ export const Controls: React.FC<ControlsProps> = ({
             {totalDuration === Infinity ? '∙ LIVE' : progress.counter}
           </ProgressIndicator>
         </Progress>
-        <Button onClick={toggleSettings}>
-          <CogWheel title={labels?.settings} />
-        </Button>
+        {showSettings && (
+          <Button onClick={toggleSettings}>
+            <CogWheel title={labels?.settings} />
+          </Button>
+        )}
       </ControlBar>
       {settings && (
         <Settings

@@ -7,6 +7,7 @@ import { Format } from './types'
 
 enum PlayerVariants {
   BASIC = 'basic',
+  NORMAL = 'normal',
   ADVANCED = 'advanced',
 }
 interface InitialAttributes {
@@ -29,6 +30,8 @@ interface InitialAttributes {
   readonly textbackgroundcolor: string
   readonly textpos: string
   readonly secure: boolean
+  readonly wsproxy: string
+  readonly rtspurl: string
 }
 
 type SetStateType = React.Dispatch<React.SetStateAction<InitialAttributes>>
@@ -66,6 +69,8 @@ export class MediaStreamPlayer extends HTMLElement {
       'textbackgroundcolor',
       'textpos',
       'secure',
+      'wsproxy',
+      'rtspurl',
     ]
   }
 
@@ -90,6 +95,8 @@ export class MediaStreamPlayer extends HTMLElement {
       textbackgroundcolor,
       textpos,
       secure,
+      wsproxy,
+      rtspurl,
     } = this
 
     return {
@@ -112,6 +119,8 @@ export class MediaStreamPlayer extends HTMLElement {
       textbackgroundcolor,
       textpos,
       secure,
+      wsproxy,
+      rtspurl,
     }
   }
 
@@ -279,7 +288,40 @@ export class MediaStreamPlayer extends HTMLElement {
     }
   }
 
+  public get wsproxy() {
+    return this.getAttribute('wsproxy') ?? ''
+  }
+
+  public set wsproxy(value: string) {
+    this.setAttribute('wsproxy', value)
+  }
+
+  public get rtspurl() {
+    return this.getAttribute('rtspurl') ?? ''
+  }
+
+  public set rtspurl(value: string) {
+    this.setAttribute('rtspurl', value)
+  }
+
   public connectedCallback() {
+    if (this.rtspurl) {
+      // RTSP over WS player, no AXIS specific infra required
+      ReactDOM.render(
+        <PlayerComponent
+          // eslint-disable-next-line react/jsx-no-bind
+          subscribeAttributesChanged={(cb) =>
+            this.attributeChangeSubscriber(cb)
+          }
+          initialAttributes={{
+            ...this.allAttributes,
+          }}
+        />,
+        this,
+      )
+      return
+    }
+
     const userGroupUrl = new URL(
       `http://${this.hostname}/axis-cgi/usergroup.cgi`,
     )
@@ -343,6 +385,8 @@ const PlayerComponent: React.FC<PlayerComponentProps> = ({
   const {
     variant,
     hostname,
+    wsproxy,
+    rtspurl,
     autoplay,
     autoretry,
     format,
@@ -405,17 +449,35 @@ const PlayerComponent: React.FC<PlayerComponentProps> = ({
       return (
         <Player
           hostname={hostname}
+          wsproxy={wsproxy}
+          rtspurl={rtspurl}
+          autoPlay={autoplay}
+          autoRetry={autoretry}
+          initialFormat={format as Format}
+          vapixParams={vapixParameters}
+          secure={secure}
+        />
+      )
+    case PlayerVariants.NORMAL:
+      return (
+        <Player
+          hostname={hostname}
+          wsproxy={wsproxy}
+          rtspurl={rtspurl}
           autoPlay={autoplay}
           autoRetry={autoretry}
           initialFormat={format as Format}
           vapixParams={vapixParameters}
           secure={secure}
+          settings={false}
         />
       )
     case PlayerVariants.BASIC:
       return (
         <BasicPlayer
           hostname={hostname}
+          wsproxy={wsproxy}
+          rtspurl={rtspurl}
           autoPlay={autoplay}
           autoRetry={autoretry}
           format={format as Format}

@@ -72,6 +72,8 @@ export interface VideoProperties {
 interface PlaybackAreaProps {
   readonly forwardedRef?: Ref<PlayerNativeElement>
   readonly host: string
+  readonly wsproxy: string
+  readonly rtspurl: string
   readonly format: Format
   readonly parameters?: VapixParameters
   readonly play?: boolean
@@ -219,6 +221,8 @@ const searchParams = (api: AxisApi, parameters: VapixParameters = {}) => {
 
 export const PlaybackArea: React.FC<PlaybackAreaProps> = ({
   forwardedRef,
+  wsproxy,
+  rtspurl,
   host,
   format,
   parameters = {},
@@ -235,6 +239,40 @@ export const PlaybackArea: React.FC<PlaybackAreaProps> = ({
 }) => {
   const timestamp = refresh.toString()
 
+  if (format === Format.RTP_H264 && rtspurl) {
+    const rtsp = rtspurl
+    let ws = ''
+    if (rtsp) {
+      const url = new URL(rtsp)
+      const rtsp_host = url.hostname
+      const rtsp_port = url.port || '554'
+
+      const ws_proto = secure ? Protocol.WSS : Protocol.WS
+      const port_suffix = window.location.port ? `:${window.location.port}` : ''
+      const ws_proxy = wsproxy || `${window.location.hostname}${port_suffix}`
+      ws = `${ws_proto}//${ws_proxy}`
+    }
+
+    return (
+      <WsRtspVideo
+        key={refresh}
+        forwardedRef={forwardedRef as Ref<HTMLVideoElement>}
+        {...{
+          ws,
+          rtsp,
+          play,
+          offset,
+          onPlaying,
+          onEnded,
+          onSdp,
+          onRtcp,
+          metadataHandler,
+          autoRetry,
+        }}
+      />
+    )
+  }
+
   if (format === Format.RTP_H264) {
     const ws = wsUri(secure ? Protocol.WSS : Protocol.WS, host)
     const rtsp = rtspUri(