HTML5 웹페이지 녹화 및 서버 업로드는 PC, Android, IOS WeChat 기능을 지원합니다.

웹 기반 채팅 인터페이스를 만들려면 이모티콘, 사진, 업로드된 파일이 있어야 합니다. 동영상은 잊어버리세요. 음성은 여전히 ​​필요합니다.

이 문서에서는 웹 페이지에서 GitHub의 Recorder를 사용하여 온라인으로 녹음하고 서버에 업로드하는 내용을 기록합니다.

이 샘플 코드는 PC, Android 및 IOS(Safari 전용)에서의 사용을 지원합니다. RecordApp을 사용하는 경우 IOS(WeChat 브라우저, 애플릿)에 대한 지원을 추가할 수 있습니다.

코드를 수천 번 읽는 것보다 한 번 실행해 보는 것이 더 좋습니다. 새 HTML 파일을 만들고 다음 세 가지 코드를 파일에 복사한 다음 브라우저를 두 번 클릭하여 테스트해 보세요.

 <!-- 먼저 js 녹음 라이브러리를 로드합니다. 참고: 사용하려면 js를 로컬로 복제해야 합니다. --><meta charset=utf-8 /><script src=https://xiangyuecn.github.io/Recorder/recorder. mp3.min.js></script><input type=button onclick=startRec() value=녹화 시작><hr><input type=button onclick=playRec() value=종료 및 재생><입력 유형=버튼 onclick=uploadRec() value=종료 및 업로드><script>var rec;function startRec(){ rec=Recorder();//기본 구성 사용, mp3 형식//열기 관련 리소스를 얻기 위한 마이크 승인 rec.open(function(){ //녹음 시작 rec.start(); },function(msg,isUserNotAllow){ //사용자가 권한을 거부했거나 브라우저가 경고를 지원하지 않습니다((isUserNotAllow? 사용자가 권한을 거부했습니다. :)+기록할 수 없습니다:+msg);};</script>

 <script>function uploadRec(){ //녹화를 중지하고 녹음 파일 blob 바이너리 객체를 가져옵니다. 원하는 대로 무엇이든 할 수 있습니다. rec.stop(function(blob,duration){ /* 다음으로 읽을 수 있는 blob 파일 객체 FileReader 콘텐츠 또는 FormData를 사용하여 업로드합니다. 이 예에서는 바이너리 파일이 직접 업로드됩니다. 일반 application/x-www-form-urlencoded 양식 업로드의 경우 github*/ var form=new FormData(); form.append(upfile,blob,recorder.mp3); //일반 폼 폼과 다르지 않습니다. 백엔드는 upfile 매개변수로 파일을 수신하며 파일 이름은 Recorder.mp3입니다. //ajax를 사용하여 직접 업로드합니다. xhr=새 XMLHttpRequest(); xhr.open(POST, http://baidu.com/, 업로드 주소로 변경);//이 가짜 주소는 콘솔 네트워크에서 요청 데이터와 형식을 볼 수 있으며 요청 결과는 관련이 없습니다. xhr.onreadystatechange=function ( ){ if(xhr.readyState==4){ Alert(xhr.status==200?업로드 성공: 테스트하려면 브라우저 콘솔을 먼저 열고 다시 녹화하세요. 네트워크 탭에서 업로드를 볼 수 있습니다. 데이터를 요청하고 포맷함) } } xhr.send(form); },function(msg){ 경고(녹음 실패:+msg) });};</script>

 <script>function playRec(){ //녹화를 중지하고, 녹음 파일 Blob 바이너리 객체를 가져오고, 원하는 대로 수행하세요. rec.stop(function(blob,duration){ var audio=document.createElement(audio); audio.controls= true; document.body.appendChild(audio); //Blob 오디오 URL을 얻는 것은 매우 간단합니다. audio.src=URL.createObjectURL(blob); },function(msg){ 경고(녹음 실패:+msg) });};</script>

------------------------------------- ----------------------------------

GitHub 주소: https://github.com/xiangyuecn/Recorder

온라인 테스트: 테스트하려면 여기를 클릭하세요.

Recorder는 HTML5 녹음에 사용되며 Tencent Android X5 커널(QQ, WeChat)을 포함하여 getUserMedia를 구현한 대부분의 모바일 및 PC 브라우저를 지원하는 순수 js 라이브러리입니다.

녹음 출력은 기본적으로 mp3 형식이며 wav 형식은 선택 사항입니다(이 형식의 녹음 파일은 매우 큽니다). ogg, webm 및 amr 형식에 대한 지원이 제한됩니다(해당 인코더가 있는 경우). ).

컴팩트: 녹음 파일 크기에 대한 특별한 요구 사항이 없으면 녹음 코어 + wav 인코더를 사용하면 됩니다. 소스 코드는 300줄 미만이고 압축된 Recorder.wav.min.js는 4kb 미만입니다. . MP3는 lamejs를 사용하여 인코딩되며, 압축된 Recorder.mp3.min.js는 gzip을 켠 후 54kb입니다.

IOS(11. 브라우저, 미니프로그램 웹뷰)에서는 Safari만이 getUserMedia를 지원하므로 RecordApp 역시 하이브리드 앱에 대한 더 나은 지원을 제공합니다.

RecordApp에서는 JsSDK 녹음 지원을 제공하기 위해 WeChat 공개(구독) 계정이 필요하므로 개발은 더 어렵지만 더 많은 환경을 지원합니다. 레코더는 구입 후 바로 사용할 수 있습니다. 어떤 레코더를 사용할지는 아래 표를 참조하십시오.

* RecordApp 소스 코드는 xiangyuecn/Recorder/app-support-sample 디렉터리에 있는 github에서 확인할 수 있습니다.

위 내용은 에디터가 소개한 HTML5 웹페이지 녹화 및 업로드입니다. PC, Android, IOS WeChat 기능을 지원하니 궁금하신 사항이 있으시면 메시지를 남겨주세요. 편집자가 시간에 맞춰 답변을 드릴 것입니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!

이 글이 도움이 되셨다면 재인쇄하셔도 좋고, 출처를 밝혀주시면 감사하겠습니다!