使用Web套接字通信保存图像

时间:2016-02-17 21:32:42

标签: java websocket webrtc

我想从客户端向服务器发送图像并使用它,但似乎还没有完成。此图像是使用WebRTC从网络摄像头捕获的,首先我将其放入canvas1,然后将其发送到服务器,然后添加到canvas2。好吧,我可以看到这两个图像,但我无法将其保存在服务器端。

贝娄是我的代码。

服务器端:

@ServerEndpoint("/imageEcho")
public class WebSocketImageServer {

    private Logger logger = Logger.getLogger(WebSocketImageServer.class);
    private static Set<Session> clients = Collections.synchronizedSet(new HashSet<Session>());


    @OnOpen
    public void onOpen (Session session) {
        // Set max buffer size
        session.setMaxBinaryMessageBufferSize(1024*512);
        // Add session to the connected sessions set
        clients.add(session);
        this.logger.info("Client " + session.getId() + " connected.");
    }

    @OnClose
    public void onClose (Session session) {
        // Remove session from the connected sessions set
        clients.remove(session);
        this.logger.info("Client " + session.getId() + " disconnected.");
    }

    @OnError
    public void onError(Throwable error) {
        this.logger.error(error.getMessage());
    }

    @OnMessage
    public void processVideo(byte[] imageData, Session session) {
        try {
            if (session.isOpen()) {

                FileUtils.writeByteArrayToFile(new File("c:\\image.png"), imageData);

                // Wrap a byte array into a buffer

                ByteBuffer buf = ByteBuffer.wrap(imageData);
                session.getBasicRemote().sendBinary(buf);
            }
        } catch (IOException e) {
            try {
                session.close();
            } catch (IOException e1) {
            }
        }
    }

}

客户端:

app.controller("StreamController", function($scope, StreamService) {

    var video = document.getElementById("video");
    video.videoWidth = 480;
    video.videoHeight = 360;
    var canvas1 = document.getElementById("image");
    var canvas2 = document.getElementById("newImage");

    /* WebRTC */

    //Configure waht kind of media will be shared.
    var constraints = {
            audio: true,
            video: true
    };

    // Start Webcam.
    function successCallback(stream) {
        // Add stream to video.
        video.srcObject = stream;

        connect();
        takeSnapshot();
    }

    function errorCallback(error) {
        console.log('navigator.getUserMedia error: ', error);
    }

    function takeSnapshot() {
        var timer = setInterval(function () {
            //Add an image from video to canvas.
            canvas1.getContext('2d').drawImage(video, 0, 0,                 canvas1.width, canvas1.height);

            // Get image from canvas and send it to server.
            sendFile();
        }, 30000);
    }

    navigator.getUserMedia(constraints, successCallback, errorCallback);


    /* WebSocket */

    var wsUri = "ws://localhost:8081/WITSoftwareRecognitionWeb            /imageEcho";
    var websocket = null;

    function connect() {
        if (websocket == null) {
            // Create a web socket.
            websocket = new WebSocket(wsUri);
            // Define type of WebSocket, can be UTF-8 String, buffer or blob.
        websocket.binaryType = 'arraybuffer';

            // Add WebSocket default methods.
            websocket.onopen = function(evt) {
                onOpen(evt)
            };

            websocket.onmessage = function(evt) {
                onMessage(evt)
            };

            websocket.onerror = function(evt) {
                onError(evt)
            };
        }
    };

    function onOpen(evt) {
        console.log("Connected to Endpoint!");
    }

    function onError(evt) {
        console.log('ERROR: ' + evt.data);
    }

    function onMessage(evt) {
    // Our WebSocket only accepts communication throw binary     (buffer).
        if(evt.data instanceof ArrayBuffer) {
            convertFromBinary(evt.data);
            console.log("File received.");
            console.log('canvas 1: ' + canvas1.toDataURL());
            console.log('canvas 2: ' + canvas2.toDataURL());
        }
    }

    function convertToBinary(image) {
        var buffer = new ArrayBuffer(image.data.length);
        var bytes = new Uint8Array(buffer);
        for (var i=0; i<bytes.length; i++) {
            bytes[i] = image.data[i];
        }
        return buffer;
    }

    function convertFromBinary(buffer) {
        var bytes = new Uint8Array(buffer);
        var image =     canvas2.getContext('2d').createImageData(canvas2.width, canvas2.height);
        for (var i=0; i<bytes.length; i++) {
            image.data[i] = bytes[i];
        }
        //Add the new image to the newImage canvas.
        canvas2.getContext('2d').putImageData(image,0,0);
    }

    function sendFile() {
        if (websocket != null) {
            var url = canvas1.toDataURL("image/png");
            console.log(url);
            var image = canvas1.getContext('2d').getImageData(0, 0,         canvas1.width, canvas1.height);
            var buffer = convertToBinary(image);
            websocket.send(buffer);
            console.log("File sended.");
        }
    };

});

0 个答案:

没有答案