LoginSignup
10

More than 5 years have passed since last update.

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

Last updated at Posted 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();
            }
        }

    }
}

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10