萤石云平台接入_前端接入监控视频
簡介
在可視化平臺的展示中，監控視頻可能是不可或缺的一部分。由于屏幕的尺寸限制，監控視頻在可視化平臺中占比不大，但是對于設計到實物的企業來說，監控視頻在可視化平臺中的展現是必不可少的一部分。
海康威視是國內以視頻為核心的智能物聯網解決方案和大數據服務提供商，大部分企業采買的監控設備都是他們家的。在一些較新的監控設備中，接入方式提供了螢石云平臺接入。
接入指南
首先需要在螢石開放平臺的“我的設備”中開通設備的直播地址，然后點擊直播地址進入詳情。
螢石云對于Web端提供了兩種接入方式：HLS和RTMP。這里推薦使用HLS播放，雖然HLS性能稍差，但是RTMP不是使用瀏覽器的Video進行播放，而是依賴于Flash（Flash將于2020年底停止更新和發行）。
要接入到自己的平臺上都需要使用螢石云官方提供的一個依賴UIKit，下載之后還有一些demo可以運行。
直播地址接入
直播地址的接入非常簡單，只需要幾行代碼：
創建 video 標簽，引入直播地址：
<videoid="myPlayer"autoplaysrc="http://hls.open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.m3u8"controlsplaysinline ></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> <videoid="myPlayer"autoplaysrc=""controlsplaysinline></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' })配置 webpackexternals
在項目中使用如下：
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;以上就可以將螢石云的視頻集成到自己的平臺中了。更多的內容將查看官方文檔。
總結
以上是生活随笔為你收集整理的萤石云平台接入_前端接入监控视频的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： springboot创建parent_S
- 下一篇： 方法 手写promise_高级前端养成3