Code Break: Playback Video from Nx in a Browser-based 3rd Party Interface With Video.js
A common question we get from Developers working with Nx Meta or Nx Witness VMS is how to pull video (live or recorded) from Powered by Nx software and play it in a third party interface.
One of the key values of Powered by Nx video management software is its ability to autodiscover and manage thousands of different IP video devices from hundreds of manufacturers (for a full list of supported devices see https://nxvms.com/ipvd). This one feature makes it easy for companies or organizations to rapidly integrate with 99% of IP cameras on the planet with Nx Meta or Nx Witness VMS acting as the aggregator and recording engine.
While Nx does not have a ready-built video player to use when creating an integration, many 3rd party player frameworks, libraries and tools like Video.js make it relatively simple to pull video from a Powered by Nx software product (like Nx Witness VMS) and display it within a browser environment.
So what is Video.js?
Video.js is an open-source HTML5 video player that includes an API and plugin system for customization to fit a variety of projects.
With frameworks like these, it becomes easier for developers to take on projects like developing a 3rd party client interface with an embedded browser capability or a 3rd party web application with the ability to display video or pieces of video from Nx products.
How to use Video.js as an HTML5 Player with a Powered by Nx software product:
Below is a video tutorial and a very basic example of how to use Video.js to pull video from Nx and play it in a browser environment. Keep in mind the sample code in the video will not work with all 3rd party applications and may require some additional code and programming to be compatible with and suitable for your specific application. That being said, it demonstrates how simple it is to use Video.js to pull video from a Powered by Nx software product and play it in a browser.
Step by Step instructions:
- Download the sample code here.
- Open the file with Chrome.
- Obtain video stream link
- Login to Nx Cloud (https://nxvms.com)
- Choose a System
- Click the View tab
- Click on the target camera
- Copy the CameraID from the URL bar
- Right click on your browser and select Inspect
- In Inspect window select Network
- Search for the CameraID + any qualifiers (e.g. lo, hi, hls, webm)
- Right click on the target URL and select Copy Link Address
- Paste copied video link into field and press the Change Source button
- And voila! That’s it! You’re done with the example!
Still have questions? Want to recommend a different player framework? Check out the Nx Developer Forum for more examples and answers to FAQs and/or to ask any questions that have yet to be answered!
