萤石云平台接入_前端接入监控视频
簡(jiǎn)介
在可視化平臺(tái)的展示中，監(jiān)控視頻可能是不可或缺的一部分。由于屏幕的尺寸限制，監(jiān)控視頻在可視化平臺(tái)中占比不大，但是對(duì)于設(shè)計(jì)到實(shí)物的企業(yè)來(lái)說(shuō)，監(jiān)控視頻在可視化平臺(tái)中的展現(xiàn)是必不可少的一部分。
海康威視是國(guó)內(nèi)以視頻為核心的智能物聯(lián)網(wǎng)解決方案和大數(shù)據(jù)服務(wù)提供商，大部分企業(yè)采買(mǎi)的監(jiān)控設(shè)備都是他們家的。在一些較新的監(jiān)控設(shè)備中，接入方式提供了螢石云平臺(tái)接入。
接入指南
首先需要在螢石開(kāi)放平臺(tái)的“我的設(shè)備”中開(kāi)通設(shè)備的直播地址，然后點(diǎn)擊直播地址進(jìn)入詳情。
螢石云對(duì)于Web端提供了兩種接入方式：HLS和RTMP。這里推薦使用HLS播放，雖然HLS性能稍差，但是RTMP不是使用瀏覽器的Video進(jìn)行播放，而是依賴(lài)于Flash（Flash將于2020年底停止更新和發(fā)行）。
要接入到自己的平臺(tái)上都需要使用螢石云官方提供的一個(gè)依賴(lài)UIKit，下載之后還有一些demo可以運(yùn)行。
直播地址接入
直播地址的接入非常簡(jiǎn)單，只需要幾行代碼：
創(chuàng)建 video 標(biāo)簽，引入直播地址：
<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播放協(xié)議</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頁(yè)面僅為代碼示例無(wú)法直接運(yùn)行，需要部署到服務(wù)器上才可以播放。另外監(jiān)控模式與多窗口模式對(duì)瀏覽器版本有要求：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">結(jié)束</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>監(jiān)控地址接入?
對(duì)于監(jiān)控地址的接入稍微要復(fù)雜一點(diǎn)，需要借助于 webpack 配置 externals ,下面是我在 React 項(xiàng)目中的配置：
首先將下載的 UIKit 解壓，然后將解壓文件夾中的 ezuikit.js 文件 以及 js 文件夾 拷貝至項(xiàng)目文件的 public 目錄下，然后在 index.html 文件中導(dǎo)入 ezuikit.js
<script src="../ezuikit.js"></script>配置 webpack
因?yàn)轫?xiàng)目中使用了 antd ，所以采用了 react-app-rewired ＋ customize-cra 的方式來(lái)配置 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' }) );關(guān)鍵代碼如下:
addWebpackExternals({ ezuikit: 'EZUIKit' })配置 webpackexternals
在項(xiàng)目中使用如下：
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;以上就可以將螢石云的視頻集成到自己的平臺(tái)中了。更多的內(nèi)容將查看官方文檔。
總結(jié)
以上是生活随笔為你收集整理的萤石云平台接入_前端接入监控视频的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： springboot创建parent_S
- 下一篇： 方法 手写promise_高级前端养成3