TuBaoSoft-AP/pages/home/ceshi.vue

<template>
	<!-- <view></view> -->
	<!-- <view :style="{width: '100%', height: '100%'}" id="view">
		<video id="preview" style=" width: 100%;" autoplay="autoplay" :src="url"></video>
	</view> -->
	<view>
		<iframe :src="url" width="100%" height="400" style="background-color: #000000;" id="cameraTest" allowfullscreen />
		<view style="width: 100%;text-align: center;">
			<h1>仓库门口</h1>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				url: '',
				access_token: ''
			}
		},
		onLoad(option) {
			// this.url = ""
			uni.request({
				url: 'https://open.hikyun.com/artemis/oauth/token/v2',
				method: 'POST',
				data: {
					accessKey: "16365122785078383",
					secretKey: "ctZiCTxLpKLdSKjjKkWa",
					productCode: "1636609606025604",
					projectId: "1321376925660208"
				},
				success: (res) => {
					this.access_token = res.data.data.access_token
					uni.request({
						url: 'https://open.hikyun.com/artemis/api/eits/v1/global/live/video/preview',
						method: 'POST',
						header: {
							"access_token": res.data.data.access_token,
						},
						data: {
							"toolBar": 0,
							"deviceSerial": "G26011245",
							"channelNo": 1,
							"videoLevel": 1,
							"audio": 1,
							"autoPlay": 1,
							"projectId": 1321376925660208
						},
						success: (res) => {
							console.log(res)
							this.url = res.data.data.previewUrl
						}
					});
				}
			});
			// this.url = 'rtmp://ns8.indexforce.com/home/mystream'
			// 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>


<!-- <template>
		<view>
			<view class="content">
			    <image class="logo" src="/static/logo.png"></image>
			    <view class="text-area">
			        <button type="default" @click="hkPreview">实时视频预览</button>
			        <button type="default" @click="hkFullPreview">直接全屏预览</button>
			    </view>
			</view>
		</view>
</template>

```javascript

<script>
    //导入本地插件
    const hk = uni.requireNativePlugin('hk-preview');
    export default {
        data() {
            return {
				src:'rtmp://ns8.indexforce.com/home/mystream',
                title: 'Hello',
				url:'rtmp://live.hkstv.hk.lxdns.com/live/hks1'
            }
        },
        onLoad() {

        },
		created() {
			
		},
        methods: {
            hkPreview() {
                //有云台设备，显示操作云台菜单
                //ip地址，用户名，密码，端口号，通道号
                hk.startActivity("http://zijun.qdcandor.com","admin","Zhongdian12#$","80","1")
            },
            hkFullPreview() {
                //无云台设备直接全屏播放
                //ip地址，用户名，密码，端口号，通道号
                hk.startFullActivity("http://zijun.qdcandor.com","admin","Zhongdian12#$","7101","1")
            }
        }
    }
</script> -->