Extra documentation about pause and play

[russellevans]

This is fantastic and solves something I have been trying to do for months.
I have only been writing code for a few months so sorry for the basic questions

Could you provide extra example about about how to pause and play.
Firstly is this done client side or server side?

I doubt you folks have time but below is more details in case you can help.

I can send Fetch from Client side to Server to start the stream.
Below is my code that does not work to try and top the steam.

app.get("/start-stream", (req,res) => {
  console.log("Start Stream")
  stream = new Stream({
    name: 'Garage',//name that can be used in future  
    url: 'rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4',  //Stream URL
    wsPort: 7070,  //Streaming will be transferred via this port
    options: { // ffmpeg options 
      '-stats': '', // print progress report during encoding, can be no value ''
      '-r': 30 // frame rate (Hz value, fraction or abbreviation) - By default it set to 30 if no value specified
    }
  })


  res.json({
    message: "Started Stream",
  });

})

app.get('/stop-stream',(req,res) =>{
  console.log("Stop stream")
  stream.stop();	

  return res.json({
    message:'Stopped'
  })
})

Here is the Client side code

import { useState, useEffect } from "react";
import { Link } from 'react-router-dom';
import Header from '../../Components/Header';
import Footer from '../../Components/Footer';
import JSMpeg from '@cycjimmy/jsmpeg-player';
import './home.css'




const Home = () => {

  
  let player;
  
  useEffect(() => {
    let isMounted = true;
    const controller = new AbortController();
    
    player = new JSMpeg.Player('ws://localhost:7070', {canvas: document.getElementById('stream0') // stream should be a canvas DOM element
    ,width:720,hight:480})
    
    
    return () => {
      isMounted = false;
      controller.abort();
    }
    
  }, [])
  
  const handlePause = async (e) => {
    console.log("stop")
    fetch('http://localhost:4000/stop-stream?port=7070')
    .then((responseJson) => {
      // Do something with the response
    })
    .catch((error) => {
      console.log(error)
    });
  
  };

  const handleStart = async (e) => {
    console.log("stop")
    fetch('http://localhost:4000/start-stream?port=7070&url=rtsp://admin:[email protected]:554/Streaming/Channels/102/&key=Garage')
    .then((responseJson) => {
      // Do something with the response
    })
    .catch((error) => {
      console.log(error)
    });
  
  };

  return (
    
    <div className="App-header">
      <Header />
      <div>
      <canvas  id="stream0" width={720} height={460}></canvas>  
      <button onClick={handlePause}>Stop</button>
      <button onClick={handleStart}>Start</button>

      </div>
      <Footer />
    </div>
  )
  
}

export default Home;