locked
how to stream images from cam in asp.net mvc? RRS feed

  • Question

  • User-1134842450 posted

    Hi

    How to stream images from cam in asp.net mvc in a view without reloading the view only refreshing the image tag so it load the new image every millisecond?

    Tuesday, April 21, 2020 11:13 AM

All replies

  • User550915133 posted

    Hi

    How to stream images from cam in asp.net mvc in a view without reloading the view only refreshing the image tag so it load the new image every millisecond?

    What kind of cam and monitor is this? With a refresh rate of 1000 Hz it sounds quite expensive, and I would assume it has some specialized API in this case.

    Tuesday, April 21, 2020 11:56 AM
  • User-1134842450 posted

    Its a normal laptop cam and when i specified millisecond i meant that i want to load images in view the every time image changes i didn't mean that my camera capture images every millisecond i just want a way in C# to view the camera images in the view i want to avoid javascript but if the the javascript is the only way i am open to it

    Tuesday, April 21, 2020 12:04 PM
  • User550915133 posted

    I assume the camera isn't available publicly to the internet, so first you need to figure out how the webserver gets the image from the camera. Is the webserver on the laptop or within your private network? Or in the cloud or elsewhere?

    Tuesday, April 21, 2020 12:23 PM
  • User-1134842450 posted

    The webserver is on my laptop the problem now i only view one image when i refresh the page the image changes i want to view images frequently i want to refresh the img tag frequently how to achieve that in c# code so that the images taken from camera be viewed in the View?

    Tuesday, April 21, 2020 12:29 PM
  • User475983607 posted

    Its a normal laptop cam and when i specified millisecond i meant that i want to load images in view the every time image changes i didn't mean that my camera capture images every millisecond i just want a way in C# to view the camera images in the view i want to avoid javascript but if the the javascript is the only way i am open to it

    Can you clarify the design?  Are you trying to access a single camera on a remote network so you can see what's going on in a specific location?  Are you trying to create a web application that captures images on many different cameras through a browser?

    Tuesday, April 21, 2020 12:31 PM
  • User-1134842450 posted

    I want to access the camera of client to capture some informations and process it on the server i think this will be the next problem but now i have the webserver on my laptop and i can't view the images captured from the cam in webpage this is my problem now.

    Tuesday, April 21, 2020 12:37 PM
  • User475983607 posted

    algebgeo

    I want to access the camera of client to capture some informations and process it on the server i think this will be the next problem but now i have the webserver on my laptop and i can't view the images captured from the cam in webpage this is my problem now.

    The community cannot see your code and cannot provide suggestions.  

    The solution requires JavaScript because JavaScript runs in the client browser and the client has the camera.  The code and camera need to be on the same machine.  HTML 5 complaint browsers makes capturing images fairly simple.  Just do a Google search.

    https://developers.google.com/web/fundamentals/media/capturing-images

    The previous example uses a button click handler.  The click handler can be replaced with a JavaScript timer event.

    Tuesday, April 21, 2020 1:18 PM
  • User-1134842450 posted

    I know that i will use javascript to contact with the client but now my problem is i have stream of buffers that changes frequently how i show that stream of buffers in img html tag

    please forget that there have to be client and server and focus on my main problem that how i show stream of buffers in html img tag i already have the stream of buffers but i am not capable of showing it in the browser frequently thats the problem and there is no code to show i didn't write any code besides the code of obtaining the stream of buffers.

    Tuesday, April 21, 2020 1:27 PM
  • User-474980206 posted

    You need to do a frame grab, at what ever interval you want. Convert the frame grab to image format. The client code code use a timer, then request the frame grab.

    Tuesday, April 21, 2020 2:15 PM
  • User-1134842450 posted
    <img id="image" width="640" height="480" />
    
    @section scripts {
        <script>
            $(document).ready(
                function () {
                    setInterval(() => {
                        $('#image').attr("src", "/Cam/GetFrame")
                    }, 10);
                });
        </script>
    }

    this codes grap the frames frequently but the problem is the image is refreshing not viewed as if it is a video it refreshes as if the page being refreshed frequently.

    Tuesday, April 21, 2020 2:24 PM
  • User475983607 posted

    algebgeo

    I know that i will use javascript to contact with the client but now my problem is i have stream of buffers that changes frequently how i show that stream of buffers in img html tag

    please forget that there have to be client and server and focus on my main problem that how i show stream of buffers in html img tag i already have the stream of buffers but i am not capable of showing it in the browser frequently thats the problem and there is no code to show i didn't write any code besides the code of obtaining the stream of buffers.

    I think you misunderstand how browser based applications work.  The presentation you see in the browser windows is disconnected from the web server.  There are two ways to update the browser window;  make another request which returns new state or write JavaScript to update the DOM. 

    Edit: The timer is set to 10 milliseconds. Is that enough time to render the image?  Secondly, this approach will not work once deployed to a web server.

    Tuesday, April 21, 2020 2:28 PM
  • User-474980206 posted

    the image tag shows an image. You can buffer the images and use a transition effect between. But if you want a video, then use a video stream from the server.

    Tuesday, April 21, 2020 2:35 PM
  • User-1134842450 posted

    i adjusted the value to 50 ms and it somehow worked fine but why it won't work once deployed? i want the client to send some information from the cam something like face recognition do you know a better way to achieve this the process is as follow

    1- there is a DLL in server the client access it, it works the cam of the client and graps the face recognition info from the client to the server

    2- the server process the info graped by the client and save the info in the database

    this processes happens frequently between the client and server do you know how to achieve this.

    Tuesday, April 21, 2020 2:51 PM
  • User-474980206 posted

    if you want to frame grab from the client and send to the server you use the WebRTC api:

       https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos

    Tuesday, April 21, 2020 3:07 PM
  • User-1134842450 posted

    The problem is that the DLL must be used to grap the frame and process it so the client must access the DLL in the server and the DLL must work the Cam it is not just graping the frame and viewing it.

    Tuesday, April 21, 2020 3:15 PM
  • User475983607 posted

    algebgeo

    The problem is that the DLL must be used to grap the frame and process it so the client must access the DLL in the server and the DLL must work the Cam it is not just graping the frame and viewing it.

    I previously asked a question which amounts to.... is the intention to stream a single camera video to many users or stream images from many client camera?  As I understand, the intent is to stream content from many clients.  if my understanding is correct, then you're design will not work unless you craft an application that is installed on all the clients machines that need this feature. 

    Tuesday, April 21, 2020 3:26 PM
  • User-1134842450 posted

    Why the dll will be in the server and the client will have the full access to it as if it in his machine. and what kind of application the client must install.

    Tuesday, April 21, 2020 3:31 PM
  • User475983607 posted

    Why the dll will be in the server and the client will have the full access to it as if it in his machine. 

    Your approach only works if the client and the server are on the same machine.  

    Tuesday, April 21, 2020 3:44 PM
  • User-1134842450 posted

    What should i do if they are not in the same machine. what if they are in the same network?

    Tuesday, April 21, 2020 3:51 PM
  • User-474980206 posted

    What should i do if they are not in the same machine. what if they are in the same network?

    as I suggested you write the frame grab in javascript using the sample code:

     https://developers.google.com/web/fundamentals/media/capturing-images

    the client will need to install the device driver for their computers webcam, if its not built-in. and they will need to use a WebRTC enabled browser.

    Tuesday, April 21, 2020 4:05 PM
  • User475983607 posted

    algebgeo

    What should i do if they are not in the same machine. what if they are in the same network?

    No. Being on the same network does not change the fundamentals.    The code that accesses the camera must be located on the same machine as the camera.  But being on the same network usually means you have control over the machines.  In that regard you can turn the laptops into a server and essentially create IP cameras.  IMHO, it would be cheaper to purchase IP cameras. 

    Again, modern browsers have camera access through JavaScript.  See the links above.

    Tuesday, April 21, 2020 4:07 PM
  • User-1134842450 posted

    I know what are you speaking about and as i said the dll must be used to work the camera and grap the frames from it no other codes but what if the DLL be in the client machine and the web server access the dll in the client with full access to the client machine and work the camera and grap the infos from it? is it possible and if how can i achieve this?

    Tuesday, April 21, 2020 4:13 PM
  • User-474980206 posted

    You would need to create an application that was installed on the client machine as a service. it would do the frame grabs and call the server.

    Tuesday, April 21, 2020 5:37 PM
  • User-1134842450 posted

    Yeah that was the old website we made there was a program the send info to the website but we want to make it without this program and the client use the website only or atmost have the DLL in his machine and the website access this dll we want all things happen on the server.

    Tuesday, April 21, 2020 5:44 PM
  • User-474980206 posted

    windows does not support this feature. the closest it got (which is being deprecated) is remote com+. if the dll had windows RPC support and is installable as a com+ component, then you could do it from the web server (the web server can start a RPC component remotely).

    if the dll has this support, then you need to enable rpc service on the client, and register the dll with com+ on the client machine.

    if the dll does not have this support, then you will need to write an application and install on the client, generally as a service.

    Tuesday, April 21, 2020 6:24 PM
  • User753101303 posted

    Hi,

    Seems you rather want to use a camera from a browser and send that to the server in which case you could rather start with https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

    If this is for authentication you have specialized APIs.

    algebgeo

    we want all things happen on the server


    Not sure what you mean with all but if a web browser is used all the user interaction happens in the browser.

    Edit: be explicit about your use case. I tried recently to help someone but  I believe he never understood that capturing client side images with server side code and a camera attached to his development machine could seem to work but would never work with a real web server). I stopped trying to help as he kept insisting on using server side code and a locally attached camera while still giiving the impression he wanted the image to be captured on the browser client side (but never took care to clarify his EXACT need).

    Tuesday, April 21, 2020 6:44 PM
  • User-1134842450 posted

    1-How to know if the DLL has windows RPC support? unfortunately i don't have contacts with the DLL providers.

    2-How to create a service application in the past i created a normal program that interact with web api does a service application differ from the normal program?

    Tuesday, April 21, 2020 6:55 PM
  • User-1134842450 posted

    The use case is that i have a camera with DLL that DLL have functions that control the camera and take images and do face recognition process all that happen inside the DLL all i want is the client acess the DLL on the server or the server acess the DLL on the client machine the client and the server will have full permission of accessing both resources.

    Tuesday, April 21, 2020 7:01 PM
  • User-474980206 posted

    the api docs would have the RPC support if supported. Its unlikely.

    any command line program can be run as a service (via srvany.exe) or just use the visual studio template.

     

    Tuesday, April 21, 2020 7:19 PM
  • User-1134842450 posted

    Thank you for your support.

    but you think that there is no way of client access DLL on the server or the server access DLL on the client without any services?

    Tuesday, April 21, 2020 7:33 PM
  • User-474980206 posted

    While there are o/s that support this feature, windows is not one of them. If there is a Linux version of the dll, you could install the bash shell support on the client boxes, and using rsh run a python script or similar. You could rsh a tarball that you ran.

    this all seems more complex than writing a program. 

    Wednesday, April 22, 2020 1:49 AM
  • User753101303 posted

    This is not how the web works. A browser have limited and controlled access to client side resources for safety reason (ie basically a browser is a https://en.wikipedia.org/wiki/Sandbox_(computer_security). Usually you access local resources such as a web cam by calloing the browser APIs that is exposing the resource you need. For example https://www.kirupa.com/html5/accessing_your_webcam_in_html5.htm

    If you have control on end user machine you could install a DLL but then you installing a whole app would be likely easier and you'l never have not controlled users doing this and it would be lkikely cumbersome inside a company.

    If this is for web site authentication I would rather investigate https://www.yubico.com/blog/one-step-closer-to-passwordless-login-with-microsoft-edge-support-for-fido2-webauthn/ . My understansding is that this is a browser API which allows authentication through various means (a camera, a fingerprint reader, an access card etc...) withiut having to deal with low level details.

    If inside a company you could use Windows authentication and let the OS authenticate the user usign whatever best fit.

    Wednesday, April 22, 2020 7:15 AM
  • User-1134842450 posted

    so there must be a program that client have to install. Thank you very much for your replies.

    Wednesday, April 22, 2020 9:08 AM
  • User-1134842450 posted

    Can we add the DLL to browser as plugin?

    Wednesday, April 22, 2020 9:16 AM
  • User753101303 posted

    Same. According to https://en.wikipedia.org/wiki/NPAPI most if not all those APIs were phased out for safety reasons.

    For now it seems you have support for https://developer.chrome.com/extensions/nativeMessaging but IMHO it will be just more complex and less convenient to do something that could be done out of the box with any browser by just using the available API.

    The exact need is sitll unclear :
    - at some point you want a video
    - then you talk about facial recognition (seems a single image could be enough)
    - still unclear if related to authentication in which case you have likely better options to unclear.

    I'll stop here on my side.

    Wednesday, April 22, 2020 9:34 AM
  • User-1134842450 posted

    First sorry that i wasn't clear with you.

    Second i was having a problem on streaming the cam images on html page so i wasn't care about face recognition or client and server problem but this problem has been solved so i moved to the next problem which is the client and server communication over DLL.

    It is related to authentication but what other options i have the DLL must be included in this options.

    Wednesday, April 22, 2020 10:01 AM
  • User475983607 posted

    so there must be a program that client have to install. 

    From my perspective you have two choices.  1) Write an custom client application that uses the unknown DLL and has all the features you are looking for.  2) Use the browser and write a JavaScript application that takes advantage of the browser's video/image API.

    Keep in mind, the community has provided these two options several times over your similar threads.  

    Wednesday, April 22, 2020 10:03 AM
  • User-1134842450 posted

    Can we create a program that maps the DLL to the server and the server calls the API of the DLL and the program act as bridge between the client and server but the server who controls the DLL?

    Wednesday, April 22, 2020 11:02 AM
  • User475983607 posted

    Can we create a program that maps the DLL to the server and the server calls the API of the DLL and the program act as bridge between the client and server but the server who controls the DLL?

    Yes.  For the last time.  This is code that you - the programmer - must write and install on all the clients.   The clients and the server can communicate over a standard Socket connection.  It is up to you to come up with a protocol and manage network configuration like DNS or static IPs.    

    Frankly, this topic is out of scope for this forum.

    Wednesday, April 22, 2020 11:30 AM
  • User-1134842450 posted

    Thank you for your replies and support now i know what i have to do you can delete this thread.

    Wednesday, April 22, 2020 11:32 AM