文章目錄

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

---

法一:使用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, // 是否默認開啟聲音 0 - 關閉 1 - 開啟autoplay: true,width: 408,height: 237})},},beforeDestroy() {this.player && this.player.stop() //銷毀并停止直播視頻} } </script>

3.初始化時可傳參數:

參數名類型描述是否必選

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

4.可調用的方法:

方法名類型描述使用示例

play	function	開始播放	player.play()
stop	function	結束播放	player.stop()
openSound	String	開啟聲音	player.openSound()
closeSound	String	關閉聲音	player.closeSound()
startSave	int	開始錄像	player.startSave()
stopSave	int	結束錄像	player.stopSave()
capturePicture	function	視頻截圖	player.capturePicture()
fullScreen	function	全屏	player.fullScreen()
getOSDTime	function	獲取播放時間回調	player.getOSDTime()
startTalk	function	開始對講	player.startTalk()
stopTalk	function	結束對講	player.stopTalk()

5.螢石云:

官網

開發文檔

使用方法

6.最終效果:

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

優點：不需要做控件按鈕功能

適用情況：

1、官網下載js包

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

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

2、（把下載好的ezuikit.js js包）放進vue 的 static 下

這里報錯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,// 頁面跳轉時注意關閉視頻流，vue跳轉原有任務不會停止或者在beforeDestroy銷毀掉}},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('獲取視頻監控攝相機播放地址失敗' + res.data.msg)}})},},beforeDestroy(){this.palyer = null} } </script>

法三:后端只給設備號

相關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: {// 獲取磅點攝像頭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 當前頁數pageSize: "100", // string true 每頁條數}videoCameraId(param).then(res => {if (res.success) {// 根據列表長度獲取播放地址if (res.result.list.length <= 0) {This.$message.error('暫無數據,磅點攝相機列表為空' + res.data.msg)} else {res.result.list.forEach((item, index) => {this.getDeviceInfo(item.id, index, item.deviceNumber, This.accessToken);})}} else {This.$message.error('獲取視頻監控攝相機ID列表失敗' + res.data.msg)}})},// 查詢設備類型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 授權過程獲取的access_token YdeviceSerial: deviceNum, // G66585615 J29276929},"success": function (res) {if (res.code == 200) {if (res.data.model.indexOf('IPC') >= 0) { //攝像機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 { //錄像機this.diveType = 2;let tdS = [];// 獲取設備通道號$.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 授權過程獲取的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 授權過程獲取的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)}})},},//銷毀視頻destroyed() {for (var j = 0; j < this.players.length; j++) {this.players[j].stop();}} } </script>

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。