2017-05-20 4 views
1

디바이스 용 앱을 코딩 중이며, 해당 디바이스는 POST 요청을 수신하고 multipart/x-mixed-replace 바이너리 데이터 스트림을 돌려 보냅니다. 애플 리케이션 홈 페이지의 한 섹션에 이러한 스트림을 표시해야합니다.Angular/Ionic/JS를 사용하여 Motion JPEG 이진 데이터 스트림을 표시하는 방법은 무엇입니까?

검색 한 결과 매우 제한된 리소스가 있습니다. 지금까지 모션 JPEG이 특정 URL에서 전송 된 경우 iframe/img 태그를 사용하여 표시 할 수 있다는 사실을 발견했습니다. 그러나, 내 경우는 다르다. 그런 다음 모션 JPEG 바이너리 스트림에서 프레임을 얻으면 이진 스트림을 구문 분석 한 다음 Observable을 만들어 이미지 html 태그의 img 요소를 변경해야한다.

더 간단한 방법이 있습니까? 나는 https://gist.github.com/legege/5301477을 찾았는데, 이것을 사용할 수 있습니까?

+0

현재 구현시에 어떤 문제가 있습니까? – guest271314

+0

아직 구현하지 않았습니다. POST 요청의 응답을 처리 할 때 문제가 있습니다. JS로 파싱해야한다면 이진 데이터 자체를 얻을 수 있다고 생각합니까? 데이터를 프레임으로 분할 한 다음 데이터를 프레임을 img 태그에 바인딩합니까? –

+0

질문에 대한 해결책을 구현하지 않은 이유는 무엇입니까? https://stackoverflow.com/help/how-to-ask, https://stackoverflow.com/help/mcve – guest271314

답변

0

나는 이것을 직접 풀어 냈고 연구에서 많은 것을 배웠다.

핵심 아이디어는 xmlHTTP 요청을 사용하여 motionJPEG 데이터 인 It's about how to transfer binary data을 가져 오는 것입니다.

그런 다음 웹 작업자를 사용하여 이진 데이터를 처리하십시오.

마지막으로 캔버스를 사용하여 이온 페이지에서 이미지를 그립니다.

이미지로드시 프론트 엔드 JS 지연으로 인해 motionJPEG 미리보기가 현재 구현시 원활하지 않습니다. 그러나 이것은 JS에서 가능합니다.

github를 확인하십시오. https://github.com/makoto-unity/ThetaWifiStreaming