opensource
/
EasyMedia


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
							<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试websocket</title>

		<script type="text/javascript">
			var imgData = null;
			function WebSocketTest() {
				if ("WebSocket" in window) {
					alert("您的浏览器支持 WebSocket!");

					// 打开一个 web socket
					var ws = new WebSocket("ws://localhost:3000/live/img/33");

					ws.onopen = function() {
						// Web Socket 已连接上，使用 send() 方法发送数据
						// ws.send("发送数据");

					};

					ws.onmessage = function(evt) {
						var received_msg = evt.data;
						var livedata = JSON.parse(received_msg);
						var data = livedata.rgbData;
						
						if(!imgData){
							imgData = ctx.createImageData(livedata.width, livedata.height);
						}
						
						for (var i = 0; i < data.length; i ++) {
							// imgData.data[i + 0] = data[i];
							// imgData.data[i + 1] = data[i + 1];
							// imgData.data[i + 2] = data[i + 2];
							// imgData.data[i + 3] = data[i + 3];
							
							imgData.data[i] = data[i];
						}

						ctx.putImageData(imgData, 0, 0);
					};

					ws.onclose = function() {
						// 关闭 websocket
						// alert("连接已关闭..."); 
					};
				} else {
					// 浏览器不支持 WebSocket
					alert("您的浏览器不支持 WebSocket!");
				}
			}

			var ctx = null;
			window.onload = function() {
				var ccc = document.getElementById("mycanvas");
				ctx = ccc.getContext("2d");
				// ctx.putImageData(imgData, 0, 0);
			}

			// int转rgb
			function converArgbToRgb(argb) {
				var r = (argb & 0xff0000) >> 16;
				var g = (argb & 0xff00) >> 8;
				var b = (argb & 0xff);

				imgData.data.push(r);
				imgData.data.push(g);
				imgData.data.push(b);
				imgData.data.push(255);

			}

			// rgb转int
			function converRgbToArgb(r, g, b) {
				var color = ((0xFF << 24) | (r << 16) | (g << 8) | b);
				return color;
			}
		</script>

	</head>
	<body>

		<div id="sse">
			<a href="javascript:WebSocketTest()">运行 WebSocket</a>
		</div>
		<canvas id="mycanvas" width="500" height="500" style="border: solid 1px #42B983;"></canvas>

	</body>
</html>