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
Comments