1. 程式人生 > >JS視訊和音訊錄製

JS視訊和音訊錄製

<body>
    <video autoplay></video>
    <a download="media" class="downloadButton">下載</a>
    <button class="recorderControl">錄製</button>
</body>
<script>
    var promise= navigator.mediaDevices.getUserMedia({video:true});
    promise.then(function(stream){
        var video=document.querySelector("video");
        video.src = URL.createObjectURL(stream);
        var recorder=new MediaRecorder(stream);
        var recorderControl=document.querySelector(".recorderControl"); 
        recorderControl.onclick=function(){
            this.textContent=="錄製"?video.play():video.pause();
            this.textContent=="錄製"?recorder.start():recorder.stop();
            this.textContent=this.textContent=="錄製"?"停止":"錄製";
            };
        var buffers=[];
        recorder.ondataavailable=function(event){
            buffers=event.data;
        }
        var downloadButton=document.querySelector(".downloadButton");
        recorder.onstop=function(){
            var url=URL.createObjectURL(buffers);
            downloadButton.click();
            buffers=null;
        };
     }).catch(function(error){
        console.log(error);
     });
    // 音訊同理,只需改變標籤即可。
</script>