BullGuard Antivirus Sale - 60% Off with openElement !
Forum Home Forum Home >

openElement

> openElement General Discussion
  New Posts New Posts RSS Feed - Can HTML5 video play video stream? [No]
  FAQ FAQ  Forum Search   Register Register  Login Login

Can HTML5 video play video stream? [No]

 Post Reply Post Reply Page  12>
Author
Message
TC2020 View Drop Down
Groupie
Groupie
Avatar

Joined: Mar 26 2020
Location: Canada
Status: Offline
Points: 61
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Topic: Can HTML5 video play video stream? [No]
    Posted: Dec 19 2023 at 7:46pm
I would like to know whether the HTML5 video container can play live video stream, such as from a network IP video camera. Most cameras provide live stream in rtsp protocol. To receive this video stream, one would specify an URL as below (for this particular Lorex camera):

rtsp://username:password@ip_address:port/cam/realmonitor?channel=1&subtype=1

I have created a test html page with just the HTML5 video container. If I link it to a video file, it can play fine. If I link it to an URL as above, it leads to error below when I publish the page, somehow it adds the URL to the local pathname in "Params". If I ignore and go ahead with publishing, the path is correct in the html page source as you can see below, after this error message:

===============================================================
Message : Illegal characters in path.
LastTrace : openElement.OEIO.FileInfo..ctor(String path, Boolean showError, Boolean logError)
Params : Path:D:/Projects/xxx/xxx/xxx/xxx/rtsp:/admin:testcam1@192.168.0.108:554/cam/realmonitor?channel=1&subtype=1
MethodeName : Void EmulateFileIOPermissionChecks(System.String)
Stamp : 12/19/2023 3:32:15 PM
OSFullName : Microsoft Windows 11 Home
AvailablePhysicalMemory : 5.16 Go
TotalPhysicalMemory : 11.87 Go
AvailableVirtualMemory : 3.05 Go
TotalVirtualMemory : 4 Go
WorkingSet : 268.66 Mo
PagedMemorySize : 265.1 Mo
TotalMemory : 32.2 Mo

ExTrace :
at openElement.OEIO.FileInfo..ctor(String path, Boolean showError, Boolean logError)

OETrace :
at openElement.OEIO.FileInfo..ctor(String path, Boolean showError, Boolean logError)
at openElement.WebSite.Connection.LocalConnection.GetFileLenght(String path)
at openElement.WebSite.WorkingSystem.Working_System.UploadCompleteListRessource(List`1& ressourceList, List`1& folderList, List`1& updateList, LinksMap linkMap, String pathPage, List`1& templateList)
at openElement.WebSite.WorkingSystem.SoloWork.CreateListingCompleteUploadFolder(String folderPath, List`1 updateList, List`1 uploadList, List`1 folderList, LinksMap linksMap, List`1& templateList)
at openElement.WebSite.WorkingSystem.SoloWork._CompleteUpload(ActionArg`1 actionArg)
at openElement.WebSite.WorkingSystem.SoloWork._Lambda$__R3-1(ActionArg a0)
at openElement.Wait.RunFunction[TResult](FuncWait`1 action, ActionArg param, String text1, String text2, WaitIconType iconType)
at openElement.WebSite.WorkingSystem.SoloWork.CompleteUpload(List`1 listPath)
at openElement.WebSite.WorkingSystem.Working_System.CompleteUpload()
at openElement.WebSite.WorkingSystem.SoloWork.CompleteUpload()
at openElement.WebSite.UIAction.Upload.CompleteUpload()
at openElement.WebSite.UIAction.Upload.Upload(Boolean fromCtlSiteMap, String elementToUploadPath)
at openElement.Forms.RibbonCore.RPPage.RPGPublication.BBIPagePublicationFtp_ItemClick(Object sender, ItemClickEventArgs e)
at openElement.My.MyApplication.Main(String[] Args)

==============================================================

Video stream is in mp4 format (can also be set in different formats).

Source code in the page for video is as follows:
When I click on the play button, it says "No video with supported format and MIME type found".

Any help would be greatly appreciated. Thanks.




Edited by Hobby001 - Dec 29 2023 at 12:17am
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6178
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Dec 20 2023 at 12:35pm
Try this one first 

Use VLC media player to display your stream


To be sure about your streaming source


Edited by Hobby001 - Dec 20 2023 at 12:43pm
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6178
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Dec 20 2023 at 12:39pm
If you can display your stream on vlc player, we will work on embedding it on your web page
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6178
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Dec 20 2023 at 12:57pm
Back to Top
TC2020 View Drop Down
Groupie
Groupie
Avatar

Joined: Mar 26 2020
Location: Canada
Status: Offline
Points: 61
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Posted: Dec 26 2023 at 10:25pm
I can confirm that the video stream is good as I can view it on VLC (Media/Open Network Stream.../Network (URL: rtsp://admin:testcam1@192.168.0.108:554/cam/realmonitor?channel=1&subtype=1).

Please note that what I am doing is to test "motion" video viewer on Raspberry 4B running Ubuntu Server 22.04 LTS. It is a bit more involved. Having said that, I replaced HTML5 video element with Image Link element and linked it to the RPi4 IP address and port (like, http://192.168.0.122:8081). The page plays the video correctly after you click on the image. Internally, RPi4/motion reads the rtsp video stream from the camera and feeds it to port 8081. It is set up in motion configuration file.

I am still playing around with this setup but with 4 cameras. At this time, I do not really know which way is better to display video streams from the cameras on this web page created by OpenElement. This web page will be part of a more complex web UI that handles many other functions.


Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6178
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Dec 27 2023 at 2:01pm
Very interesting post.  Thanks for sharing.

If you still need to use a video element I can try to modify this one to allow rtsp 


Running the rtsp within a video tag should add the standard video controls

Let me know if it is worthed



edit: corrected rtps for rtsp 


Edited by Hobby001 - Dec 28 2023 at 10:23am
Back to Top
TC2020 View Drop Down
Groupie
Groupie
Avatar

Joined: Mar 26 2020
Location: Canada
Status: Offline
Points: 61
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Posted: Dec 27 2023 at 4:41pm
I look forward to seeing HTML5 playing rtsp, if you have time to make that change. 

As I reported earlier, OE generates error every time I publish the page with URL included in HTML video element. So far, HTML5 works but only with static video file but I think it is limited to certain file format, like mp4. It does not accept file with mkv extension, and probably more.
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6178
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Dec 28 2023 at 2:20pm
As far as I could find on the net, you cannot play rtsp natively on any browser.


This means that it cannot be done witthout adding plugin.


Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6178
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Dec 28 2023 at 2:29pm
If you want to use vlc to stream the video as shown in the video https://www.youtube.com/watch?v=EbGPN95Vdgo

Try the following code into a visual code block element.  Set the element width and height accordingly.

<video id="newvideo" src="http://192.168.0.122:8081" width="640px" height="480"></video>


Let me know if it works.  




Edited by Hobby001 - Dec 28 2023 at 2:47pm
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6178
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Dec 28 2023 at 5:56pm
I made several tests and it looks like browsers designers denied access to video streaming sources
Back to Top
 Post Reply Post Reply Page  12>
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

This page was generated in 0.078 seconds.