Pelco Developer Network (PDN)

How to display live streaming on a HTML5 web? Is there a simple Github sample?

I need to create an HTML5 page which displays the live streaming without the need of the end-users accessing this web page to install anything.
The end users can be a mobile phone (android or ios), or a workstation (linux/windows/macos)
We can make the webserver required to install all the DLL and whatever dependencies, but these shall be transparent to the end client. It is something like Facebook live stream or youtube live stream.

However, upon researching, all the VideoXpert SDK 3.X C# and C++ samples I found in GitHub only provide the sample for windows desktop application as they are dependent on System.Windows.Forms Handle to display the streaming.

Referring to the VideoXpert SDK 3.X C# and C++ samples in
https://github.com/pelcointegrations/VideoXpertSdk-Examples/tree/master/VxSdk.Net-ExampleClient
https://github.com/pelcointegrations/VideoXpertSdk-Examples/tree/master/VideoXpertSdk-ExampleRunner

C#implementation in VxSdkNet-ExampleClient:
public void SetVideoWindow(IntPtr windowHandle); // how to display this on a web page?

C++ implementation in VxSdk-ExampleRunner:
// Create Window
HWND gstWindowHandle = ::CreateWindowA("Gstreamer", "VideoPlayer", WS_VISIBLE, 0, 0, 200, 200, NULL, NULL, NULL, NULL);
SetWindowTextA(gstWindowHandle, _currentlyPlayingCam.c_str());

// Set the window handle to the controller
mediaControl->SetWindow(gstWindowHandle);

Are you able to provide a sample in Github for displaying the live streaming on a web page?
If the web page can be served using Ubuntu server, it is preferable. If using Ubuntu server is not possible, then using windows server is still okay.

Hello Fauzi -

We are no longer widely distributing the Linux-based VX SDK; support for it was extremely limited and it was offered for specific projects.

Please reach out to our Sales and Support teams to discuss your project for any additional support or questions related to the Linux-based VX SDK.

I'll add additional comments to your post for some of your questions, also:

The samples that we have available on the GitHub page for C++ and C# are what is currently available. We didn't have Linux samples that I'm aware of previously. We did have a Linux-based SDK that was available during early release of VX SDK 3.0, however we no longer provide direct links to obtain it. I strongly suggest reaching out to Sales and Support to discuss the specifics of your project.

Otherwise, support using the VX SDK will cover the existing available tools using C++ or C# and the existing available samples. If you want to form a creative solution using the existing available tools - you're definitely welcome to do so.

Hi Chris,

Unfortunately, the creative solution using existing available tools is not available as the logic of your DLL is a blackbox to us.

See below:
C#implementation in VxSdkNet-ExampleClient:
public void SetVideoWindow(IntPtr windowHandle); // how to display this on a web page?

C++ implementation in VxSdk-ExampleRunner:
SetWindowTextA(gstWindowHandle, _currentlyPlayingCam.c_str());

// Set the window handle to the controller
mediaControl->SetWindow(gstWindowHandle);

Regards,
Fauzi

Hello there, thank you for your post.

The VX SDK can't be used directly in this manner, unfortunately. That's why you may need to come up with an alternative solution than using an API on the page; that won't be possible. You could use the VX SDK on a service or as a service to discover and provide the RTSP URL end points for camera streams, then use that information to stream the video to a player on the web page (probably on the same network). Once you use the SDK to get the URL end point, it would be up to you how you want to display it.

The samples that we provide are open source to demonstrate how to use the VX SDK in a typical desktop application. The video rendering parts of the samples make use of GStreamer, which is also open source. You may want to examine the RTSP URL redirect code in the media projects, also.

I'm sorry that I cannot answer your question of "how do I display this on a web page?"... because I don't know. Our SDK and samples are intended for use on Desktop applications. You may want to reach out to Pelco Sales and Support to discuss the specifics of your project, so that they can be aware of what you're attempting to do and for whom. You'll need an SDK license string anyway (if you don't have one already), so if you haven't reached out to them, I'd start there first.

Hi,

Quoted from your answer: "You could use the VX SDK on a service or as a service to discover and provide the RTSP URL endpoints for camera streams, then use that information to stream the video to a player on the web page (probably on the same network). Once you use the SDK to get the URL endpoint, it would be up to you how you want to display it."

My question is: How can I get the URL endpoint using the VxSDK? Can you please advise?

FYI, currently, I'm still liaising with Neo Wey Shyong from your Sales team for this matter, but on a separate track, for technical assistance, I'm still going to follow up with questions on this forum.

Regards,
Fauzi

Hello there, thank you for the follow up.

It's possible to get the RTSP endpoint URL using the VX SDK by getting the DataSource > DataInterface(s) > DataEndpoint. Doing a search for 'rtsp' or 'endpoint' in the VX SDK documentation PDF found this info. Additionally, if you use the C# ExampleClient Sample code, obtaining the Data Sources will obtain this information, which you could then make use of.

Additionally, there is another piece of sample code called RTSP Redirect Example. I would also suggest checking out this sample to learn and understand how to make use of the RTSP URL endpoint and what happens with the redirect that occurs in VideoXpert to get the final actual URL.

Finally, there is additional information about VX SDK specific Use Cases (including how to get the RTSP URL from a data source) on an info page on Git Hub. That use case page is also linked on the VX SDK Downloads page.

I hope that this information helps!

Hi,

I found the RTP endpoint from the C# sample.
However, when I tried to create a C# ASP.NET web project and include the nuget dependency VxSdk.NET by Pelco, even the sample project fail to run with the following message.
I have set the CPU architecture to x64.

Please advise whether the nuget dependency is only for desktop application. And if so, kindly let us know where can we obtain the dependency for ASP.NET application.

Server Error in '/' Application.
Could not load file or assembly 'Itransport2' or one of its dependencies. An attempt was made to load a program with an incorrect format.
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.BadImageFormatException: Could not load file or assembly 'Itransport2' or one of its dependencies. An attempt was made to load a program with an incorrect format.

Source Error:

An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

Assembly Load Trace: The following information can be helpful to determine why the assembly 'Itransport2' could not be loaded.

=== Pre-bind state information ===
LOG: DisplayName = Itransport2
(Partial)
WRN: Partial binding information was supplied for an assembly:
WRN: Assembly Name: Itransport2 | Domain ID: 2
WRN: A partial bind occurs when only part of the assembly display name is provided.
WRN: This might result in the binder loading an incorrect assembly.
WRN: It is recommended to provide a fully specified textual identity for the assembly,
WRN: that consists of the simple name, version, culture, and public key token.
WRN: See whitepaper http://go.microsoft.com/fwlink/?LinkId=109270 for more information and common solutions to this issue.
LOG: Appbase = file:///c:/users/fauzi/documents/visual studio 2015/Projects/Itransport2/Itransport2/
LOG: Initial PrivatePath = c:\users\fauzi\documents\visual studio 2015\Projects\Itransport2\Itransport2\bin
Calling assembly : (Unknown).
===
LOG: This bind starts in default load context.
LOG: Using application configuration file: c:\users\fauzi\documents\visual studio 2015\Projects\Itransport2\Itransport2\web.config

Hello, thank you for your post.

Yes, the VX SDK (both the C++ and C# .NET versions) are intended for use on desktop applications. I did mention that near the end of my post from July 19, just previously earlier:

I'm sorry that I cannot answer your question of "how do I display this on a web page?"... because I don't know. Our SDK and samples are intended for use on Desktop applications. You may want to reach out to Pelco Sales and Support to discuss the specifics of your project, so that they can be aware of what you're attempting to do and for whom. You'll need an SDK license string anyway (if you don't have one already), so if you haven't reached out to them, I'd start there first.

We do not have any other kinds of files, DLLs, ASP.NET versions, or other versions of the VX SDK other than what is provided online currently right now. Those versions are C++ (Media and non-Media DLLs), and C# .NET (Media and non-Media DLLs). If you want to accomplish what you are attempting to do, you will need to come up with a different solution -- one that would use one of these desktop application DLLs. That was why I suggested some application that could run on a PC as a service using the VX SDK, which then your web code could potentially access and query for the variables that it needs. I haven't designed something like that myself, so my best guess is all that I can suggest for you. These are the tools that are available today, and I'm sorry that they aren't specifically precisely what you are looking for.