You are using an unsupported browser. Please update your browser to the latest version on or before July 31, 2020.
close

Viewing DW Spectrum Video on a Browser-based Interface with Video.js

https://hf-files-oregon.s3-us-west-2.amazonaws.com/hdpdigitalwatchdog_kb_attachments/2019/09-24/4763eb2b-7c2d-49d6-bfc0-47620cc0f150/image.png

Viewing DW Spectrum® Video on a Browser-based Interface with Video.js

-----------------------------------

Affected Roles:  Administrator, Owner

Related Digital Watchdog VMS Apps:  DW Spectrum® IPVMS

Last Edit:  September 9, 2021

-----------------------------------

What is Video.js?

Customers will often ask how to play video footage from without having to utilize the DW Spectrum® software.  While it would be easier to install and view video streams through the DW Spectrum Client interface or use the DW Spectrum Web Portal, it is possible to view video through a web browser.  This method is ideal when having to share video stream access to a user that does not have access to the DW Spectrum system.

Video.js is an open-source HTML5 video player that can be customized for 3rd-party use, such as for web applications and embedded browsers, in with the ability to display video from DW Spectrum systems.

This article will outline how to obtain the video stream information and apply the camera information to utilize the Video.js open-source HTML5 video player.

**NOTE:  This tool may be used to view LIVE footage only.  Archived footage will need to be viewed through the DW Spectrum IPVMS software or web portal.  For viewing an .MKV video file that was exported from a DW Spectrum system to an external storage device, you will need to utilize either the DW Spectrum Client software or a media player that supports .MKV file format (ex. VLC Media Player).

Setting Up Video.js to View DW Spectrum® Video Streams

To use Video.js to view DW Spectrum video:

  1. Download the sample Video.js code file to your computer.

  1. Next, use a web browser to connect with the DW Spectrum Server web client of the target camera’s host server.
  • For systems connected to DW Cloud – connect and access your server through the DW Spectrum Web Portal
  • For systems not connected to the DW Cloud network, you can enter the local IP address of the DW Spectrum Server in the URL bar to connect locally with the server or you can enter “127.0.0.1:7001” into a web browser at the device itself.

Click the “Login” button and enter your DW Cloud login or DW Spectrum login credentials (for non-cloud systems).

  1. Once you have logged into the web portal, the DW Spectrum Systems that are accessible with your provided login credential will display. Select your target server.

  1. After selecting the server, click on the “View” tab.

All cameras connected to the DW Spectrum Server will display, similar to the Resource Tree in the DW Spectrum Client. 

Select your target camera and begin to view the live video.

  1. While viewing the target camera, right-click in the browser and select “Inspect” from the pop-up menu.

**NOTE:  If you are having trouble with prompting the pop-up menu, try clicking in the empty area of the menus bar (View, Settings, Information) at the top of the web page.

  1. The HTML inspection window will display.  Click on the “Network’ tab.

In the URL bar of the web browser, the video stream information (system ID and CameraID) will display.  Copy the CameraID that shows at the end of the URL.

Paste the CameraID into the “Filter” box of the HTML inspection window’s network tab.  You may also include any qualifiers (e.g. lo, hi, hls, webm) in the search box as wewll.

  1. The filtered results related to your target camera will display. 

To obtain the required URL for the Video.js web player, right-click on a URL that displays in the filtered list, then select “Copy” > “Copy link address”.

This URL link will be used with the Video.js player.

  1. Now that you have the required URL information for the video stream, locate the Video.js file that was obtained in Step 1.  Unless otherwise specified, this will likely appear in your Downloads folder.

Right-click on the file and select “Open with”. 

From the pop-up, select your preferred web browser.  In this example, Google Chrome will be used.

  1. A Video.js embedded video browser will display.

Paste the URL that was obtained from the HTML inspection window in Step 7 into the embedded video browser’s address bar, then click the “Change Source” button.

Camera video will now stream from the DW Spectrum Server to the embedded video browser.  You may view one stream per video browser window.

  • 774
  • 11-Sep-2021
  • 1952 Views