当前位置：首页 > news >正文

uniapp远程摄像头流界面上显示

news 2025/8/10 15:53:14

用到的插件：dplayer、hls
dplayer官网：dplayer
dplayer官网npm安装的是最新版本（1.27.1），真机运行异常了，可以安装历史版本 dplayer历史版本
远程摄像头视频流格式：m3u8
可以用来测试的视频流（有的用不了，多试几个，找可以用的）：m3u8测试视频

安装hls，任选其一
npm安装
下载hls文件

安装dplayer
使用 npm:

npm install dplayer --save

使用 Yarn:

yarn add dplayer

代码示例

<template><view class="containerLayout"><div id="dplayer"></div></view>
</template><script>
//先加载hls插件、再加载dplayer插件;
import '/pages/utils/hls.js'
import Dplayer from 'dplayer'export default {data() {return {videoSrc: 'http://220.161.87.62:8800/hls/0/index.m3u8',dp: null,}},onLaunch() {console.log('onLaunch')},onReady() {},mounted() {//data里的远程摄像头地址const vs = this.videoSrcthis.dp = new Dplayer({container: document.getElementById('dplayer'),autoplay: true, //是否自动播放loop: true,//视频是否循环播放lang: 'zh-cn',live: true,screenshot: false,//是否开启截图hotkey: true,//是否开启热键preload: 'auto',//视频是否预加载volume: 0.7,//默认音量mutex: true,//阻止多个播放器同时播放，当前播放器播放时暂停其他播放器video: {url: vs, //视频地址type: 'customHls',customType: {customHls: function(video, player) {const hls = new Hls()  //实例化Hls  解析m3u8hls.loadSource(video.src)hls.attachMedia(video)}},},});this.dp.on('canplay', function() {console.log('视频正常播放')});this.dp.on('error', function() {console.log('视频播放异常')});},onLoad() {},onShow() {},methods: {playvideo(vs){},//----------------------------}}
</script>
<style>.containerLayout{margin: 0;padding: 0;border: 0;width: 100vw;height: 100vh;display: flex;flex-direction: column;z-index: 100;}
</style>