前端开发视频监控（flv / rtmp 格式）

前端基于html或Vue开发视频监控，目前浏览器不支持rtmp格式，所以要讲rtmp格式修改为flv格式再进行开发

Simplicity438

2769人浏览 · 2022-07-11 09:31:19

Simplicity438 · 2022-07-11 09:31:19 发布

标题前端开发进行视频监控。rtmp格式在2020年底就不再进行支持，所以要让后端将rtmp格式的视频格式转换成flv格式的。

一、基于vue的页面开发：安装flv插件，使用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>

二、基于普通html开发：直接引入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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^