개시하다

웹RTC를 이용해 앱을 만들 때 잘라도 다 자르지 못하는 것은 카메라 영상의 획득이다.노트북에서 일하면 자신의 얼굴을 계속 쳐다봐야 한다.그래서 저는 제 얼굴을 대신해서 좋아하는 애니메이션을 미디어 흐름의 샘플로 만들었습니다.

구조

비디오 파일 변환

로컬 모션 이미지 파일을 지정하십시오

File 대상에서 URL 생성(window.URL.createObject URL을 이용)

Video 레이블로 재생성

Canvas 라벨로 계속 인쇄(window.requestAnimation Frame 사용)

Canvas 탭에서 MediaStream 꺼내기(Canvas.capture Stream 이용)

오디오 파일 변환

로컬 사운드 파일을 지정하십시오

FileReader로 파일 읽기

WebAudio API 디코딩, 재현

WebAudio API의cre ate MediaStream Destination에서 MediaStream 제거

비디오와 사운드의 결합

새로운 MediaStream 객체 준비

운동 이미지 파일을 변환한 미디어스트림에서 비디오 트랙을 꺼내 새로운 미디어스트림

에 건네주기

사운드 파일을 변환한 미디어스트림에서 오디오 트랙을 꺼내 새 미디어스트림에 전달

combine

    convertedStream = new MediaStream();
    convertedStream.addTrack(duplicateStream.getVideoTracks()[0]);
    convertedStream.addTrack(audioOutputStream.getAudioTracks()[0]);

해보자.

실제 로컬 애니메이션 파일/사운드 파일에서 미디어 흐름을 추출하는 샘플을 만들어 보았습니다.Chrome 또는 Firefox를 사용하십시오.

테스트에 GiitHub Pages 사용file_to_stream.html

GiitHub를 통한 코드 보기file_to_stream.html(※ 링크 타겟 수정 2016.07.28)

로컬에서 이미지 파일과 사운드 파일을 준비한 후 이 절차를 따라 시도하십시오.(사운드와 비디오만 변환할 수도 있음)

※ 이번에는 이쪽NHK 아이디어 라이브러리의 소재를 사용했습니다.
전환된 미디어 흐름은 여기에 설정하고 그 다음에 굽거나 끓이거나 RTCPeerConnection을 통해 통신할 수 있으니 마음대로 사용하세요.

let convertedStream;

주의점

requestAnimation Frame()는 해당 태그/창이 숨겨져 있을 때 호출되지 않습니다.변환된 태그/창에도 일부를 표시하십시오

.

크롬 52의 경우 display:none;변환된 애니메이션이 중지됩니다

.

Firefox47의 경우 Canvas의 그리기와 변환된 영상이 깜빡일 때가 있다.그때visibility:hidden;사용하는Canvas의 스타일을 바꾸기;또는 display:none;

Firefox47의 경우 변환된convertedStream을 RTCPeerConneetion(addStream)에 추가하면 오류가 발생합니다

NotSupportedError: track in constructed stream not yet supported (see Bug 1259236) )

새 RTCperConnection에서 생성된 객체에 트랙을 추가하여 현재 구속조건으로 사용할 경우 통신할 수 없음

Canvas에서 추출한 영상의 미디어 흐름만 통신에 사용할 수 있음

로컬 애니메이션 파일 대신 다른 서버의 애니메이션 파일을 지정하여 변환할 수 있지만 그렇지 않은 것 같습니다.

Canvas

로 복제 가능

미디어 스트림을 꺼낼 수 없음

도메인 이름이 다르면 금지될 수 있습니다

끝말

로컬 파일을 미디어 흐름으로 변환하는 방법을 소개했다.브라우저마다 미세한 움직임은 다르지만 미리 준비한 미디어를 보내는 데 쓰이지 않습니까?
※ 기존 애니메이션/사운드 파일을 사용할 때는 사용 조건을 존중하십시오.잘 부탁드립니다.
HTMLExperts.jp라는 사이트에도 "WebRTC 시작 2016"라는 기사를 썼는데, 웹RTC에 관심이 있다면 그쪽도 볼 수 있다면 기쁠 거예요.