feat(simulator): support phase5 publish and subscribe media credentials

Backend/public/mobile-sim.html

@@ -158,6 +158,7 @@
           </div>
           <button id="requestStreamBtn">Request On-Demand Stream</button>
           <button id="fetchPlaybackBtn" class="alt">Fetch Playback Token (Latest)</button>
+          <button id="fetchSubscribeBtn" class="alt">Fetch Subscribe Credentials</button>
           <pre id="clientState"></pre>
         </section>
 
@@ -165,6 +166,7 @@
           <h2>Camera Actions</h2>
           <button id="startMotionBtn" class="warn">Start Motion Event</button>
           <button id="endMotionBtn" class="danger">End Last Motion Event</button>
+          <button id="fetchPublishBtn" class="alt">Fetch Publish Credentials</button>
           <pre id="cameraState"></pre>
         </section>
       </div>
@@ -271,6 +273,12 @@
           state.lastStreamSessionId = payload.streamSessionId;
           render();
           log('stream:started', payload);
+
+          if (state.device?.role === 'client') {
+            deviceFetch(`/streams/${payload.streamSessionId}/subscribe-credentials`)
+              .then((credentials) => log('auto subscribe credentials', credentials))
+              .catch((error) => log('auto subscribe credentials failed', { error: error.message }));
+          }
         });
         state.socket.on('stream:ended', (payload) => log('stream:ended', payload));
         state.socket.on('motion:detected', (payload) => log('motion:detected', payload));
@@ -286,6 +294,11 @@
                 method: 'POST',
                 body: JSON.stringify({}),
               });
+
+              const publishCredentials = await deviceFetch(
+                `/streams/${payload.payload.streamSessionId}/publish-credentials`,
+              );
+              log('auto publish credentials', publishCredentials);
             }
 
             if (payload.commandType === 'stop_stream' && payload.payload?.streamSessionId) {
@@ -412,6 +425,16 @@
         }
       });
 
+      $('fetchSubscribeBtn').addEventListener('click', async () => {
+        try {
+          if (!state.lastStreamSessionId) throw new Error('No known stream session');
+          const payload = await deviceFetch(`/streams/${state.lastStreamSessionId}/subscribe-credentials`);
+          log('subscribe credentials', payload);
+        } catch (error) {
+          log('subscribe credentials failed', { error: error.message });
+        }
+      });
+
       $('startMotionBtn').addEventListener('click', async () => {
         try {
           const payload = await deviceFetch('/events/motion/start', {
@@ -442,6 +465,16 @@
         }
       });
 
+      $('fetchPublishBtn').addEventListener('click', async () => {
+        try {
+          if (!state.lastStreamSessionId) throw new Error('No known stream session');
+          const payload = await deviceFetch(`/streams/${state.lastStreamSessionId}/publish-credentials`);
+          log('publish credentials', payload);
+        } catch (error) {
+          log('publish credentials failed', { error: error.message });
+        }
+      });
+
       render();
     </script>
   </body>