Hikvision network camera development process (e) ------- live test page

1, will be downloaded fluorite js plugins, add to SoringBoot project. Refer to the position shown in the FIG. (Error-prone, when the plug is introduced in js html page, the path error problems) if it is introduced on page js path is not clear, it may refer to the storage path shown in FIG.
Here Insert Picture Description
2, is introduced into the ezuikit.js in demo-live.html. (You can simply copy the following code into the html page you created)

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <title>EZOPEN播放协议</title>
  <style>
    body {
      margin: 0;
    }
    .hint {
      font-size: 14px;
      line-height: 3em;
      color: gray;
    }

    #url {
      width: 100%;
    }

    .btn-container {
      margin: 10px;
    }

    #myPlayer {
      max-width: 600px;
      width: 100%;
    }
  </style>
  <!-- 一定要注意下面两个js插件引入路径是否正确，否则会发生错误 -->
  <script src="../ezuikit.js"></script>
  <script src="../js/jquery.min.js"></script>
</head>

<body>
    <!-- ezopen://open.ys7.com/f01018a141094b7fa138b9d0b856507b[.hd].live.[rtmp|hls|ws|flv|m3u8] http://hls.open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.hd.m3u8-->
    
    <textarea id="url" placeholder="这里输入直播地址">rtmp://rtmp.open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.hd</textarea>
  <div class="btn-container">
    <button id="init">初始化播放</button>
    <button id="stop">结束</button>
  </div>

  <video 
    id="myPlayer"
    autoplay
    src=""
    controls
    playsInline 
    webkit-playsinline
  >
  </video>

  <script>
    $('#init').click(function () {
      var url = $('#url').val().trim();
      $('#myPlayer').attr("src", url);
      var player = new EZUIKit.EZUIPlayer('myPlayer');
      // 日志
      player.on('log', log);

      function log(str) {
        var div = document.createElement('DIV');
        div.innerHTML = (new Date()).Format('yyyy-MM-dd hh:mm:ss.S') + JSON.stringify(str);
        document.body.appendChild(div);
      }
      $("#stop").click(function () {
        player.stop();
      })
    });
  </script>
</body>

</html>

3. Create PageController, add an interface "/ live".

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class PageController {


    @RequestMapping(value = "/live")
    public String live(){
        return "demo-live";
    }

}

4, running SpringBoot project as follows.
Here Insert Picture Description 5, run successfully interface. 6, test development live in the browser interface.
(Page path test is: "localhost: 8080 / Live")
(hereinafter Black Figure, the reason for the local network problem, the problem is not a project)

Handwritten past 98

Published 44 original articles · won praise 7 · views 5677

Private letter concerns

Hikvision network camera development process (e) ------- live test page

Guess you like