More than 5 years have passed since last update.

WebRTCのGUMの映像をサーバに保存する。

Last updated at 2013-06-16Posted at 2013-06-16

WebRTCのgetUserMediaでウェブカメラの画像を取得し、
サーバに保存するサンプルです。

Java 1.7.0_21
Tomcat 7.0
Chrome 28.0.1500.44 beta-m
で動かしました。

以下コードです。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<title>GUMPhoto</title>
	<script src="/GUMPhoto/js/lib/jquery-2.0.2.js"></script>
	<script src="/GUMPhoto/js/photo.js"></script>
</head>
 
<body>
	<canvas id="canvas" width="256" height="192"></canvas>
  	<video id='video' width="640" height="480"></video>
 	<img id="shutterButton" onclick="GUM.shutter();" width="100" height="100"src="/GUMPhoto/img/camera.png"></img>
	<h3><a id="retryLink" href="javascript:GUM.retry()">写真を撮り直す</a></h3>
</body>
</html>

photo.js

var GUM = {};
$(document).ready(function() {
  
	// getUserMediaでカメラ画像をvideo要素(#video)に表示
	// http://i26.jp/html5dev/%E3%80%90html5%E3%80%91getusermedia%E3%81%A7%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%8B%E3%82%89%E3%82%AB%E3%83%A1%E3%83%A9%E3%82%92%E8%B5%B7%E5%8B%95%E3%81%99%E3%82%8B/
	GUM.initCamera = function() {
		if (!navigator.webkitGetUserMedia) {
			alert('webkit系ブラウザでないか、もしくはgetUserMediaがサポートされていません');
		}
		navigator.webkitGetUserMedia({
				video : true
			},
			function(localMediaStream) {
				GUM.video.src = window.URL.createObjectURL(localMediaStream);
				GUM.video.play();
			}, function(err) {
				alert('カメラから映像を取得することができませんでした。');
				console.log(err);
			}
		);
	};
	
	GUM.shutter = function() {
		var context2d = GUM.canvas.getContext('2d');
		GUM.video.pause();
		context2d.drawImage(GUM.video, 0, 0, 256, 192);
		try {
			// http://www.html5.jp/canvas/ref/HTMLCanvasElement/toDataURL.html
			// canvas.toDataURL()はChromeではpngのみサポートしてるみたい。2013-05-29
			var imgData = GUM.canvas.toDataURL().replace("data:image/png;base64,", "");
			$.post(
				'/GUMPhoto/photo/create.do',
				{ 'img' : imgData },
				alert('写真のアップロードが完了しました。')
			);
		} catch (e) {
			console.log(e.message);
		}
		$('#retryLink').show();
	};
	
	GUM.retry = function() {
		GUM.video.play();
		$('#retryLink').hide();
	};
	
	$('#retryLink').hide();
	GUM.canvas = $('#canvas').hide()[0];
	GUM.video = $('#video')[0];
	GUM.initCamera();
	
});

FrontController.java

package com.github.mogg.gumphoto.ui;
 
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.github.mogg.gumphoto.business.Photo;
 
/**
 * Servlet implementation class FrontController
 */
@WebServlet("*.do")
public class FrontController extends HttpServlet {
  private static final long serialVersionUID = 1L;
 
	/**
	 * @see HttpServlet#HttpServlet()
	 */
	public FrontController() {
		super();
		// TODO Auto-generated constructor stub
	}
 
	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}
 
	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
 
		switch (request.getServletPath()) {
		case "/photo/create.do":
			Photo.create(request, getServletContext().getRealPath("/"));
			break;
		}
 
	}
}

Photo.java

package com.github.mogg.gumphoto.business;
 
import java.io.FileOutputStream;
import java.io.IOException;
import javax.servlet.http.HttpServletRequest;
import org.apache.commons.codec.binary.Base64;
 
public class Photo {
 
    public Photo() {
		super();
		// TODO Auto-generated constructor stub
	}
	
	public static void create(HttpServletRequest request, String path){
		
		String imageName = "imageName";
        String data = request.getParameter("img");
		byte[] bytes = Base64.decodeBase64(data.getBytes());
		FileOutputStream fos = null;
		try {
			fos = new FileOutputStream(path + "photo\\" + "imageName" + ".png");
			fos.write(bytes);
			System.out.println("Photo was saved at :　" + path + "photo\\" + imageName + ".png");
		} catch (Exception e) {
			System.out.println(e.getMessage());
		} finally {
			try {
				fos.close();
			} catch (IOException e) {
				System.out.println("写真の保存時に例外が発生しました。");
				System.out.println(e.getMessage());
				e.printStackTrace();
			}
		}
	
	}
}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up