|
web 端接收二进制图像数据与文本数据显示部分
<html>
<head>
? ? <title>Simple client</title>
? ? <script type="text/javascript">
? ? ? ? var wsFrameData; // 图像传输ws
? ? ? ? var wscontrol; //设备控制
? ? ? ? var img
?? ??? ?var icount = 0
? ? ? ? // var img = new Image();
? ? ? ? // var c, ctx;
? ? ? ? var urlCreator = window.URL || window.webkitURL
? ? ? ? var createObjectURL = urlCreator.createObjectURL
? ? ? ? var revokeObjectURL = urlCreator.revokeObjectURL
? ? ? ? var lastFrame = null
? ? ? ? var updateFrame = function () {
? ? ? ? ? ? img.src = createObjectURL(lastFrame)
? ? ? ? }
? ? ? ? function init() {
? ? ? ? ? ? img = document.querySelector('#player')
? ? ? ? ? ? img.onload = function (e) {
? ? ? ? ? ? ? ? var img = e.target
? ? ? ? ? ? ? ? var url = img.src
? ? ? ? ? ? ? ? revokeObjectURL(url)
?? ??? ??? ??? ?lastFrame = null
?? ??? ??? ??? ??? ??? ??? ?
? ? ? ? ? ? };
? ? ? ? ? ? wsFrameData = new WebSocket("ws://127.0.0.1:9005/newtoken=a2abd43dfooepcxw");
? ? ? ? ? ? // Set event handlers.
? ? ? ? ? ? wsFrameData.onopen = function () {
? ? ? ? ? ? ? ? output("wsFrameData onopen");
? ? ? ? ? ? };
?? ??? ??? ? ?// Connect to Web Socket to open senser
?? ??? ??? ? ?wscontrol = new WebSocket("ws://127.0.0.1:9006/newtoken=a2abd43dfooepcxw");
?? ??? ??? ? ?// Set event handlers.
?? ??? ??? ? ?wscontrol.onopen = function() {
?? ??? ??? ??? ?output("wscontrol onopen ");
?? ??? ??? ? ?};
? ? ? ? ? ? wsFrameData.onmessage = function (e) {
?? ??? ??? ?icount = icount+1;
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? var timestamp = parseInt(new Date().getTime() / 1000);
? ? ? ? ? ? ? ? if (typeof (e.data) == "string") {
? ? ? ? ? ? ? ? ? ? output("onmessage: " + e.data +" icount:" + icount);
? ? ? ? ? ? ? ? } else {
?? ??? ??? ??? ??
?? ??? ??? ??? ? //output("icount:" + icount + " stamp:" + timestamp);
? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? // web浏览器会将二进制数据在传输过程加入base64编解码。
? ? ? ? ? ? ? ? ? ? // var reader = new FileReader();
? ? ? ? ? ? ? ? ? ? // reader.onload = function(e){
? ? ? ? ? ? ? ? ? ? // ?? ?if(e.target.readyState == FileReader.DONE){
? ? ? ? ? ? ? ? ? ? //
? ? ? ? ? ? ? ? ? ? // ?? ??? ?console.log('**********');
? ? ? ? ? ? ? ? ? ? //
? ? ? ? ? ? ? ? ? ? // ?? ??? ?var url = e.target.result;
? ? ? ? ? ? ? ? ? ? //
? ? ? ? ? ? ? ? ? ? // ?? ??? ?var text_value=url.replace("application/octet-stream","image/jpg");
? ? ? ? ? ? ? ? ? ? //
? ? ? ? ? ? ? ? ? ? // ?? ??? ?var img = document.getElementById("player");
? ? ? ? ? ? ? ? ? ? // ?? ??? ?//img.innerHTML = "<img src = "+text_value+" />";
? ? ? ? ? ? ? ? ? ? // ?? ??? ?img.src = text_value;
? ? ? ? ? ? ? ? ? ? // ?? ?}
? ? ? ? ? ? ? ? ? ? // }
? ? ? ? ? ? ? ? ? ? // reader.readAsDataURL(e.data);
? ? ? ? ? ? ? ? ? ? if (!lastFrame) {
? ? ? ? ? ? ? ? ? ? ? ? requestAnimationFrame(updateFrame)
? ? ? ? ? ? ? ? ? ? }
// 下面的方式将二进制数据交给了image.src
? ? ? ? ? ? ? ? ? ? lastFrame = e.data
? ? ? ? ? ? ? ? }
? ? ? ? ? ? };
? ? ? ? ? ? wsFrameData.onclose = function (e) {
? ? ? ? ? ? ? ? output("onclose");
?? ??? ??? ??? ?console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean);
?? ??? ??? ??? ?console.log(e)
? ? ? ? ? ? };
? ? ? ? ? ? wsFrameData.onerror = function (e) {
? ? ? ? ? ? ? ? output("onerror");
? ? ? ? ? ? ? ? console.log(e)
? ? ? ? ? ? };
?? ??? ??? ?
?? ??? ??? ?wscontrol.onclose = function () {
? ? ? ? ? ? ? ? output("wscontrol onclose");
? ? ? ? ? ? };
? ? ? ? ? ? wscontrol.onerror = function (e) {
? ? ? ? ? ? ? ? output("wscontrol onerror");
? ? ? ? ? ? ? ? console.log(e)
? ? ? ? ? ? };
? ? ? ? }
? ? ? ? function onSubmit() {
? ? ? ? ? ? var input = document.getElementById("input");
? ? ? ? ? ? // You can send message to the Web Socket using ws.send.
? ? ? ? ? ? var timestamp = parseInt(new Date().getTime() / 1000);
? ? ? ? ? ? wsFrameData.send(input.value);
? ? ? ? ? ? output("send: " + input.value + " stamp:" + timestamp);
? ? ? ? ? ? input.value = "";
? ? ? ? ? ? input.focus();
? ? ? ? }
? ? ? ? function onCloseClick1() {
? ? ? ? ? ? wsFrameData.close();
?? ??? ??? ? ? ??
?? ??? ??? ?wscontrol.close();
?? ??? ??? ??? ??
? ? ? ? }
? ? ? ? function onOpenClick() {
?? ??? ?icount = 0;
? ? ??? ??? ? var json = '{"Send": "Browser","PrtcType": "DevCtrl","Command": "LaserCtrl","Attach": "ON", "TimeStamp": "YYY"}';
?? ??? ? ?wscontrol.send(json);
?? ??? ? ? output("send: " + input.value );
? ? ? ? ? ? input.value = "";
? ? ? ? ? ? input.focus();
? ? ? ? }
? ? ? ? function onCloseClick() {
?? ??? ?icount = 0;
? ? ??? ??? ? var json = '{"Send": "Browser","PrtcType": "DevCtrl","Command": "LaserCtrl","Attach": "OFF", "TimeStamp": "YYY"}';
?? ??? ? ?wscontrol.send(json);
?? ??? ? ? output("send: " + input.value );
? ? ? ? ? ? input.value = "";
? ? ? ? ? ? input.focus();
? ? ? ? }
? ? ? ? function output(str) {
? ? ? ? ? ? var log = document.getElementById("log");
? ? ? ? ? ? var escaped = str.replace(/&/, "&").replace(/</, "<").replace(/>/, ">").replace(/"/, """); // "
? ? ? ? ? ? log.innerHTML = str;
? ? ? ? }
? ? </script>
</head>
<body onLoad="init();">
<form onSubmit="onSubmit(); return false;">
? ? <input type="text" id="input">
? ? <input type="submit" value="Send">
? ? <button onClick="onCloseClick1(); return false;">close</button>
</form>
?
?<button onClick="onOpenClick(); return false;">OpenSenser</button>
?<button onClick="onCloseClick(); return false;">CloseSenser</button>
?
<div id="log"></div>
<img id="player" style="width:704px;height:576px"/>
<!--<canvas id="myCanvas" style="float:left;border:1px solid #c3c3c3" width="1280" height="960"></canvas>-->
</body>
</html>
|