wami recorder jquery

Ignacio Santolin의 jQuery 3.2.1에 대한 WAMI 레코더

저자에 대해

• https://code.google.com/p/wami-recorder/에서 가져온 원본 코드 (MIT 라이센스에 따라)

• 코드 업데이트, jQuery 조정 및 Ignacio Santolin의 일부 수정 사항

  • 메일 : Ignacio.santolin [at] gmail.com
  • github : https://github.com/isantolin

요구 사항 (테스트)

• PHP : 7.4.0
• jQuery : 3.6.0
• SWFOBJECT : 2.2
• Adobe Flex : 4.6 / Apache Flex 4.16.1
• ffmpeg : 4.2.1 w/ libmp3lame, libvorbis 지원
• 파이썬 : 3.8

문제

이 글을 쓰는 시점에서 대부분의 브라우저는 여전히 WebRTC의 getUsermedia ()를 지원하지 않습니다.

http://caniuse.com/#search=stream

이는 웹 개발자에게 JavaScript를 통해 마이크 액세스를 제공 할 것을 약속합니다. 이 프로젝트는 Flash를 지원하는 브라우저에게 다음으로 가장 좋은 방법을 달성합니다. WAMI 레코더를 사용하면 독점 미디어 서버 소프트웨어를 설치하지 않고 서버에서 오디오를 수집 할 수 있습니다.

해결책

WAMI 레코더는 표준 HTTP 게시물을 통해 가벼운 플래시 앱을 사용하여 클라이언트에서 서버로 오디오를 배송합니다. 마이크 액세스를 허용하는 보안 설정 외에도 전체 인터페이스는 HTML 및 JQuery로 구성 될 수 있습니다.

클라이언트

Flash 앱은 대부분의 중요한 매개 변수와 기능을 JavaScript에 노출시킵니다.

 Wami.startRecording(myRecordURL);
Wami.stopRecording();

Wami.startPlaying(anyWavURL);
Wami.stopPlaying();

존경받는 SWFobject 라이브러리를 사용하여 플래시 앱을 포함시킨 다음 예제 코드와 같은 방식으로 액세스 할 수 있습니다. 다른 브라우저 및 운영 체제에서 플래시 및 JavaScript의 특유성에 대해 알기 위해 우리의 단점 페이지를 살펴보십시오.

플래시 컨텐츠를 수정하려면 Free Flex SDK를 다운로드하여 명령 줄에서 컴파일 할 수 있습니다. 본격적인 IDE의 경우 무료 옵션이 더 제한적입니다. Amazon Mechanical Turk를 통한 학습을위한 오디오 수집과 같은 학업 용도로 무료 교육 Adobe Flash Builder 라이센스를 등록 할 수 있습니다.

서버

브라우저에서 오디오를 수집하려면 자신의 서버를 호스팅 할 필요가 없습니다. 그러나이 프로젝트의 주요 기능은 웹에서 오디오를 수집하기 위해 전체 플래시 미디어 서버를 구성 할 필요가 없다는 것입니다. 선호하는 서버 측 기술을 선택할 수 있습니다. 예를 들어, Apache2 에서이 간단한 PHP 스크립트를 호스팅 할 수 있습니다.

예제/서버/php/writeaudio.php

이 코드는 선택적으로 파일 이름을 지정하기 위해 URL 쿼리 매개 변수를 사용합니다. 적절한 권한으로 PHP 코드는이 NAM과 함께 파일을 디스크로 작성합니다. 개별 사용자, 세션 및 발언을 구별하기 위해 녹음 할 때마다 다른 파일 이름을 전달할 수 있습니다. 브라우저에 저장된 JavaScript 및 쿠키에 생성 된 임의의 숫자를 사용하여 브라우저 재 장전을 통해 사용자를 추적하고 해당 파일의 이름을 지정할 수 있습니다. 위의 예는 보안 문제로 인해 고통 받고 있으며 실제 배포를 위해 수정되어야합니다.

 Wami.startRecording('http://localhost/test.php?name=USER.SESSION.UTTERANCE.wav');

재생 또는 녹음에 사용하는 URL이 SWF 파일을 제공하는 동일한 호스트를 가리키지 않으면 약간의 합병증이 발생합니다. 이 경우 오디오가 제공되거나 녹음되는 호스트의 루트에 CrossDomain.xml을 제공해야합니다.