Welcome

首页 / 脚本样式 / Vue / webSocket实时视频查看demo

<!DOCTYPE html>

<html>

<head>

<title>Testing websockets</title>

</head>

<body>

 <div>

 <input id="user" type="text"> 

<input type="submit" value="Close" onclick="OnClose()" />

  <input type="submit" value="Start" onclick="start()" />

  <img id="video" src="" width="100px" height="100px">

  <img id="video1" src="" width="100px" height="100px">

 </div>

 <div id="messages"></div>

 <script type="text/javascript">

  var webSocket = new WebSocket('ws://192.168.1.203:45000');

  //webSocket.binaryType = "arraybuffer";

  console.log(webSocket.ip)

  webSocket.onerror = function(event) {

   onError(event)

  };

  

  webSocket.onopen = function(event) {

   onOpen(event)

  };

   

  webSocket.onclose = function(event) {

   onClose(event)

  };

  

  webSocket.onmessage = function(e) {

var data =e.data; //json字符串

var obj = JSON.parse(data);


document.getElementById('video').src=obj[0].Image;

document.getElementById('video1').src=obj[1].Image;

console.log(obj[0].video);

  };

  function onMessage(e) {

  }

  

  function onOpen(event) {

   document.getElementById('messages').innerHTML

    = 'Connection established';

  }

   

  function onClose(event) {

   document.getElementById('messages').innerHTML

    += '<br />disconnection';

  }

  function onError(event) {

   alert(event.data);

  }

  function OnClose() {

   webSocket.send($("#user").val());

   return false;

  }  

  function start() {

   webSocket.send('25');

   return false;

  }



 </script>

</body>

</html>