uniApp通过xgplayer(西瓜播放器)接入视频实时监控

 🚀 个人简介：某大型国企资深软件开发工程师，信息系统项目管理师、CSDN优质创作者、阿里云专家博主，华为云云享专家，分享前端后端相关技术与工作常见问题~

💟 作    者：码喽的自我修养🥰
📝 专    栏：uniApp与微信小程序 🎉

🌈 创作不易，如果能帮助到带大家，欢迎 收藏+关注 哦 💕

​ 🌈🌈文章目录

开发背景

开发准备

基础代码

monitor.vue

xgplayer.vue

完成效果图

相关文档

​

开发背景

最近有个需求，需要在app中展示对应站房的实时监控画面，因为uniapp原有的video组件功能比较少就考虑到引入西瓜播放器的视频组件

西瓜播放器 | 快速上手https://v2.h5player.bytedance.com/gettingStarted/

开发准备

因为是直播流就选择了flvjs, 项目安装xgplayer-flv

npm install xgplayer-flv

通过render.js去做视图层，要注意的是nvue无法使用renderjs
详细文档可以自己去uniapp官网查看用法 renderjs | uni-app官网uni-app,uniCloud,serverless,renderjs,使用方式,示例,功能详解,注意事项https://uniapp.dcloud.net.cn/tutorial/renderjs.html

​renderjs 是一个运行在视图层的js。它比WXS更加强大。它只支持app-vue和web。
renderjs 的主要作用有2个：
1. 大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力
2. 在视图层操作dom，运行 for web 的 js库

基础代码

monitor.vue

<!-- monitor.vue -->
<template><view class="uni-padding-wrap monitor_box list_box"><uni-row style="background-color: #fff;" class="list_video_box"><uni-col :span="8" class="list_video_item" v-for="(item,i) in videoLlist" :key="i"><xgplayer :id='`myVideo${i}`' :videoData="item"></xgplayer><text class="text">{{item.mpName}}</text></uni-col></uni-row></view>
</template>
<script>import xgplayer from './xgplayer.vue'export default {components: { xgplayer },data(){return {videoList: [], // 视频列表}}}
</script>

xgplayer.vue

<template><view class="media-box" style="width: 264px;height: 160px;" :start='startUrl' :change:start="xgplayer.startPlay" ><view :id="id" :detail="videoData" :change:detail="xgplayer.initJs"></view></view>
</template><script>// 逻辑层export default {props: ['id', 'videoData'],data(){return {startUrl:1}},methods: {onPlay(){console.log('响应视图层方法')}}}
</script><script module="xgplayer" lang="renderjs">// 视图层import FlvPlayer from 'xgplayer-flv';export default{data(){return {xgPlayer: null}},mounted(){},onunload() {this.xgPlayer.destroy()},methods:{initJs(newVal,old,ownerInstance,instance){if (typeof window.Player === 'function') {this.initPlayer(newVal)} else {// 动态引入较大类库避免影响页面展示const script = document.createElement('script')// view 层的页面运行在根目录script.src = 'static/xgplayer.js'document.head.appendChild(script)script.onload = this.initPlayer.bind(this,newVal,ownerInstance)}},initPlayer(detail,ownerInstance){const _this = this_this.xgPlayer = new FlvPlayer({id: 'myVideo' + detail.index, // 容器IDposter: 'https://xxx/xxx.png', // 封面图不支持本地资源isLive: true, // 是否直播url: detail.videourl + '?url=' + detail.SteamName, // 直播流地址autoplay: false, // 是否自动播放height: 160,width: 264,// 播放错误后的站位图errorTips: `<image src='http://xxx/xxx.png' id='videoErr${detail.index}' style='width: 50%;'><image>`,// 截图screenShot: {saveImg: true,quality: 0.92,type: 'image/png',format: '.png'},ignores: ['time', 'progress', 'replay', 'volume'], // 关闭内置控件closeInactive: true, // 播放器控制栏常驻不隐藏closeVideoClick: true, // video触发click事件后视频切换播放/暂停状态})_this.xgPlayer.once('play',()=>{console.log('播放成功')// 调用逻辑层方法ownerInstance.callMethod('onPlay')})_this.xgPlayer.on('error',(err)=>{console.log('播放出错', err)let videoErr = document.getElementById(`videoErr${detail.index}`)// 重新播放videoErr.onclick = function () {_this.xgPlayer.destroy()_this.initPlayer(detail,ownerInstance)}})_this.xgPlayer.on('screenShot',(DOMString)=>{console.log(DOMString);_this.saveScreenshot(new Date().getTime(), DOMString, 100)})},saveScreenshot(fileName, base64, quality) { // fileName:自定义文件名 ，base64：图片base64码, quality: 图片质量1-100const bitmap = new plus.nativeObj.Bitmap()// 从本地加载Bitmap图片bitmap.loadBase64Data(base64, () => {bitmap.save("_doc/" + fileName + ".jpg", {overwrite: true,quality: quality}, (i) => {// callback(i);console.log("保存图片成功：" + JSON.stringify(i))this.capture(i.target)}, (e) => {console.log("保存图片失败：" + JSON.stringify(e))})}, (e) => {console.log("加载图片失败：" + JSON.stringify(e))})},// 保存视频截图到相册capture(file) {plus.gallery.save(file, () => {console.log("图片已保存到相册")}, (e) => {if (e.code === -3310 || e.code === 8) {console.log("您已禁止访问相册,请设置开启权限")} else {console.log("图片保存失败:" + JSON.stringify(e))}})},// 逻辑层触发视图层函数startPlay(){this.xgPlayer.play()},}}
</script>

完成效果图

相关文档

​​​​​​uniapp官网组件 

https://uniapp.dcloud.net.cn/componenthttps://uniapp.dcloud.net.cn/component/
西瓜播放器配置项 西瓜播放器 | 配置https://v2.h5player.bytedance.com/config/#%E5%BF%85%E9%80%89%E9%85%8D%E7%BD%AE

到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家点点收藏+关注 ~💕  

​ 

   更多专栏订阅推荐：

🥕 JavaScript深入研究

👍 前端工程搭建
💕 vue从基础到起飞

✈️ HTML5与CSS3

🖼️ JavaScript基础

⭐️ uniapp与微信小程序

📝 前端工作常见问题与避坑指南

✍️ GIS地图与大数据可视化

📚 常用组件库与实用工具

💡 java入门到实战