Front-end development video surveillance (flv / rtmp format)

Title front-end development for video surveillance. The rtmp format will no longer be supported at the end of 2020, so the backend needs to convert the video format in rtmp format to flv format.

1. Vue-based page development: install the flv plug-in and import it using import

npm install --save flv.js

<template>
  <div id="welcome_page">
    <el-row>
      <el-col :span="12">
        <div class="mainContainer">
          <video id="videoElement1" class="centeredVideo" controls autoplay width="90%" height="576">Your browser is too old which doesn't support HTML5 video.</video>
        </div>
        <br>
        <div class="controls">
            <!--<button onclick="flv_load()">加载</button>-->
            <button onclick="flv_start()">开始</button>
            <button onclick="flv_pause()">暂停</button>
            <button onclick="flv_destroy()">停止</button>
            <input style="width:100px" type="text" name="seekpoint" />
            <button onclick="flv_seekto()">跳转</button>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="mainContainer">
          <video id="videoElement2" class="centeredVideo" controls autoplay width="90%" height="576">Your browser is too old which doesn't support HTML5 video.</video>
        </div>
        <br>
        <div class="controls">
            <!--<button onclick="flv_load()">加载</button>-->
            <button onclick="flv_start()">开始</button>
            <button onclick="flv_pause()">暂停</button>
            <button onclick="flv_destroy()">停止</button>
            <input style="width:100px" type="text" name="seekpoint" />
            <button onclick="flv_seekto()">跳转</button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import flvjs from "flv.js";

export default ({
    
    
  name: 'Welcome',

  mounted () {
    
    
    var videoElement1 = document.getElementById('videoElement1');
    var videoElement2 = document.getElementById('videoElement2');
    if (flvjs.isSupported()) {
    
    
      var flvPlayer = flvjs.createPlayer({
    
    
          type: 'flv',
          url: 'http://39.101.176.23/live?port=54321&app=myapp&stream=video_test'
      });
      flvPlayer.attachMediaElement(videoElement1);
      flvPlayer.load();
    }
    if (flvjs.isSupported()) {
    
    
      var flvPlayer = flvjs.createPlayer({
    
    
          type: 'flv',
          url: 'http://39.101.176.23/live?port=54321&app=myapp&stream=video_test'
      });
      flvPlayer.attachMediaElement(videoElement2);
      flvPlayer.load();
    }

    function flv_start() {
    
    
      player.play();
    }
  },

})
</script>

<style scoped>
</style>

2. Development based on ordinary html: direct introduction of flv

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>flv.js demo</title>
    <style>
        .mainContainer {
      
      
            display: block;
            width: 1024px;
            margin-left: auto;
            margin-right: auto;
        }

        .urlInput {
      
      
            display: block;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            margin-top: 8px;
            margin-bottom: 8px;
        }

        .centeredVideo {
      
      
            display: block;
            width: 100%;
            height: 576px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: auto;
        }

        .controls {
      
      
            display: block;
            width: 100%;
            text-align: left;
            margin-left: auto;
            margin-right: auto;
        }
</style>
</head>

<body>
    <div class="mainContainer">
        <video id="videoElement" class="centeredVideo" controls autoplay width="1024" height="576">Your browser is too old which doesn't support HTML5 video.</video>
    </div>
    <br>
    <div class="controls">
        <!--<button οnclick="flv_load()">加载</button>-->
        <button onclick="flv_start()">开始</button>
        <button onclick="flv_pause()">暂停</button>
        <button onclick="flv_destroy()">停止</button>
        <input style="width:100px" type="text" name="seekpoint" />
        <button onclick="flv_seekto()">跳转</button>
    </div>
    <script src="flv.min.js"></script>    
    <script>
        var player = document.getElementById('videoElement');
        if (flvjs.isSupported()) {
      
      
            var flvPlayer = flvjs.createPlayer({
      
      
                type: 'flv',
                url: 'http://39.101.176.23/live?port=54321&app=myapp&stream=video_test'
            });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load(); //加载
        }

        function flv_start() {
      
      
            player.play();
        }

        function flv_pause() {
      
      
            player.pause();
        }

        function flv_destroy() {
      
      
            player.pause();
            player.unload();
            player.detachMediaElement();
            player.destroy();
            player = null;
        }

        function flv_seekto() {
      
      
            player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);
        }
    </script>
</body>

</html>

Front-end development video surveillance (flv / rtmp format)

Title front-end development for video surveillance. The rtmp format will no longer be supported at the end of 2020, so the backend needs to convert the video format in rtmp format to flv format.

1. Vue-based page development: install the flv plug-in and import it using import

2. Development based on ordinary html: direct introduction of flv

Guess you like