Page Hikvision network camera development process (f) -------- Test playing RTMP protocol

1, demo-rtmp.html new document, as follows:

<!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>RTMP播放协议</title>
    <style>
        body{margin:0;}
        #myPlayer{max-width: 1200px;width: 100%;}
    </style>
</head>
<script>
</script>
<body>
<script src="https://open.ys7.com/sdk/js/2.0/ezuikit.js"></script>

<video id="myPlayer" controls playsInline webkit-playsinline autoplay>
    <source src="rtmp://rtmp.open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.hd" type="rtmp/flv" />
</video>

<script>
  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);
   }


</script>
</body>
</html>

2, add the following code PageController.java file:

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

@Controller
public class PageController {

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

}

3. Run the project and test.
In the web browser address bar, enter "localhost: 8080 / rtmp".
Here Insert Picture Description(Note: This project use rtmp protocol method used is not a local file js introduced, this article is to develop tests based on Hikvision network camera development process (five) on.)

Published 44 original articles · won praise 7 · views 5669

Guess you like

Origin blog.csdn.net/GaoXiR/article/details/104376182