前端接入萤石云视频在可视化平台的展示中，监控视频可能是不可或缺的一部分。由于屏幕的尺寸限制，监控视频在可视化平台中占比不

简介

在可视化平台的展示中，监控视频可能是不可或缺的一部分。由于屏幕的尺寸限制，监控视频在可视化平台中占比不大，但是对于设计到实物的企业来说，监控视频在可视化平台中的展现是必不可少的一部分。

海康威视是国内以视频为核心的智能物联网解决方案和大数据服务提供商，大部分企业采买的监控设备都是他们家的。在一些较新的监控设备中，接入方式提供了萤石云平台接入。

接入指南

首先需要在萤石开放平台的“我的设备”中开通设备的直播地址，然后点击直播地址进入详情。

萤石云对于Web端提供了两种接入方式：HLS和RTMP。这里推荐使用HLS播放，虽然HLS性能稍差，但是RTMP不是使用浏览器的Video进行播放，而是依赖于Flash（Flash将于2020年底停止更新和发行）。

要接入到自己的平台上都需要使用萤石云官方提供的一个依赖UIKit，下载之后还有一些demo可以运行。

直播地址接入

直播地址的接入非常简单，只需要几行代码：

创建 `video` 标签，引入直播地址

<video
  id="myPlayer"
  autoplay
  src="http://hls.open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.m3u8"
  controls
  playsinline
></video>

引入 `ezuikit.js` 文件

<script src="../ezuikit.js"></script>

初始化播放器

const player = new EZUIKit.EZUIPlayer('myPlayer')

完整代码如下：

<!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>
    <script src="../ezuikit.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-->
    <div class="hint">
      demo页面仅为代码示例无法直接运行，需要部署到服务器上才可以播放。另外监控模式与多窗口模式对浏览器版本有要求：Chrome:
      55+ Firefox: V55+。
    </div>
    <textarea id="url" placeholder="这里输入直播地址">
http://hls.open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.m3u8
      </textarea>
    <div class="btn-container">
      <button id="init">初始化播放</button>
      <button id="stop">结束</button>
    </div>  
    <video
      id="myPlayer"
      autoplay
      src=""
      controls
      playsinline
    ></video>
    <script>
      const init = document.querySelector('#init')
      const url = document.querySelector('#url')
      const myPlayer = document.querySelector('#myPlayer')
      const stop = document.querySelector('#stop')
      init.addEventListener('click', () => {
        let urlAdress = url.value.trim()
        myPlayer.setAttribute('src', urlAdress)
        const 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.addEventListener('click', () => {
          player.stop()
        })
      })
    </script>
  </body>
</html>

监控地址接入

对于监控地址的接入稍微要复杂一点，需要借助于 webpack 配置 externals ,下面是我在 React 项目中的配置：

首先将下载的 UIKit 解压，然后将解压文件夹中的 ezuikit.js 文件📃以及 js 文件夹📂拷贝至项目文件的 public 目录下，然后在 index.html 文件中导入 ezuikit.js

<script src="../ezuikit.js"></script>

配置 webpack

因为项目中使用了 antd ，所以采用了 react-app-rewired ＋ customize-cra 的方式来配置 webpack ，其他方式配置相同，下面是我的配置文件：

const {
  override,
  fixBabelImports,
  addLessLoader,
  addWebpackPlugin,
  addWebpackExternals,
} = require('customize-cra');
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { '@primary-color': '#f9c700' },
  }),
  addWebpackPlugin(new AntdDayjsWebpackPlugin()),
  addWebpackExternals({ ezuikit: 'EZUIKit' })
);

关键代码如下:

addWebpackExternals({ ezuikit: 'EZUIKit' })

在项目中使用如下：

import React, { Component } from 'react';
import Ezuikit from 'ezuikit';

class Video extends Component {
  componentDidMount() {
    new Ezuikit.EZUIPlayer({
      accessToken: '',
      url: '',
      id: 'myPlayer',
      autoplay: true,
      decoderPath: '.',
      width: 600,
      height: 400,
    });
  }
  render() {
    return (
      <div>
        <div id='myPlayer'></div>
      </div>
    );
  }
}

export default Video;

以上就可以将萤石云的视频集成到自己的平台中了。更多的内容将查看官方文档。

前端接入萤石云视频

简介