新增ios软解demo

screenH5/homeNew.html

@@ -197,7 +197,7 @@
 			}
 			.thl-time{
 				    text-align: left;
-				    margin-left: -0.4rem !important;c
+				    margin-left: -0.4rem !important;
 			}
     </style>
 	</head>
@@ -228,7 +228,7 @@
 
 			<div class="swiper-container">
 				<div class="swiper-wrapper">
-					<div class="swiper-slide"  v-for="(item,index) in homeList" :key="item.id" :class="[index==0 ? 'swiper-slide-active' : '' , index==1 ? 'swiper-slide-next' : '']">
+					<div class="swiper-slide" v-for="(item,index) in homeList" :key="item.id" :class="[index==0 ? 'swiper-slide-active' : '' , index==1 ? 'swiper-slide-next' : '']">
 						<div class="canvas" style="z-index: 1;" @click="homeinfo(item)">
 							<div style="height: 100%;" class="wine" :id="'wine'+index">
 							</div>
@@ -342,14 +342,14 @@
 				},
 				mounted() {
 					// //初始化一下就可以了，
-								 let vConsole = new VConsole();
+					let vConsole = new VConsole();
 					//			 //你打印的数据 比如
-								 console.log('test');
+					console.log('test');
 					//就可像小程序一样的看了和调试了。
 					this.$nextTick(function() {
 						this.gethomeList();
 					});
-					var that=this;
+					var that = this;
 					var swiper = new Swiper('.swiper-container', {
 						observer: true, //修改swiper自己或子元素时，自动初始化swiper 
 						observeParents: true, //修改swiper的父元素时，自动初始化swiper
@@ -419,7 +419,7 @@
 						var tmiss = ''
 						//计算出相差天数
 						var days = Math.floor(date3 / (24 * 3600 * 1000))
-                        // console.log(days + "天");
+						// console.log(days + "天");
 						//计算出小时数
 
 						var leave1 = date3 % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
@@ -458,17 +458,17 @@
 
 					},
 					getSwiperInfo(data) {
-						console.log("方向=======",data, $('.swiper-slide-active').index());
+						console.log("方向=======", data, $('.swiper-slide-active').index());
 						// return
 						if (data == "next") {
 							var activeIndex = $('.swiper-slide-active').index() + 1;
 						} else if (data == "prev") {
 							var activeIndex = $('.swiper-slide-active').index() - 1;
 
-						}else if (data == "prevSlide") {
+						} else if (data == "prevSlide") {
 							var activeIndex = $('.swiper-slide-active').index();
 
-						}else if (data == "nextSlide") {
+						} else if (data == "nextSlide") {
 							var activeIndex = $('.swiper-slide-active').index();
 
 						}
@@ -520,7 +520,7 @@
 						// var strhost = "ws://192.168.11.66:9101";
 						// var strhost = "ws://" + that.urlData.exIp + ":" + that.urlData.exPort
 						// var strhost="wss://www.ted2018.com:9101";
-						 var strhost="wss://test.androidscloud.com:9105";
+						var strhost = "wss://test.androidscloud.com:9105";
 						// var strhost="wss://test.androidscloud.com/videoWebSocket?clientType=1&cardIp=14.215.128.96&port=2005&sn=RK3930C2301900005";
 						var client = new WebSocket(strhost);
 						console.log('wsssss==============', client)
@@ -683,7 +683,7 @@
 										// var strhost = "ws://192.168.11.66:9101";
 										// var strhost="wss://192.168.11.242:9104";
 										// var strhost="wss://www.ted2018.com:9101";
-										var strhost="wss://test.androidscloud.com:9105";
+										var strhost = "wss://test.androidscloud.com:9105";
 										// var strhost="wss://test.androidscloud.com/videoWebSocket?clientType=1&cardIp=14.215.128.96&port=2005&sn=RK3930C2301900005";
 										// var strhost="ws://192.168.11.242:9101";
 										// var strhost="ws://"+that.urlData.exIp+":"+that.urlData.exPort

screenIos/build-4.1.1.sh

@@ -0,0 +1,21 @@
+echo "Beginning Build:"
+rm -r dist
+mkdir -p dist
+cd ffmpeg-4.1.1
+echo "emconfigure"
+CPPFLAGS="-D_POSIX_C_SOURCE=200112 -D_XOPEN_SOURCE=600" \
+emconfigure ./configure --cc="emcc" \
+--prefix=$(pwd)/dist --enable-cross-compile --target-os=none --arch=x86_64 \
+--cpu=generic --disable-ffplay --disable-ffprobe --disable-ffserver \
+--disable-asm --disable-doc --disable-devices --disable-pthreads \
+--disable-w32threads --disable-network --disable-hwaccels \
+--disable-parsers --disable-bsfs --disable-debug --disable-protocols \
+--disable-indevs --disable-outdevs --enable-protocol=file
+if [ -f "Makefile" ]; then
+  echo "make clean"
+  make clean
+fi
+echo "make"
+make
+echo "make install"
+make install

screenIos/build_decoder.sh

@@ -0,0 +1,18 @@
+echo "Beginning Build:"
+rm -r dist
+mkdir -p dist
+cd ffmpeg-4.2.2
+echo "emconfigure"
+emconfigure ./configure --cc="emcc" --cxx="em++" --ar="emar" --ranlib="emranlib" --prefix=$(pwd)/dist --enable-cross-compile --target-os=none \
+        --arch=x86_32 --cpu=generic --enable-gpl --enable-version3 --disable-avdevice --disable-swresample --disable-postproc --disable-avfilter \
+        --disable-programs --disable-logging --disable-everything --enable-avformat --enable-decoder=hevc --enable-decoder=h264 --enable-decoder=aac \
+        --disable-ffplay --disable-ffprobe --disable-ffserver --disable-asm --disable-doc --disable-devices --disable-network --disable-hwaccels \
+        --disable-parsers --disable-pthreads --disable-w32threads --disable-bsfs --disable-debug --enable-protocol=file --enable-demuxer=mov --enable-demuxer=flv --disable-indevs --disable-outdevs
+if [ -f "Makefile" ]; then
+  echo "make clean"
+  make clean
+fi
+echo "make"
+make
+echo "make install"
+make install

screenIos/buildffmpegWasm.sh

@@ -0,0 +1,25 @@
+export TOTAL_MEMORY=104857600
+export EXPORTED_FUNCTIONS="[ \
+    '_openDecoder', \
+    '_feedData', \
+    '_closeDecoder', \
+    '_malloc',\
+    '_free',\
+    '_main'
+]"
+#-lavcodec -lavformat -lavutil -lswresample -lswscale \
+
+echo "运行 Emscripten..."
+emcc  -I "./include" \
+-O3 \
+-s WASM=1 \
+-lavcodec -lavformat -lavutil  -lswscale \
+-s TOTAL_MEMORY=${TOTAL_MEMORY} \
+-L ./lib \
+-s ASSERTIONS=1 \
+-s EXPORTED_FUNCTIONS="${EXPORTED_FUNCTIONS}" \
+ffmpegTest.c \
+-s RESERVED_FUNCTION_POINTERS=14 \
+-s ALLOW_MEMORY_GROWTH=1 \
+-o ffmpeghelper.js 
+echo "编译完成！"

screenIos/css/homePage.css

@@ -0,0 +1,134 @@
+* {
+	margin: 0;
+	padding: 0;
+}
+
+.heads {
+	padding: 40px 30px 0px 30px;
+	overflow: hidden;
+}
+
+.heads-left {
+	color: #3399FF;
+}
+
+.heads-right {
+	width: 60px;
+	height: 60px;
+}
+
+.heads-right image {
+	width: 100%;
+	height: 100%;
+}
+
+.left {
+	float: left;
+}
+
+.right {
+	float: right;
+}
+
+#wine {
+	width: 100%;
+	height: 100%;
+}
+
+.newhelp {
+	display: flex;
+	font-size: 12px;
+	font-family: PingFangSC-Regular, PingFang SC;
+	font-weight: 400;
+	color: #999999;
+	line-height: 17px;
+	align-items: center;
+	position: absolute;
+	top: 0;
+	left: 0;
+	margin-top: 10px;
+	margin-left: 15px;
+}
+
+.newhelp .font {
+	text-decoration: underline;
+	margin-left: 2px;
+}
+
+.newhelp .helpImg {
+	width: 0.875rem;
+	height: 0.875rem;
+}
+
+.newhelp .helpImg img {
+	width: 100%;
+	height: 100%;
+}
+
+.buyIcon {
+	position: absolute;
+	top: 0;
+	right: 0;
+	/* 	margin-top: 0.625rem;
+	margin-right: 0.625rem;
+	 */
+}
+
+.swiper-container {
+	width: 100%;
+	height: 100%;
+}
+
+.swiper-slide {
+	/* padding: 43px 53px; */
+	padding: 12% 14%;
+	box-sizing: border-box;
+	text-align: center;
+	font-size: 18px;
+	/* background: #fff; */
+	/* height: 667px; */
+	height: 100%;
+	/* Center slide text vertically */
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: -webkit-flex;
+	display: flex;
+	-webkit-box-pack: center;
+	-ms-flex-pack: center;
+	-webkit-justify-content: center;
+	justify-content: center;
+	-webkit-box-align: center;
+	-ms-flex-align: center;
+	-webkit-align-items: center;
+	align-items: center;
+}
+
+.swiper-button-next {
+	width: 15px;
+	height: 15px;
+	background: url(../../static/img/xia_icon.png);
+	right: 15px;
+}
+
+.swiper-button-prev {
+	width: 15px;
+	height: 15px;
+	background: url(../../static/img/shang_icon.png);
+	left: 15px;
+}
+
+.swiper-button-next:after,
+.swiper-container-rtl .swiper-button-prev:after {
+	content: "" !important;
+}
+
+.swiper-button-prev:after,
+.swiper-container-rtl .swiper-button-next:after {
+	content: "" !important;
+}
+
+.thl-time {
+	text-align: left;
+	margin-left: -0.4rem !important;
+	c
+}

screenIos/decoder.js

@@ -0,0 +1,141 @@
+var isFinish = false;
+var decodeCount = 0;
+var h264Queue = [];
+var isFirst = true;
+
+self.Module = 
+{
+    onRuntimeInitialized: function () 
+	{
+		isFinish = true;
+        var ret = Module._openDecoder(720, 1280);
+		if(!ret)
+		{
+			console.log("打开编码器成功");
+		}
+    }
+};
+
+self.importScripts("ffmpeghelper.js");
+
+self.addEventListener('message', function (e) 
+{
+   h264Queue.push(e.data);
+}, false);
+
+function PrintfLog(str)
+{
+	var curTime = new Date().getTime();	
+	var objData = {cmd:0, data:str, time:curTime};
+	self.postMessage(objData);
+}
+
+function decodeAAC(data)
+{
+		var retPtr = Module._malloc(4 * 5 * 1024);//接收的数据
+		var inputPtr = Module._malloc(4 * data.length);//输入数据
+			
+		for( i =0;i < data.length;i++)
+		{
+			Module.HEAPU8[(inputPtr)+i] = data[i];//转换为堆数据
+		}
+			
+		var pcmLen = Module._feedData(retPtr, inputPtr, data.length);
+			
+		if(pcmLen > 0)
+		{
+			var pcmData = new Uint8Array(pcmLen);		
+			for(i = 0;i < pcmLen;i++)
+			{
+				pcmData[i] = Module.HEAPU8[(retPtr)+i]
+			}
+				
+				player.feed(pcmData);
+			}
+			else
+			{
+				console.log("%d帧 aac 解码失败, %d", decodeCount, pcmLen);
+			}
+			
+			decodeCount++;
+			Module._free(inputPtr);
+			Module._free(retPtr);
+}
+
+setInterval(
+	function()
+	{
+		if(h264Queue.length > 0 && isFinish)
+		{
+			if(isFirst)
+			{
+				PrintfLog("当前队列大小 :"  + h264Queue.length);
+				isFirst = false;
+			}
+							
+			if(h264Queue.length > 10 && isFinish)
+			{
+				PrintfLog("解不过来 " + h264Queue.length);
+				//h264Queue.length = 0;
+				return;
+			}
+			
+			decodeH264(h264Queue.shift());
+		}
+		else
+		{
+			
+		}
+	}
+,1);
+
+
+function decodeH264(data)
+{
+	var retPtr = Module._malloc(2457600);//接收的数据
+	var inputPtr = Module._malloc(data.length);//输入数据
+			
+	for( i =0;i < data.length;i++)
+	{
+		Module.HEAPU8[(inputPtr)+i] = data[i];//转换为堆数据
+	}
+			
+	var time = new Date().getTime();
+	var ret = Module._feedData(inputPtr, data.length, retPtr);
+			
+	if(ret >= 0)
+	{
+		//console.log("解码成功 %d, 耗时 %d ms", ret, new Date().getTime() - time);	
+		if(decodeCount > 50)
+		{		
+			var curCost = new Date().getTime() - time;
+			PrintfLog("解码耗时 " + curCost + " ms");
+			decodeCount = 0;
+		}
+		decodeCount++;
+		//console.log("解码耗时 %d ms", curCost);
+	}
+	else
+	{
+		//console.log("解码失败 %d", ret);
+	}
+			
+	var yuvData = new Uint8Array(2457600);
+	for(i = 0;i < yuvData.length;i++)
+	{
+		yuvData[i] = Module.HEAPU8[(retPtr)+i];
+	}
+			
+	var curTime = new Date().getTime();	
+	var objData = {cmd:1, data:yuvData, time:curTime};
+	self.postMessage(objData);
+	//webglPlayer.renderFrame(yuvData, 720, 1280, 720*1280, (720/2)*(1280/2));
+	Module._free(inputPtr);
+	Module._free(retPtr);
+}
+		
+
+function closeDecoder()
+{
+	Module._destroyDecoder();
+}

screenIos/ffmpegTest.c

@@ -0,0 +1,136 @@
+#include <stdio.h>
+#include <unistd.h>
+#include "libavformat/avformat.h"
+#include "libswscale/swscale.h"
+#include "libavutil/imgutils.h"
+//#include "libswresample/swresample.h"
+#include "libavcodec/avcodec.h"
+#include "libavutil/time.h"
+
+int rgbSize = 0;
+typedef unsigned char byte;
+uint8_t *out_buffer = NULL;
+AVCodec *videoCodec = NULL;
+AVFrame *frame = NULL;
+AVFrame *yuvFrame = NULL;
+AVCodecContext *videoCodecCtx = NULL;
+struct SwsContext*	m_img_convert_ctx = NULL;
+
+void ffmpegLog()
+{
+	
+}
+
+//打开解码器
+int openDecoder(int width, int height)
+{
+	int ret;
+	int errorCode = 0;
+	uint8_t *out_buffer = NULL;
+	
+	videoCodec = avcodec_find_decoder(AV_CODEC_ID_H264);
+	videoCodecCtx = avcodec_alloc_context3(videoCodec);
+
+	frame = av_frame_alloc();
+	yuvFrame = av_frame_alloc();
+
+	if ((errorCode = avcodec_open2(videoCodecCtx, videoCodec, NULL)) < 0)
+	{
+		return errorCode;
+	}
+
+	videoCodecCtx->width = width;
+	videoCodecCtx->height = height;
+	videoCodecCtx->pix_fmt = AV_PIX_FMT_YUV420P;
+
+	rgbSize = videoCodecCtx->width * videoCodecCtx->height * 3 / 2;
+	out_buffer = (unsigned char *)av_malloc(rgbSize);
+	av_image_fill_arrays(yuvFrame->data, yuvFrame->linesize, out_buffer, AV_PIX_FMT_YUV420P, videoCodecCtx->width, videoCodecCtx->height, 1);
+
+	m_img_convert_ctx = sws_getContext(videoCodecCtx->width, videoCodecCtx->height,
+			videoCodecCtx->pix_fmt, videoCodecCtx->width, videoCodecCtx->height,
+			AV_PIX_FMT_YUV420P, SWS_BICUBIC, NULL, NULL, NULL);
+			
+	printf("c 端已经打开编码器， 哈哈\n");
+	return 0;
+}
+
+void PrintArry(byte*data, size_t size)
+{
+	printf("打印数组:");
+	for(size_t i = 0;i < size;i++)
+	{
+	  printf("%02X", data[i]);
+	}	
+	printf("\n");
+}
+
+int feedData(byte*data, size_t size, byte* outBuffer)
+{
+	int ret = -1;
+	int len = videoCodecCtx->width*videoCodecCtx->height;
+	AVPacket *videoPacket = av_packet_alloc();	
+	av_new_packet(videoPacket, size);
+	//printf("准备拷贝\n");
+	memcpy(videoPacket->data, data, size);
+	//printf("准备解码\n");
+	
+	uint64_t start = av_gettime();
+	avcodec_send_packet(videoCodecCtx, videoPacket);
+	ret = avcodec_receive_frame(videoCodecCtx, frame);
+	//PrintArry(data, size);
+	uint64_t cost = av_gettime() - start/1000;
+	printf("解码耗时 %d ms", cost);
+	
+	if(ret == 0)
+	{
+		ret = sws_scale(m_img_convert_ctx, (const uint8_t* const*)frame->data, frame->linesize, 0, videoCodecCtx->height, yuvFrame->data, yuvFrame->linesize);		
+		byte *p= outBuffer;
+		memcpy(p, yuvFrame->data[0], len);	
+		p = p + len;
+		memcpy(p, yuvFrame->data[1], len / 4);
+		p = p + len / 4;
+		memcpy(p, yuvFrame->data[2], len / 4);		
+	}
+	
+	if(ret < 0)
+	{
+		char temp[4096];
+		av_strerror(ret, temp, 4096);
+	//	printf("错误打印 %s \n", temp);
+	}
+	
+	av_packet_free(&videoPacket);
+	return ret;
+}
+
+//关闭解码器
+void closeDecoder()
+{
+	if(out_buffer)
+	{
+		free(out_buffer);
+	}
+	
+	av_frame_unref(frame);
+	av_frame_unref(yuvFrame);
+	av_frame_free(&frame);
+	av_frame_free(&yuvFrame);
+	
+	if (m_img_convert_ctx)
+	{
+		sws_freeContext(m_img_convert_ctx);
+	}
+	
+	if (videoCodecCtx)
+	{
+		avcodec_free_context(&videoCodecCtx);
+	}
+}
+
+
+int main(int argc, char**argv)
+{	
+	//openDecoder(720, 1280);
+	return 0;
+}

screenIos/homePage.html

@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
+		<title>首页</title>
+		<link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css" />
+		<link rel="stylesheet" type="text/css" href="css/homePage.css" />
+		<script src="css/swiper-bundle.min.js"></script>
+	</head>
+	<body style="background: #F8F9FA;overflow:scroll;overflow-y: hidden;overflow-x: hidden;">
+		<div style="width: 100%;height: 100%;" id="homeapp">
+			<div class="newhelp" style="z-index: 50;">
+				<div class="helpImg">
+					<img src="../static/img/bangzu_icon.png" />
+				</div>
+				<div class="font helpfont">使用帮助？</div>
+			</div>
+			<div class="buyIcon" style="z-index: 50;">
+				<img src="../static/img/goumai_icon.png" />
+			</div>
+			
+			<div class="swiper-container">
+				<div class="swiper-wrapper">
+					<div class="swiper-slide"  v-for="(item,index) in homeList" :key="item.id" :class="[index==0 ? 'swiper-slide-active' : '' , index==1 ? 'swiper-slide-next' : '']">
+						<div class="canvas" style="z-index: 1;" @click="homeinfo(item)">
+							<div style="height: 100%;" class="wine" :id="'wine'+index">
+							</div>
+							<canvas id="playCanvas" width="450" height="800"></canvas>
+							<div class="camvas-head" style="z-index: 5555;">
+								<div class="tophead">
+									<div class="th_left">
+										<!-- {{item.buyVipType}} -->
+										<img src="../static/img/xingyao_icon.png" v-if="item.buyVipType='SVIP'" />
+										<img src="../static/img/xingdong_icon.png" v-else />
+									</div>
+									<div class="th_right">
+										<div class="thl-font">{{item.diskName}}</div>
+										<div class="thl-time">{{remainTime(item.ctime,item.exceptTime)}}</div>
+									</div>
+								</div>
+								<div class="th_renew homeRenew" style="z-index: 5000;" @click="renew(item)">
+									续费
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="swiper-slide">
+						<div class="canvas" style="display: none;">
+							<div style="height: 100%;" class="kongWine">
+								<div class="kphone">
+									<div class="kp_img">
+										<img src="../static/img/goumai_pic.png" />
+									</div>
+									<div class="kp_btn" style="z-index: 5000;">
+										购买云手机
+									</div>
+								</div>
+							</div>
+			
+						</div>
+					</div>
+				</div>
+				<!-- Add Arrows -->
+				<div class="swiper-button-next" @click="swiperNext()"></div>
+				<div class="swiper-button-prev" @click="swiperPrev()"></div>
+			</div>
+		</div>
+	</body>
+	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
+	<!--  视频-->
+	<script src="../static/js/jquery-1.11.0.min.js"></script>
+	<script type="text/javascript" src="../static/js/Decoder.js"></script>
+	<script type="text/javascript" src="../static/js/YUVCanvas.js"></script>
+	<script type="text/javascript" src="../static/js/Player.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+	<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
+	<script>
+		var html = document.querySelector("html");
+		var clientWidth = html.getBoundingClientRect().width;
+		html.style.fontSize = clientWidth / 23.4375 + "px";
+
+		var app = new Vue({
+			el: '#homeapp',
+			data: {
+				message: 'Hello Vue!',
+				homeList: [],
+				urlData: {},
+				rbdData: {},
+				activeIndexData: "",
+				swipeDirection: "",
+			},
+			mounted() {
+				
+			},methods:{
+				
+			}
+		})
+	</script>
+</html>

screenIos/index.html

@@ -0,0 +1,109 @@
+<html>
+	<head>
+		<link rel="shortcut icon" href="#">
+	</head>
+	<!-- <canvas id="playCanvas" width="450" height="800"></canvas> -->
+	<body oncontextmenu="Back()">
+		<canvas id="playCanvas" width="450" height="800"></canvas>
+	</body>
+	<script type="text/javascript" src="helper.js">
+		< script type = "text/javascript"
+		src = "pcm-player.js" >
+	</script>
+	<script type="text/javascript" src="webgl.js"></script>
+	<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
+
+
+	<script>
+		var decodeWoker = new Worker('decoder.js');
+		var myVideo = document.getElementById("playCanvas");
+		decodeWoker.onmessage = function(event) {
+			console.log("decodeWoker.onmessage")
+			var objData = event.data;
+
+			switch (objData.cmd) {
+				case 0:
+					console.log(objData.data);
+					break;
+				case 1:
+					var time = new Date().getTime();
+					webglPlayer.renderFrame(objData.data, 720, 1280, 720 * 1280, (720 / 2) * (1280 / 2));
+					//console.log("渲染耗时", new Date().getTime() - time + "ms");break;
+			}
+
+		}
+
+		let vConsole = new VConsole();
+
+		if (typeof(Worker) !== "undefined") {
+			console.log("支持webworker");
+		} else {
+			alert("不支持webworker");
+		}
+
+		var isFinish = false;
+		this.canvas = document.getElementById("playCanvas");
+		var webglPlayer = new WebGLPlayer(this.canvas, {
+			preserveDrawingBuffer: false
+		});
+
+
+		var webSocketWorker = new Worker('websocket.js');
+		var startTime = new Date().getTime();
+
+
+
+		webSocketWorker.onmessage = function(event) {
+			console.log("event.data", event.data)
+			decodeWoker.postMessage(event.data);
+		}
+
+		document.addEventListener("visibilitychange", () => {
+			if (document.visibilityState == "visible") {
+
+			} else {
+				console.log("页面不可见");
+			}
+		});
+
+		function Close() //webworker 关闭,清理
+		{
+			var cmd = {
+				cmd: 0
+			};
+			decodeWoker.postMessage(cmd);
+			decodeWoker.terminate();
+			webSocketWorker.postMessage(cmd);
+			webSocketWorker.terminate();
+		}
+		myVideo.onmousedown = function(event) {
+			console.log("22222")
+			//放在此处只是为了方便演示，实际使用中查找横竖屏只要刚连接上时调用一次就好。	
+			//var checkBuffer = GetScreenState();
+			//ws.send(checkBuffer);
+
+			/*if(!isFeed)
+			{
+				console.log("重新申请I帧");
+				requestTime = new Date().getTime();			
+				var buffer = RequestIFrame();
+				ws.send(buffer);
+			}*/
+
+			//console.log("报文 %s", PrintArry(buffer));
+
+
+			if (event.button == 0) {
+				var posX = event.offsetX * 1080 * 1.0 / myVideo.clientWidth;
+				var posY = event.offsetY * 1920 * 1.0 / myVideo.clientHeight;
+				var buffer = ExexuteMouseDown(posX.toString(), posY.toString());
+				// ws.send(buffer);
+				// decodeWoker.postMessage(event.data);
+				console.log("打印buffer", PrintArry(buffer))
+				decodeWoker.postMessage(buffer);
+				isDrag = true;
+			}
+
+		}
+	</script>
+</html>

screenIos/pcm-player.js

@@ -0,0 +1,126 @@
+function PCMPlayer(option) {
+    this.init(option);
+}
+
+PCMPlayer.prototype.init = function(option) {
+    var defaults = {
+        encoding: '16bitInt',
+        channels: 1,
+        sampleRate: 8000,
+        flushingTime: 1000
+    };
+    this.option = Object.assign({}, defaults, option);
+    this.samples = new Float32Array();
+    this.flush = this.flush.bind(this);
+    this.interval = setInterval(this.flush, this.option.flushingTime);
+    this.maxValue = this.getMaxValue();
+    this.typedArray = this.getTypedArray();
+    this.createContext();
+};
+
+PCMPlayer.prototype.getMaxValue = function () {
+    var encodings = {
+        '8bitInt': 128,
+        '16bitInt': 32768,
+        '32bitInt': 2147483648,
+        '32bitFloat': 1
+    }
+
+    return encodings[this.option.encoding] ? encodings[this.option.encoding] : encodings['16bitInt'];
+};
+
+PCMPlayer.prototype.getTypedArray = function () {
+    var typedArrays = {
+        '8bitInt': Int8Array,
+        '16bitInt': Int16Array,
+        '32bitInt': Int32Array,
+        '32bitFloat': Float32Array
+    }
+
+    return typedArrays[this.option.encoding] ? typedArrays[this.option.encoding] : typedArrays['16bitInt'];
+};
+
+PCMPlayer.prototype.createContext = function() {
+    this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+    this.gainNode = this.audioCtx.createGain();
+    this.gainNode.gain.value = 1;
+    this.gainNode.connect(this.audioCtx.destination);
+    this.startTime = this.audioCtx.currentTime;
+};
+
+PCMPlayer.prototype.isTypedArray = function(data) {
+    return (data.byteLength && data.buffer && data.buffer.constructor == ArrayBuffer);
+};
+
+PCMPlayer.prototype.feed = function(data) {
+    if (!this.isTypedArray(data)) return;
+    data = this.getFormatedValue(data);
+    var tmp = new Float32Array(this.samples.length + data.length);
+    tmp.set(this.samples, 0);
+    tmp.set(data, this.samples.length);
+    this.samples = tmp;
+};
+
+PCMPlayer.prototype.getFormatedValue = function(data) {
+    var data = new this.typedArray(data.buffer),
+        float32 = new Float32Array(data.length),
+        i;
+
+    for (i = 0; i < data.length; i++) {
+        float32[i] = data[i] / this.maxValue;
+    }
+    return float32;
+};
+
+PCMPlayer.prototype.volume = function(volume) {
+    this.gainNode.gain.value = volume;
+};
+
+PCMPlayer.prototype.destroy = function() {
+    if (this.interval) {
+        clearInterval(this.interval);
+    }
+    this.samples = null;
+    this.audioCtx.close();
+    this.audioCtx = null;
+};
+
+PCMPlayer.prototype.flush = function() {
+    if (!this.samples.length) return;
+    var bufferSource = this.audioCtx.createBufferSource(),
+        length = this.samples.length / this.option.channels,
+        audioBuffer = this.audioCtx.createBuffer(this.option.channels, length, this.option.sampleRate),
+        audioData,
+        channel,
+        offset,
+        i,
+        decrement;
+
+    for (channel = 0; channel < this.option.channels; channel++) {
+        audioData = audioBuffer.getChannelData(channel);
+        offset = channel;
+        decrement = 50;
+        for (i = 0; i < length; i++) {
+            audioData[i] = this.samples[offset];
+            /* fadein */
+            if (i < 50) {
+                audioData[i] =  (audioData[i] * i) / 50;
+            }
+            /* fadeout*/
+            if (i >= (length - 51)) {
+                audioData[i] =  (audioData[i] * decrement--) / 50;
+            }
+            offset += this.option.channels;
+        }
+    }
+    
+    if (this.startTime < this.audioCtx.currentTime) {
+        this.startTime = this.audioCtx.currentTime;
+    }
+    //console.log('start vs current '+this.startTime+' vs '+this.audioCtx.currentTime+' duration: '+audioBuffer.duration);
+    bufferSource.buffer = audioBuffer;
+    bufferSource.connect(this.gainNode);
+    bufferSource.start(this.startTime);
+    this.startTime += audioBuffer.duration;
+    this.samples = new Float32Array();
+};

screenIos/webgl.js

@@ -0,0 +1,148 @@
+function Texture(gl) {
+    this.gl = gl;
+    this.texture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, this.texture);
+
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+}
+
+Texture.prototype.bind = function (n, program, name) {
+    var gl = this.gl;
+    gl.activeTexture([gl.TEXTURE0, gl.TEXTURE1, gl.TEXTURE2][n]);
+    gl.bindTexture(gl.TEXTURE_2D, this.texture);
+    gl.uniform1i(gl.getUniformLocation(program, name), n);
+};
+
+Texture.prototype.fill = function (width, height, data) {
+    var gl = this.gl;
+    gl.bindTexture(gl.TEXTURE_2D, this.texture);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, width, height, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, data);
+};
+
+function WebGLPlayer(canvas, options) {
+    this.canvas = canvas;
+    this.gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
+    this.initGL(options);
+}
+
+WebGLPlayer.prototype.initGL = function (options) {
+    if (!this.gl) {
+        console.log("[ER] WebGL not supported.");
+        return;
+    }
+
+    var gl = this.gl;
+    gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
+    var program = gl.createProgram();
+    var vertexShaderSource = [
+        "attribute highp vec4 aVertexPosition;",
+        "attribute vec2 aTextureCoord;",
+        "varying highp vec2 vTextureCoord;",
+        "void main(void) {",
+        " gl_Position = aVertexPosition;",
+        " vTextureCoord = aTextureCoord;",
+        "}"
+    ].join("\n");
+    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
+    gl.shaderSource(vertexShader, vertexShaderSource);
+    gl.compileShader(vertexShader);
+    var fragmentShaderSource = [
+        "precision highp float;",
+        "varying lowp vec2 vTextureCoord;",
+        "uniform sampler2D YTexture;",
+        "uniform sampler2D UTexture;",
+        "uniform sampler2D VTexture;",
+        "const mat4 YUV2RGB = mat4",
+        "(",
+        " 1.1643828125, 0, 1.59602734375, -.87078515625,",
+        " 1.1643828125, -.39176171875, -.81296875, .52959375,",
+        " 1.1643828125, 2.017234375, 0, -1.081390625,",
+        " 0, 0, 0, 1",
+        ");",
+        "void main(void) {",
+        " gl_FragColor = vec4( texture2D(YTexture, vTextureCoord).x, texture2D(UTexture, vTextureCoord).x, texture2D(VTexture, vTextureCoord).x, 1) * YUV2RGB;",
+        "}"
+    ].join("\n");
+
+    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+    gl.shaderSource(fragmentShader, fragmentShaderSource);
+    gl.compileShader(fragmentShader);
+    gl.attachShader(program, vertexShader);
+    gl.attachShader(program, fragmentShader);
+    gl.linkProgram(program);
+    gl.useProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        console.log("[ER] Shader link failed.");
+    }
+    var vertexPositionAttribute = gl.getAttribLocation(program, "aVertexPosition");
+    gl.enableVertexAttribArray(vertexPositionAttribute);
+    var textureCoordAttribute = gl.getAttribLocation(program, "aTextureCoord");
+    gl.enableVertexAttribArray(textureCoordAttribute);
+
+    var verticesBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, verticesBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([1.0, 1.0, 0.0, -1.0, 1.0, 0.0, 1.0, -1.0, 0.0, -1.0, -1.0, 0.0]), gl.STATIC_DRAW);
+    gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
+    var texCoordBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([1.0, 0.0, 0.0, 0.0, 1.0, 1.0, 0.0, 1.0]), gl.STATIC_DRAW);
+    gl.vertexAttribPointer(textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);
+
+    gl.y = new Texture(gl);
+    gl.u = new Texture(gl);
+    gl.v = new Texture(gl);
+    gl.y.bind(0, program, "YTexture");
+    gl.u.bind(1, program, "UTexture");
+    gl.v.bind(2, program, "VTexture");
+}
+
+WebGLPlayer.prototype.renderFrame = function (videoFrame, width, height, uOffset, vOffset) {
+    if (!this.gl) {
+        console.log("[ER] Render frame failed due to WebGL not supported.");
+        return;
+    }
+
+    var gl = this.gl;
+    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+    gl.clearColor(0.0, 0.0, 0.0, 0.0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+
+    gl.y.fill(width, height, videoFrame.subarray(0, uOffset));
+    gl.u.fill(width >> 1, height >> 1, videoFrame.subarray(uOffset, uOffset + vOffset));
+    gl.v.fill(width >> 1, height >> 1, videoFrame.subarray(uOffset + vOffset, videoFrame.length));
+
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+};
+
+WebGLPlayer.prototype.fullscreen = function () {
+	  var canvas = this.canvas;
+    if (canvas.RequestFullScreen) {
+        canvas.RequestFullScreen();
+    } else if (canvas.webkitRequestFullScreen) {
+        canvas.webkitRequestFullScreen();
+    } else if (canvas.mozRequestFullScreen) {
+        canvas.mozRequestFullScreen();
+    } else if (canvas.msRequestFullscreen) {
+        canvas.msRequestFullscreen();
+    } else {
+        alert("This browser doesn't supporter fullscreen");
+    }
+};
+
+WebGLPlayer.prototype.exitfullscreen = function (){
+    if (document.exitFullscreen) {
+        document.exitFullscreen();
+    } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+    } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+    } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+    } else {
+        alert("Exit fullscreen doesn't work");
+    }
+}

screenIos/websocket.js

@@ -0,0 +1,29 @@
+
+self.importScripts("helper.js");
+var socketURL = "ws://192.168.11.66:9101";
+// socketURL = "ws://127.0.0.1:8081"
+var ws = new WebSocket(socketURL);
+ws.binaryType = 'arraybuffer';
+
+ws.addEventListener('open', function (event) 
+{
+	console.log("发送配置帧");
+	ws.send(ConfigChannel("RK3923C1201900139"));
+});
+		
+
+ws.addEventListener('message',function(event) 
+{	
+	    //var objData = {type:0, data:input};
+		var input = new Uint8Array(event.data);
+			
+		if(input[0] == 0xff)
+		{
+			
+		}
+		else
+		{
+			self.postMessage(input);		
+		}			
+	}
+);

static/css/homeNew.css

@@ -49,18 +49,18 @@
 	box-shadow: 3px 3px 4px 0px rgba(136, 142, 151, 0.18), -3px -3px 4px 0px #FFFFFF;
 	border-radius: 28px;
 	padding: 7px 8px; */
-	    width: 100%;
-	    height: 100%;
-	    position: relative;
-	    /* left: 8%; */
-	    border-radius: 10px;
-	    overflow: hidden;
-	    /* top: 9%; */
-	    z-index: 1;
-	    background: #F6F6F6;
-	    box-shadow: 3px 3px 4px 0px rgba(136, 142, 151, 0.18), -3px -3px 4px 0px #FFFFFF;
-	    border-radius: 28px;
-	    padding: 7px 8px;
+	width: 100%;
+	height: 100%;
+	position: relative;
+	/* left: 8%; */
+	border-radius: 10px;
+	overflow: hidden;
+	/* top: 9%; */
+	z-index: 1;
+	background: #F6F6F6;
+	box-shadow: 3px 3px 4px 0px rgba(136, 142, 151, 0.18), -3px -3px 4px 0px #FFFFFF;
+	border-radius: 28px;
+	padding: 7px 8px;
 }
 
 .canvasfalse {
@@ -82,7 +82,7 @@
 }
 
 .camvas-head {
-/* 	position: absolute;
+	/* 	position: absolute;
 	top: 0;
 	height: 57px;
 	width: 89%;
@@ -92,19 +92,19 @@
 	color: rgba(255, 255, 255, 1);
 	margin-top: 7px;
 	border-radius: 20px; */
-	    position: absolute;
-	    top: 0;
-	    height: 57px;
-	    width: 94%;
-	  background: rgba(0, 0, 0, 0.4);
-	    font-size: 14px;
-	    padding: 0px 10px 0px 10px;
-	    color: rgba(255, 255, 255, 1);
-	    margin-top: 7px;
-	    border-radius: 20px;
-	    box-sizing: border-box;
-	    left: 0;
-	    margin-left: 3%;
+	position: absolute;
+	top: 0;
+	height: 57px;
+	width: 94%;
+	background: rgba(0, 0, 0, 0.4);
+	font-size: 14px;
+	padding: 0px 10px 0px 10px;
+	color: rgba(255, 255, 255, 1);
+	margin-top: 7px;
+	border-radius: 20px;
+	box-sizing: border-box;
+	left: 0;
+	margin-left: 3%;
 }
 
 .canvastime {
@@ -354,3 +354,146 @@
 .kp_img {
 	padding-top: 50%;
 }
+
+canvas {
+	display: block;
+	width: 100%;
+	height: 100%;
+	z-index: 999;
+	border-radius: 1.25rem;
+}
+
+.wine {
+	width: 100%;
+	height: 100%;
+}
+
+.mainbox {
+	width: 18rem;
+	height: 10rem;
+	background: #fff;
+	position: fixed;
+	top: 38%;
+	left: 12%;
+	border-radius: 5px;
+}
+
+.boxTitle {
+	text-align: center;
+	font-size: 18px;
+	padding: 10px 0px;
+}
+
+.boxText {
+	text-align: center;
+	font-size: 16px;
+}
+
+.boxbt {
+	width: 60%;
+	height: 2.5rem;
+	background: #0886F5;
+	margin: 0 auto;
+	font-size: 16px;
+	text-align: center;
+	line-height: 2.5rem;
+	color: #fff;
+	border-radius: 5px;
+	margin-top: 1rem;
+}
+
+.sbox {
+	width: 18rem;
+	height: 5.5rem;
+	background: #fff;
+	position: fixed;
+	top: 38%;
+	left: 5%;
+	border-radius: 5px;
+}
+
+.sboxText {
+	padding: 17px;
+	font-size: 16px;
+}
+
+.boximg {
+	position: absolute;
+	width: 1rem;
+	height: 1rem;
+	left: 45%;
+	bottom: -22%;
+}
+
+.maxs {
+	width: 100%;
+	height: 100%;
+	position: fixed;
+	background: rgba(0, 0, 0, 0.5);
+
+}
+
+.helps {
+	width: 35px;
+	height: 30px;
+	background: rgba(187, 187, 187, 1);
+	border-radius: 30px 0px 0px 30px;
+	font-size: 13px;
+	line-height: 30px;
+	color: rgba(255, 255, 255, 1);
+	position: absolute;
+	right: 0;
+	bottom: 181px;
+	text-align: center;
+}
+
+.helps-img {
+	width: 50%;
+	height: 50%;
+	margin: 0 auto;
+	margin-top: 0.5rem;
+}
+
+.diskName {
+	margin-left: 6px;
+}
+
+#showsuss {
+	display: none;
+}
+
+.swiper-container {
+	width: 100%;
+	height: 100%;
+}
+
+.swiper-slide {
+	/* padding: 43px 53px; */
+	padding: 12% 14%;
+	box-sizing: border-box;
+	text-align: center;
+	font-size: 18px;
+	/* background: #fff; */
+	/* height: 667px; */
+	height: 100%;
+	/* Center slide text vertically */
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: -webkit-flex;
+	display: flex;
+	-webkit-box-pack: center;
+	-ms-flex-pack: center;
+	-webkit-justify-content: center;
+	justify-content: center;
+	-webkit-box-align: center;
+	-ms-flex-align: center;
+	-webkit-align-items: center;
+	align-items: center;
+}
+
+
+
+.thl-time {
+	text-align: left;
+	margin-left: -0.4rem !important;
+}