APP端 uni-app播放rtsp海康监控视频

测试时浏览器看不到效果，虚拟机可以看到

需求

点击组织之后显示组织下的监控列表，点击监控列表里面的摄像头播放视频

效果图

区域组织列表

点击其中一个区域后跳转监控列表

视频播放页面

前端

区域列表页面

<template>
	<view style="padding: 10upx 20upx 0upx 20upx;">
		 <view class="uni-card" v-for="item in list" :key='item.id' @click="showCameraList(item.id)">
			<view class="container">
				<view >
					<view>{{item.name}}</view>
				</view>
			</view>
		</view> 
		<uni-load-more v-if='list != null' :status='loadMoreStatus'></uni-load-more>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
			}
		},
		// 初始化
		onLoad() {
			this.geQy()
		},
		
		methods: {
			geQy(){
				var that = this;
				var paramA = {
					action : 'app/shipinbofang/searchQy',
					actiondesc : '区域查询'
				};
				that.$request
				  .post(paramA.action, paramA)
				  .then(data => {
					if(data.success) {
						this.list = data.list1;
					}
				  })
			},
			showCameraList(id) {
				 uni.navigateTo({
					url: './cameraList?id='+id,
				}) 
			},
		}
	}
</script>
 <style>
	 page {
	 	background-color: #eee;
	 }
	 .container {
	 	display: flex;
	 	flex-direction: row;
	 	align-items: center;
	 	padding: 20upx 20upx 20upx 20upx;
	 }
 </style>

监控列表页面

<template>
	<view style="padding: 10upx 20upx 0upx 20upx;">
		 <view class="uni-card" v-for="item in list" :key='item.id' @click="showCameraList(item)">
			<view class="container">
				<view >
					<view>{{item.name}}</view>
				</view>
			</view>
		</view> 
		<uni-load-more v-if='list != null' :status='loadMoreStatus'></uni-load-more>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				info:{},
				id:'',
				list: [],
			}
		},
		onLoad(option) {
			this.getCam(option.id);
		},
		methods: {
			getCam(id){
				var paramA = {
					action : 'app/shipinbofang/searchCam',
					noid: id,
					actiondesc : '根据区域id查询监控信息'
				};
				this.$request
				  .post(paramA.action, paramA)
				  .then(data => {
					if(data.success) {
						this.list = data.list1;
					} 
				  })
			},
			showCameraList(item){
				let id=item.id
				let name = item.name
				uni.navigateTo({
					url: './preview?id='+id+'&title='+name
				}) 
			}
			
		}
	}
</script>
 <style>
	 page {
	 	background-color: #eee;
	 }
	 .container {
	 	display: flex;
	 	flex-direction: row;
	 	align-items: center;
	 	padding: 20upx 20upx 20upx 20upx;
	 }
 </style>

视频播放页面

<template>
	<view :style="{width: '100%', height: '100%'}" id="view">
		<video id="preview" style=" width: 100%;" autoplay="autoplay" :src="url"></video>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				url:'',
				
			}
		},
		onLoad(option) {
			this.getUrl(option.id);
			uni.setNavigationBarTitle({
				title:option.title
			})
		},
		methods: {
			getUrl(id){
				var paramA = {
					action : 'app/shipinbofang/searchUrl',
					noid: id,
					actiondesc : '根据监控id生成预览url'
				};
				this.$request
				  .post(paramA.action, paramA)
				  .then(data => {
					if(data.success) {
						this.url = data.url;
					}
				  })
			},
		}
	}
</script>

后端

前端调用了3个接口分别是：
searchQy ：查询区域列表
searchCam：查询监控列表
searchUrl ：生成预览URL

/**
	searchQy  ：查询区域列表
*/
	public DefaultReturn searchQy(Map map) throws Exception {
		DefaultReturn ru = this.getReturn(map);//统一返回对象
		//1.获取区域列表
		/分页获取区域信息/
		RegionsRequest regions=new RegionsRequest();
		regions.setPageNo(1);
		regions.setPageSize(25);
		regions.setTreeCode("0");
        String regionsResult = ResourceRegions.regions(regions);
        /处理区域的JSON数据(目的是为了前端好展示)可以再优化/
        JSONObject regionsResultJson = JSON.parseObject(regionsResult);
        String data = regionsResultJson.get("data").toString();
        JSONObject dataJson = JSON.parseObject(data);
        String listString = dataJson.get("list").toString();
        /处理完区域的JSON数据后的数据,存放的是区域信息的list/
        JSONArray list = JSON.parseArray(listString );
		ru.setList1(list);
		return returnNormal(ru, true);
	}
	
/**
	searchCam：查询监控列表
*/
public DefaultReturn searchCam(Map map) throws Exception {
		DefaultReturn ru = this.getReturn(map);//统一返回对象
		CamerasRequest request=new CamerasRequest();
        request.setPageNo(1);
        request.setPageSize(8);
        request.setTreeCode("0");
        request.setRegionIndexCode((String)map.get("noid"));
        String result = RegionIndexCodeCameras.cameras(request);
        JSONObject jsonObject = JSON.parseObject(result);
        String object = jsonObject.get("data").toString();
        JSONObject jsonObject1 = JSON.parseObject(object);
        String string =jsonObject1.get("list").toString();
         /处理完摄像头的JSON数据后的数据,存放的是摄像头信息的list//
        JSONArray parseArray = JSON.parseArray(string);
		ru.setList1(parseArray );
		return returnNormal(ru, true);
	}
	/**
		searchUrl ：生成预览URL
	*/
		public DefaultReturn searchUrl(Map map) throws Exception {
		DefaultReturn ru = this.getReturn(map);//统一返回对象
		PreviewURLsRequest request=new PreviewURLsRequest();
        request.setCameraIndexCode((String)map.get("noid"));
       //request.setCameraIndexCode("bd5b7e5223c84e38951f0c517d3bedd1");
        request.setStreamType(0);
        request.setProtocol("rtsp");
        request.setTransmode(0);
        request.setExpand("transcode=0");
		String result = CamerasPreviewURLs.previewURLs(request);
		JSONObject jsonObject = JSON.parseObject(result);
        String object = jsonObject.get("data").toString();
        JSONObject jsonObject1 = JSON.parseObject(object);
        String url =jsonObject1.get("url").toString();
		ru.setUrl(url);
		return returnNormal(ru, true);
	}

获取区域信息、获取监控信息和生产预览url的方法都在这里