html5 canvas 녹화 관련 경험기

■ RecordRTC.js 이용 --- 이 방법을 채택한 상황

 https://www.webrtc-experiment.com/

  캔버스외에도 여러가지를 recording 할 수 있는데

  캔버스를 테스트 해보았다 (2014.0311)

 캔버스외의 html 요소들에 대해서도 recording 이 가능하다.

 

 1) 하지만...  캔버스 여러개 포함하는 div 를 매핑시킬시 동작하지 않는다. 

 하나의 캔버스는 가능하다.

 소스를 봐도 여러개 캔버스를 매핑하는것은  어려워 보인다.

 

  

 2) 속도 딜레이가 존재

    => 이건 좀 더 연구해보면 해법이 나올수도 있고... 그렇지 않다해도 이 정도는 무난하다고 보임...

   

 

 3) 서버 저장후 플레이도 가능할거 같다

 * 일단 mycanvas 의  bg 에 이미지를 넣은거 까지는 녹화되게 하였다

 

 * 크로스도메인 이미지는 지원안되므로, 자체서버의 이미지를 삽입하는 식으로 테스트 해봄 

    ==> 현재 이미지 처리 서버는 별도로 구동하고 있는데... 이미지 처리 서버와 협업 보드 서버에서
          첨부파일 변환 이미지 경로를 같은쪽을 보게하던가... 하는 것이 필요...

          크로스도메인 이슈는 RecordRTC 라이브러리 문제가 아니고, html자체에서 오는 것임. 서브도메인이 다른 경우에도 크로스도메인에 걸려버림. 

    이 경우 공유캔버스에 그려지는것이 mycanvas 에 가려지므로

    캔버스에 마우스 올리면 mycanvas 가 위로가게 하고

    마우스 아웃하면 shared 가 보이는 식으로 그냥 테스트겸 코딩해보았다  ---- 이런방식은 허접해서 실제로 쓰긴 애매함...

 

■ Whammy: A Real Time Javascript WebM Encoder

http://antimatter15.com/wp/2012/08/whammy-a-real-time-javascript-webm-encoder/

RecordRTC.js 에서도 canvas 처리부분은 

이 Whammy 의 코드를 이용하고 있음

■ RecordableDrawing.js

최신버젼

http://ramkulkarni.com/blog/record-and-playback-drawing-in-html5-canvas-part-ii/

기존버젼

http://ramkulkarni.com/blog/record-and-playback-drawing-in-html5-canvas/

이건 드로잉 하나 하나를 기록해서 처리하는 것이라서...

드로잉툴 추가, 툴 색상/굵기, 메모 등.... 드로잉 기능에 따라 코딩이 많이 붙어줘야 한다.

저장후 플레이할때도 파라미터 핸들링하는것이 까다로움.

그런데 shared canvas 까지 고려하면 완전 복잡해짐.

이 방법도 테스트해보자.

1) 간단 녹화

2) bgcanvas도 같이 녹화하기

** 이건... RecordRTC 처럼 비디오파일을 생성하는게 아니고.. 캔버스에 그냥 새로 그리는방식이므로 

     bgcanvas 캡쳐는 안하고, 별도 로직으로 띄워줘도 되기는 함.