我想从客户端向服务器发送图像并使用它,但似乎还没有完成。此图像是使用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.");
}
};
});