Question

我尝试制作实时视频广播功能。我可以在html5中捕获视频，但无法从服务器获取视频。我不知道如何定义套接字URL，我尝试了多个URL，但它们都不起作用。请任何人能帮助我。我已经在网上搜索了几天，但仍然无法使代码正常工作。

代码如下：

WebCamServer：

    @ServerEndpoint(value="/wsServer")
    public class WebCamServer{

@OnOpen
public void OnOpen(Session session) {
    System.out.println(session.toString()); 
}

@OnMessage
public void onMessage(Session ss,byte[] img) {
    ByteBuffer buf = ByteBuffer.wrap(img);
    try {
        ss.getBasicRemote().sendBinary(buf);
    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
}

@OnClose
public void onClose(Session ss) {
    try {
        ss.close();
    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
}
    }

WebCamCaptureController：

    @Controller
    public class WebCamCaptureController{

@RequestMapping(value = "/webCamCapture", method = RequestMethod.GET)
   public String webcamCapture(Model model){
return "liveVideoPage";
   }
   }

liveVideoPage.html：

  <body>
  <div class="wrapper">
  <div>
  <h1>Video from webCam</h1>
  <video ></video>
  </div>
  <div>
  <h1>Video on Canvas</h1>
  <canvas></canvas>
  </div>

  <div>
  <h1> Video from Server</h1>
  <img alt="" />
  </div>
  </div>
<script type="text/javascript" src="js/mywebcam.js"></script>
  </body>

mywebcam.js：

   (function(){
var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
var img = document.querySelector('img');
var context=canvas.getContext('2d');
 // var url = 'ws://' + location.host + '/wsServer';
var url = "ws://localhost:8080/wsServer";
 // var url = "ws://localhost:8080/demo-1/wsServer";
 // const WS_URL = location.origin.replace(/^http/, 'ws');
 // var url=location.href.replace('http://', 'ws://') + '/wsServer';
var socket = new WebSocket(url);
 // var socket = new WebSocket(WS_URL);
socket.onopen=onOpen;
function onOpen(event){

}

var sets={
        video:true,
        audio:false
};

navigator.mediaDevices.getUserMedia(sets).then(function(stream){
    video.srcObject=stream;
    video.play();
}).catch(function(err){

});

 setInterval(readimg ,100);


   function readimg(){
    drawCanvas();
    readCanvas();
   }

function drawCanvas(){

    context.drawImage(video,0,0,canvas.width, canvas.height);
}

 console.log(canvas.toDataURL('image/jpeg',1));

function readCanvas(){
    var canvasData = canvas.toDataURL('image/jpeg',1);
    var decodeAstring = atob(canvasData.split(',')[1]);

    var charArray =[];

    for(var i=0; i<decodeAstring.length;i++){

        charArray.push(decodeAstring.charCodeAt(i));
    }

   socket.send( new Blob([new Uint8Array(charArray)],{
       type:'image/jpeg'
   }));     

    socket.addEventListener('message',function(event){
        img.src=window.URL.createObjectURL(event.data);
    });

}

  })();

得到以下错误：我认为ws url是错误的，但是我尝试了不同的URL，但它们都不起作用。我的项目名称为demo-1。

  Writing [{timestamp=Thu May 30 17:00:35 CST 2019, status=404, error=Not 
  Found, message=No message available, path=/wsServer}]
  2019-05-30 17:00:35.681 DEBUG 11544 --- [0.1-8080-exec-7] 
  o.s.web.servlet.DispatcherServlet        : Exiting from "ERROR" 
  dispatch, status 404

连接到Websocket服务器时怎么了？

0 个答案: