웹은 정말 복잡하다.
매번 하면서 느낀다.
javascript로 canvas 또는 동영상 blob을 <a> href로 다운로드 할 때, 다운로드가 안될 것이다.
단순하게 설명하면, IOS 정책상 이슈이다. MAC에서는 또 다름. ipad나 iphone에서 발생하는 이슈
**어디서는 target='_blank' 속성으로 해결했다고하는데, 나는 해결안됬지만 코드로 넣어줌
두 가지 유의할 점.
1. MediaRecorder를 사용하는 한, ios chrome은 .mp4만 지원한다.
video/mp4만 지원하고 audio/mp4는 지원안함
그렇다고 audio 녹화가 안되냐? 그건 아니다
video/mp4로 지정하고, video:true, audio:true 하면 된다.
2. FileReader 사용해야한다.
단순하게 코드를 조금 붙여서 보여주겠다.
// new Blob 선언
chunks = [] // 이미 들어가있는 배열이라고 치자.
var blob = await new Blob(chunks, {type: 'video/mp4'});
// reader에 담기
var reader = new FileReader();
reader.onload = function(e){
window.location.href = reader.result;
}
reader.readAsDataURL(blob);
// 일반적인 저장코드
var url = URL.createObjectURL(reader)'
var a = document.createElement('a');
a.href = url;
a.target = '_blank';
a.download = '파일명.mp4'; // 반드시 ios chrome은 mp4.. 왜인지 모르겠으면 webrtc Mediarecorder가 코덱을 무엇을 지원하는 지 알아보자
a.click();
// 이후에는 a를 지우는 코드 넣기 ( 나는 자동으로 지워졌었는데, 자동으로 지워진다고 해도 꼭 지워줘야 메모리 관리가 편리하다.
도움되는 사람이 있을 지 모르겠다.
1. 팁인데 하나 더 말해주자면, chunks 배열에 넣을 때, Mediarecorder에 constraint할때, video만 mp4 지원한다고 video:true만 넣으면 안되고, audio:true도 넣어주면 audio까지 된다.
2. mimtype 작성하지 말 것. 그냥 audio:true, video:true만 넣어주면됨.