Question

已建立与套接字的连接，并且响应来自套接字，但由于它是bolb数据类型，因此无法检查响应数据，这时卡住了，非常需要任何有关帮助的引用。这是任务：

图像流容器：A部分：此小部件旨在显示具有multipart / x-mixed-replace模仿类型的图像流，可通过以下http://35.154.106.116:5000/video_feed链接访问。B部分：此小部件订阅了ws：//35.154.106.116：8080 / camera下面给出的套接字以base64（jpeg）格式发送图像

HTML部分：

<html ng-app="MyAwesomeApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script src="ng-websocket/ng-websocket.js"></script>
<script src="app.js"></script>
</head>

<body ng-controller="cnt">
  <div>
      <img id = 'image' src/>
  </div>
</body>    
</html>

AngularJS部分：

var app = angular.module('MyAwesomeApp', ['ngWebsocket']);

app.controller('cnt', function ($scope,$websocket) {

  var ws = $websocket.$new('ws://35.154.106.116:8001/');
  ws.$on('$open', function (message) {
      ws.$emit(''); 
  })


  ws.$on('$message',function (message) { 
      var file = new Blob([ message ], {
          type : 'image/jpeg'
      });

      var fileURL = URL.createObjectURL(file);

      var image = document.getElementById('image');

      image.src = 'data:image/png;base64,'+fileURL;console.log( message);

   });
});

使用angularjs进行实时图像流

0 个答案: