plan

  1. The original design in the VUE page to open the popup display, can not display;
  2. Change to a separate page to get the video address play;

To solve

  1. Install and download VLC, currently using Windows 32-bit version;
  2. The front-end code
<! -- * @description: RTSP video processing * @author: Bruce * @Date: 2021-07-19 09:55:26 * @lasteditTime: 2021-07-19 16:30:51 * @LastEditors: bruce * @Reference: --> <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, < span style=" max-width: 100%; clear: both; height: 100vh;" > <object type="application/x-vlc-plugin" events="false" width="100%" height="100%" > <param id="videoValue" name="mrl" /> <param name="volume" value="50" /> <param name="autoplay" value="true" /> <param name="loop" value="false" /> <param name="fullscreen" value="false" /> <param name="controls" value="false" /> </object> <script> function getQueryString(name) { let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); let r = window.location.search.substr(1).match(reg); if (r ! = null) { return decodeURIComponent(r[2]); }; return null; } let videoValue = document.getElementById('videoValue'); videoValue.setAttribute('value',getQueryString('videoUrl')) let titleDom = document.getElementById('title') titleDom.innerText = getQueryString('deviceName') </script> </html>Copy the code

There is a problem

  1. Google Chrome does not support VLC, using 360 browser speed mode open;
  2. VLC version uses Windows 32-bit;
  3. There is delay in the video