Web RTC录视频
Posted 安筱雨
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web RTC录视频相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> let recorder function start() { let videoTarget = document.getElementById(‘audio‘); // navigator.mediaDevices.getUserMedia({audio: true, video: {width: 400, height: 600}}) //getDisplayMedia 录屏 navigator.mediaDevices.getUserMedia({audio: true, video: {width: 400, height: 600}}) .then((stream) => { recorder = new MediaRecorder(stream); console.log(recorder,‘recorder‘); console.log(stream,‘stream‘); videoTarget.srcObject = stream; videoTarget = (...arg) => { console.log(arg); } recorder.ondataavailable = (event) => { let url = URL.createObjectURL(event.data); let link = document.createElement("a"); console.log(url,event,‘event‘) window.location.href = url link.target = "_blank"; link.href = url; link.click(); } recorder.start(); }); } function stop() { console.log(‘结束录像‘); recorder.stop(); } </script> </head> <body> <video id="audio" width="400" height="600" controls autoplay></video> <input onclick="start()" type="button" value="开始" /> <input onclick="stop()" type="button" value="结束" /> </body> </html>
录完会返回一个blob对象，可通过 formdata上传给后台
以上是关于Web RTC录视频的主要内容，如果未能解决你的问题，请参考以下文章
RTC月度小报5月 |教育aPaaS灵动课堂升级抢先体验VUE版 Agora Web SDK声网Agora与HTC达成合作