JavaScript Can not figure out how streaming works

[noweare]

I am trying to figure out how the browser code is controlling the streaming of images from my server .
I am fairly new to web technologies, markup languages and javascript.

I am streaming images from a camera to a browser. To start the stream the user presses a button which executes javascript code
that populates an image elements source attribute. ie "192.168.1.23:81/stream" The streaming consists of sending data
frame by frame to the browser until steaming is stopped by the user by toggling the stream button.

The camera is made up of a microcontroller board with a camera attached and functions as the server.
The server is configured to continuously send a frame of image data to the browser until the stop button is activated on the browser.

There are other buttons and checkboxes on the browser to control things on the server but those things use a fetch command to
communicate with the server. The streaming does not use "fetch" to communicate with the server. It seems the stream starts
or stops when the src attribute is populated (start) or empty ("")(stopped).

So I am wondering how streaming actually works.

Only the stream uses port 81 everything else uses port 80.


Here are some code snippets

HTML Code

<div id="stream-container" class="image-container">
    <img id="stream" src="" crossorigin>
</div>

Javascript Code

var baseHost = document.location.origin          //location origin
var streamUrl = baseHost + ':81'                       //for inside the lan only
        
const stopStream = () => {
    window.stop();                                                             //stops images from loading
    streamButton.innerHTML = 'Start Stream';      //changes text on stream button
}

const startStream = () => {
    view.src = `${streamUrl}/stream`;                      //assigns uri the source of the image frames
    streamButton.innerHTML = 'Stop Stream';             //change text on stream btn
}

//triggers streaming on server
streamButton.onclick = () => {
    const streamEnabled = streamButton.innerHTML === 'Stop Stream'   //change text on stream btn
    if (streamEnabled) {       
        stopStream();
    } else
        startStream();
}

 

[cbreemer]

Ok, thanks. I have no trouble understanding the way it works, but was just wondering abut the physical details. Knowing these now, it does not seem that an ESP32 board can help me improve the handling of the files on my Samsung smartphone, alas. I'll have to think of some other avenue.

Now I'm back to my 'graphics project' that you like. The handling of collision whilst drawing/moving/resizing an element proves to be a bit tricky ( I want the elements never to overlap). I'll update the codepen once I have that sorted out.

 

[noweare]

About your photos. Can you synch them to the cloud then get a script to download them to a directory on your pc ?

 

[cbreemer]

About your photos. Can you synch them to the cloud then get a script to download them to a directory on your pc ?

That is not a bad idea actually, thanks. I have always resisted cloud backup because I don't want to pay for extra cloud storage (the default storage for e.g. free OneDrive is grossly insufficient). On the other hand that cost is not staggering and having automatic cloud backup would have several advantages.

I wonder if I can create a scheduled task on my PC that connects to the phone by Bluetooth and pulls in new files on a regular basis. Need to do some research here.

 

[noweare]

In my case i have an iphone. I can synch my photos to icloud. I found some code on github that will download pics from icloud. So i can automate that to do it periodically. Probably not a easy as that .... but should be doable.

 

[cbreemer]

In my case i have an iphone. I can synch my photos to icloud. I found some code on github that will download pics from icloud. So i can automate that to do it periodically. Probably not a easy as that .... but should be doable.

I don't think iCloud comes for free with the amount of stuff I have 🙄 But Ill keep cloud backup in mind as an option, thanks for the tip.
Best close this thread now, I think. If one of my replies helped you out, please mark that as the solution.