文章目錄

• • • • 法一:使用ezuikit-js插件(accessToken+url)
      • • • 1. 安裝
          • 2. 使用:
          • 3.初始化時(shí)可傳參數(shù):
          • 4.可調(diào)用的方法:
          • 5.螢石云:
          • 6.最終效果:
      • 法二:使用ezuikit.js文件(鏈接)
      • • • 1、[官網(wǎng)下載js包](https://open.ys7.com/mobile/download.html)
          • 2、（把下載好的ezuikit.js js包）放進(jìn)vue 的 static 下
          • 3、public在index.html引入
          • 4、使用:
      • 法三:后端只給設(shè)備號(hào)

---

法一:使用ezuikit-js插件(accessToken+url)

適用情況：

1. 安裝

npm install ezuikit-js --save

2. 使用:

<template><div id="video-container"></div> </template><script> import EZUIKit from 'ezuikit-js'; export default {name: '',data() {return {player:null,}},created(){this.getVideoData()},methods:{getVideoData(){....this.player = new EZUIKit.EZUIKitPlayer({id: 'video-container', // 視頻容器IDaccessToken: 'at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz',url: 'ezopen://open.ys7.com/203751922/1.live',audio: 0, // 是否默認(rèn)開(kāi)啟聲音 0 - 關(guān)閉 1 - 開(kāi)啟autoplay: true,width: 408,height: 237})},},beforeDestroy() {this.player && this.player.stop() //銷(xiāo)毀并停止直播視頻} } </script>

3.初始化時(shí)可傳參數(shù):

參數(shù)名類(lèi)型描述是否必選

id	String	播放器容器DOM的id	Y
accessToken	String	授權(quán)過(guò)程獲取的access_token	Y
url	String	視頻ezopen協(xié)議播放地址	Y
audio	int	是否默認(rèn)開(kāi)啟聲音 1：打開(kāi)（默認(rèn)） 0：關(guān)閉	N
width	int	視頻寬度，默認(rèn)值為容器容器DOM寬度	N
height	int	視頻高度，默認(rèn)值為容器容器DOM高度	N
templete	string	播放器模板，可以通過(guò)選定模板，使用內(nèi)置的播放器樣式，組件 simple：極簡(jiǎn)版;standard：標(biāo)準(zhǔn)版;security：安防版(預(yù)覽回放);vioce：語(yǔ)音版	N
header	Array	視頻頭部可選UI組件，可選值：capturePicture：截圖,save：錄像保存,zoom：電子放大	N
footer	Array	視頻底部部可選UI組件，可選值：talk：對(duì)講,broadcast：語(yǔ)音播報(bào),hd：高清標(biāo)清切換,fullScreen：全屏	N
plugin	Array	按需加載插件，可選值： talk：對(duì)講	N
handleSuccess	function	播放成功回調(diào)	N
handleError	function	播放錯(cuò)誤回調(diào)	N
openSoundCallBack	function	開(kāi)啟聲音回調(diào)	N
closeSoundCallBack	function	關(guān)閉回調(diào)	N
startSaveCallBack	function	開(kāi)始錄像回調(diào)	N
stopSaveCallBack	function	結(jié)束錄像回調(diào)	N
capturePictureCallBack	function	截圖回調(diào)	N
fullScreenCallBack	function	全屏回調(diào)	N
getOSDTimeCallBack	function	獲取OSD時(shí)間回調(diào)	N

4.可調(diào)用的方法:

方法名類(lèi)型描述使用示例

play	function	開(kāi)始播放	player.play()
stop	function	結(jié)束播放	player.stop()
openSound	String	開(kāi)啟聲音	player.openSound()
closeSound	String	關(guān)閉聲音	player.closeSound()
startSave	int	開(kāi)始錄像	player.startSave()
stopSave	int	結(jié)束錄像	player.stopSave()
capturePicture	function	視頻截圖	player.capturePicture()
fullScreen	function	全屏	player.fullScreen()
getOSDTime	function	獲取播放時(shí)間回調(diào)	player.getOSDTime()
startTalk	function	開(kāi)始對(duì)講	player.startTalk()
stopTalk	function	結(jié)束對(duì)講	player.stopTalk()

5.螢石云:

官網(wǎng)

開(kāi)發(fā)文檔

使用方法

6.最終效果:

法二:使用ezuikit.js文件(鏈接)

優(yōu)點(diǎn)：不需要做控件按鈕功能

適用情況：

1、官網(wǎng)下載js包

https://open.ys7.com/mobile/download.html

資源地址:https://download.csdn.net/download/weixin_53791978/86512096

2、（把下載好的ezuikit.js js包）放進(jìn)vue 的 static 下

這里報(bào)錯(cuò)ezuikit is not undefined,就放到public下

3、public在index.html引入

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

4、使用:

<video id="videoCamera"style="object-fit: fill; width: 100%; height: 100%; background: #000;":src="formData.videoCamera" autoplay="true" controls playsInline webkit-playsinline> </video> //記得給寬高<script> export default{data(){return{formData:{},palyer:null,// 頁(yè)面跳轉(zhuǎn)時(shí)注意關(guān)閉視頻流，vue跳轉(zhuǎn)原有任務(wù)不會(huì)停止或者在beforeDestroy銷(xiāo)毀掉}},mounted(){},methods:{//獲取播放地址getVideoCameraAddr(id, index) {const This = thislet param = {id: id}videoCameraAddr(param).then(res => {if (res.data.code == 0) {This.formData.videoCamera = res.data.dataThis.palyer = nullsetTimeout(function () {This.player = new EZUIKit.EZUIPlayer('videoCamera')}, 0)} else {This.$message.error('獲取視頻監(jiān)控?cái)z相機(jī)播放地址失敗' + res.data.msg)}})},},beforeDestroy(){this.palyer = null} } </script>

法三:后端只給設(shè)備號(hào)

相關(guān)JS文件：https://download.csdn.net/download/weixin_53791978/87231692

<section class="sectionVideo"><div class="video_warp_item" v-for="(item, index) in liveAddress" :key="index"><video :id=item.tdh :src="item.url" autoplay muted controls playsInline webkit-playsinline></video></div> </section> <script> import { videoCameraId } from '@/api/manage/videoAPI.js' import $ from 'jquery' // npm i jqueryexport default {name: 'dashboard',data() {return {accessToken: '',liveAddress: [],diveType: '',players: [],}},methods: {// 獲取磅點(diǎn)攝像頭ID列表getbagndianID() {const This = this// 獲取螢石云的accessToken$.ajax({"url": 'https://open.ys7.com/api/lapp/token/get',"type": 'POST',"dataType": "json","data": {appKey: '412f919adde14fe3af396d5bef2c6db1', //String appKey YappSecret: '7566546bfc7adc4f55b86af93703599c' // String appSecret Y},"cache": false,"success": function (response) {This.accessToken = response.data.accessToken;}})let param = {deptId: This.formData.deptId,stationId: This.formData.stationId,pageNum: "1", // string true 當(dāng)前頁(yè)數(shù)pageSize: "100", // string true 每頁(yè)條數(shù)}videoCameraId(param).then(res => {if (res.success) {// 根據(jù)列表長(zhǎng)度獲取播放地址if (res.result.list.length <= 0) {This.$message.error('暫無(wú)數(shù)據(jù),磅點(diǎn)攝相機(jī)列表為空' + res.data.msg)} else {res.result.list.forEach((item, index) => {this.getDeviceInfo(item.id, index, item.deviceNumber, This.accessToken);})}} else {This.$message.error('獲取視頻監(jiān)控?cái)z相機(jī)ID列表失敗' + res.data.msg)}})},// 查詢(xún)?cè)O(shè)備類(lèi)型getDeviceInfo(id, indexer, deviceNum, accessToken) {const that = this$.ajax({"url": 'https://open.ys7.com/api/lapp/device/info',"header": {'Content-Type': 'application/x-www-form-urlencoded'},"type": 'POST',"dataType": "json","data": {accessToken: accessToken, // String 授權(quán)過(guò)程獲取的access_token YdeviceSerial: deviceNum, // G66585615 J29276929},"success": function (res) {if (res.code == 200) {if (res.data.model.indexOf('IPC') >= 0) { //攝像機(jī)this.diveType = 1;that.liveAddress = []this.getUrl(accessToken, deviceNum, 1);setTimeout(() => {if (that.liveAddress.length > 0) {that.players = [];that.liveAddress.forEach((item, i) => {let player = new EZUIKit.EZUIPlayer(item.tdh)that.players.push(player);})}}, 500)} else { //錄像機(jī)this.diveType = 2;let tdS = [];// 獲取設(shè)備通道號(hào)$.ajax({"url": 'https://open.ys7.com/api/lapp/device/camera/list',"header": {'Content-Type': 'application/x-www-form-urlencoded' //multipart/form-data text/plain},"type": 'POST',"dataType": "json","data": {accessToken: accessToken, // String 授權(quán)過(guò)程獲取的access_token YdeviceSerial: deviceNum},"success": function (response) {response.data.forEach((item) => {if (item.status == 1) { tdS.push(item) }})that.liveAddress = []tdS.forEach((item) => {that.getUrl(accessToken, deviceNum, item.channelNo);})setTimeout(() => {if (that.liveAddress.length > 0) {that.players = [];that.liveAddress.forEach((item, i) => {let player = new EZUIKit.EZUIPlayer(item.tdh)that.players.push(player);})}}, 500)}})}}},});},// 獲取視頻播放地址getUrl(accessToken, id, typeId) {const that = this$.ajax({"url": 'https://open.ys7.com/api/lapp/v2/live/address/get',"type": 'POST',"data": {accessToken: accessToken, // String 授權(quán)過(guò)程獲取的access_token YdeviceSerial: id,protocol: 2,channelNo: typeId,},"dataType": "json","success": function (res) {let item = {tdh: 'm' + res.data.id,url: res.data.url}that.liveAddress.push(item)}})},},//銷(xiāo)毀視頻destroyed() {for (var j = 0; j < this.players.length; j++) {this.players[j].stop();}} } </script>

總結(jié)

以上是生活随笔為你收集整理的vue中实现视频直播（萤石云）/实时视频:的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。