保存视频给黑屏

问题描述

我正在尝试保存我的视频，但由于某种原因，我一直收到黑色视频，这可能是为什么 我已在下面附上我的代码以供参考 我将“状态记录”和“停止记录”按钮分开放置，以便可以在以后绑定其他事件监听器使用

我将如何保存视频

jQuery上面是使用jquery3初始化的

           <video autoplay id="videoElement"></video>
                <br>
            <button style="height: 90px;width: 200px" id="start">Start</button>
            <button style="height: 90px;width: 200px" id="stop">Stop</button>
        
            <a href="" id="download">download</a>
        
        
   <script>     
        $(function(){
            var sessionkey = ""
            var currentgesture = 4;
            var key = "";
        
         var width = 640;    // We will scale the photo width to this
          var height = 0;     // This will be computed based on the input stream
          var streaming = false;
          var constraints = {
                video: true,audio: false,width: {exact: 640},height: {exact: 480},frameRate: { ideal: 10,max: 12 } 
            }
        
         const video = document.querySelector('video');
           
        
        
        //Check For WebCam
        function hasGetUserMedia() {
          return !!(navigator.mediaDevices &&
            navigator.mediaDevices.getUserMedia);
        }
        
        if (hasGetUserMedia()) {
          runVideo()
        } else {
          alert('Not Supported! Please use another browser');
        }
        
        var chunks = []
         ;
        var mediaRecorder
        function runVideo(){
        navigator.mediaDevices.getUserMedia(constraints).
          then(async (stream) => {
            
           mediaRecorder= new MediaRecorder(stream,{ mimeType: 'video/webm'})
        
            video.srcObject = stream;
            
        
        
        
           mediaRecorder.onstart = function(e) {
               chunks = []
            };
            mediaRecorder.ondataavailable = function(e) {
           
            chunks.push(e.data);
             console.log(chunks)
            };
             mediaRecorder.onstop = function(e) {
             var blob = new Blob(chunks,{ 'type' : 'video/webm' });
             console.log(blob)
                downloadLink = document.getElementById('download');
              downloadLink.href = URL.createObjectURL(blob);
              downloadLink.download = 'acetest.webm';
                // socket.emit('radio',blob);
            };
            console.log(mediaRecorder)
          });
        }
        
        
        $("#start").click(function(){
         mediaRecorder.start()
         
        })
        $("#stop").click(function(){
        
             mediaRecorder.stop()
            
        })
        </script>  
       

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）