Firejune

SasCam Webcam Server와 자바스크립트로 스트리밍 웹캠을 구현해 보았습니다. SasCam Webcam Server는 무료로 제공되는 웹캠 서버 프로그램입니다. 이 서버는 캠에 잡힌 화면을 하나의 jpg파일에 저장하고 지속적으로 업데이트하는 역할을 합니다. 플래시기반 웹캠 뷰어는 저장된 jpg파일을 계속해서 불러오는 구조로 만들어져 있더군요. 사실, 플레이어가 너무나도 허접스러워서 자바스크립트로 만들어 본 것입니다.

자바스크립트 플레이어 역시 허접스러운 것은 마찬가지입니다. SasCam Webcam Server가 업데이트 한 이미지를 계속 리로드하여 마치 동영상인 것처럼 속이는 꼼수입니다. 좌측 영상은 창문 밖에 심어놓은 배달 확인용 웹캠 화면입니다. 금일 24시간 방영(?)할 예정이니 많은 시청 바랍니다(;) 마우스 클릭으로 재생할 수 있어요. 5년전에 구입한 이 웹캠은 지금까지 한번도 제대로 사용해 본 적이 없었는데, 요런 엉뚱한 용도로 쓰게 되는군요. 서버에 할당해서 저렴한 온라인 방범 솔루션 구성도 생각해 볼만 하겠습니다.

var SasVideo = Class.create();
SasVideo.prototype = {
  initialize: function(element, options) {
    this.options = Object.extend({
      serverIP  : 'http://yourwebcamserveraddress.com/', // your webcam server address
      frameRate : 2, // frameRate / seconds
      autoPlay  : false
    }, options || {});

    this.state = 'idle';
    this.frameIdx = 0;
    this.element = $(element);
    this.frame = this.element.down('img');
    this.src = 'http://' + this.options.serverIP + '/images/SaschArtCamImage.jpg';

    if (this.options.autoPlay) this.play();
    else {
      this.frame.src = this.src;
      this.frame.style.cursor = 'pointer';
      this.frame.alt = 'click to play/stop';
      Event.observe(this.frame, 'click', this.control.bindAsEventListener(this));
    }
  },
  control: function() {
    if(this.state != 'running') this.play();
    else this.state = 'stop';
  },
  play: function() {
    if (this.state == 'stop' || this.options.frameRate < 1) {
      this.state = 'idle';
      return;
    }
    if (this.state == 'idle') this.state = 'running';

    setTimeout(function() {
      var src = this.src + '?' + new Date().getTime();
      try { this.frame.src = src; } catch(e) { return; }
      if (this.frameIdx % 5 == 1) this.element.style.background = 'url(' + src + ')';
      this.frameIdx++;
      this.play(); // loop play
    }.bind(this), 1000 / this.options.frameRate);
  }
};

new SasVideo('SasVideo'); // create object