HTML5 비디오/캔버스 태그를 파일로 저장

로컬 소스에서 4 개의 비디오를 재생하는 페이지가 있습니다.이 모든 것을 캔버스에 결합하여 모든 요소가 하나의 요소를 통해 표시되도록합니다 (캔버스의 이미지를 매 X 초마다 업데이트 함).). 비디오 파일에 저장할 수있는 방법이 있습니까?HTML5 비디오/캔버스 태그를 파일로 저장

출처

2012-11-20 Eliezer

첫 번째 : 대용량 데이터의 경우 다음 방법을 권장하지 않습니다.

당신은 전체 영상 저장하기에 충분히 큰 크기의 배열을 만들 수 있습니다

//Size: Colour channels * width * height * noOfFrames 
//THIS WILL GET BIG!! 
var video = new Uint8Array(3*640*480*24);

그런 다음 배열에 비디오의 모든 프레임을 저장 지금

당신은 시작으로이 코드를 사용할 수 있습니다 DataUrl로 변환 :

var base64String = btoa(String.fromCharCode.apply(null, video));

(http://stackoverflow.com/a/11562550/1554114)

을 0

이렇게하면 RAW-Video 같은 것을 얻을 수 있습니다.
이것은 DataUrl 링크입니다. 오른쪽/클릭으로 저장/.. "Test.mp4"
(SO가 처리 할 수 있는지 보자 : D - 아니요,)

출처

2012-11-20 08:29:28 Nippey

감사합니다 - 그것은 자바 스크립트에서

구현 H264은 당신에게 달려있다) 모습을 볼 수있는 '편집'버튼을 눌러! 지금은 RAW-Video로 잘 될 것입니다. 4 개의 1280 x 720 비디오에서 비디오를 표시하는 캔버스를 사용하는 동안 이것이 추락 할 가능성은 얼마입니까 (메모리 부족 등)? – Eliezer

나는 이것을 상상조차하고 싶지 않다. 그것은 66MB/s': D'입니다. 그리고이 코드는 조각별로 작동 할 수 없기 때문에 dataURL 로의 변환은 추측 할 수있는 원래 배열 크기의 약 3 배를 추가로 소비합니다. – Nippey

비디오를 1 초 동안 재생하면 화면에 원시 데이터가 멈추고 덤프됩니다 .... 이것은 6 분짜리 비디오의 1 초이고 이미 5 분이 지났음에도 불구하고 존재하지 않습니다. done :-) – Eliezer

HTML5 비디오/캔버스 태그를 파일로 저장

답변

관련 문제