recorder.getBlob() 显示 noe 条目，并在附加 formData 后显示为 null

编程问答 2022-05-31

问题描述

这是页面的代码，每当我尝试录制视频时，视频也在录制并显示在不同的 div 上，但是当我尝试上传时，它在 blob 和 formdata 区域显示空结果.并且不会从这里向另一个页面发送任何数据。

当我下载该视频时，只下载音频而不下载视频。并且我想在一个视频中整体下载和上传

请看一遍这段代码，并检查错误

<body>

<!-- Primary videojs-record instance (video-only) -->
<video id="myVideo" controls autoplay playsinline class="video-js vjs-default-skin"></video>

<!-- Secondary video.js player with MP4 video and no plugins enabled -->

<video id="myPlayer" class="video-js vjs-default-skin"
       data-setup='{"controls": true,"autoplay": false,"preload": "auto"}'>
  <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">

</video>
<button id="btn-start-recording">Start Recording</button>
<button id="btn-stop-recording" disabled>Stop Recording</button>

<form method="post">
  @csrf
<div class="col-md-6" id="recorded"  style="display:none">
            <h2>Recording</h2>
            <video id="recording" width="160" height="120" controls></video><br/><br/>
           
            <a id="downloadLocalButton" class="btn btn-primary">Download</a>
        </div>
  
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/RecordRTC/5.6.1/RecordRTC.js" integrity="sha512-glr08OFPizBs+XVXIpgmVTMdJ+8CRgC1u9GHqUb1fmrmcOkWt7Pe07Gg75dnBjhXMypKlZrHvl9P4kaZWaRLKg==" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-record/4.1.1/videojs.record.min.js" integrity="sha512-DZzoUyCDysKYDMTwkKSJCJGqlrLviqyQQ4lQXBfX4nMCUiLpBB1IVVSqgWVgQb+Wzd7foVmjv7MPlz3Dwpr2PQ==" crossorigin="anonymous"></script>


<script>
var video = document.querySelector('video');

    var myvideo = document.getElementById("myPlayer");
    var recording = document.getElementById("recording");
    var recorded = document.getElementById("recorded");
    var downloadLocalButton = document.getElementById("downloadLocalButton");

function captureCamera(callback) {
    navigator.mediaDevices.getUserMedia({ audio: true,video: true }).then(function(camera) {
        callback(camera);
    }).
    catch(function(error) {
        alert('Unable to capture your camera. Please check console logs.');
        console.error(error);
    });
}

var recorder; // globally accessible

document.getElementById('btn-start-recording').onclick = function() {
  myvideo.play();
    this.disabled = true;
    captureCamera(function(camera) {
        video.muted = true;
        video.volume = 0;
        video.srcObject = camera;

        recorder = RecordRTC(camera,{
            type: 'video'
        });

        recorder.startRecording();

        // release camera on stopRecording
        recorder.camera = camera;

        document.getElementById('btn-stop-recording').disabled = false;
    });
};
    

function stopRecordingCallback() {
    video.src = video.srcObject ;
    video.muted = false;
    video.volume = 1;

    const blob = recorder.getBlob();
  
    // const bb = recorder.recordedData;

    recording.src = URL.createObjectURL(blob);
    recorded.style.display = "block";
   downloadLocalButton.href = URL.createObjectURL(blob);
   downloadLocalButton.download = "RecordedVideo.webm"; 
    recorder.camera.stop();
    var file = new File([blob],'filename.webm',{
                 type: 'video/webm'
             });
      console.log(blob);
    // blob.name = 'recording.webm';
     var serverUrl = "{{ url('/videostore') }}";
    var formData = new FormData();
    formData.append('file',file);
    
     console.log(blob.entries());

    console.log('upload recording ' + 'false.webm' + ' to ' + serverUrl);
    //   xhr('/videostore',formData,function(fName)
    //   {
    //     console.log("Video Successfully Uploaded");
    //   });



    // // start upload

$.ajax({
 type: "POST",method: 'POST',url: "{{ url('/videostore') }}",processData: false,cache: false,headers : { 
        'Content-Type': 'application/json','Accept': 'application/json','X-CSRF-TOKEN': $('Meta[name="csrf-token"]').attr('content'),},data: formData,success: function(resp) {

            console.log(resp);


}
                  
                  });

                    

}

document.getElementById('btn-stop-recording').onclick = function() {
  myvideo.pause();
    this.disabled = true;
   
   
     recorder.stopRecording(stopRecordingCallback);
};
</script>

<footer style="margin-top: 20px;"><small id="send-message"></small></footer>
<script src="https://www.webrtc-experiment.com/common.js"></script>

</body>
</html>

解决方法

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

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

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

laravellaravelrecordrtcvideovideovideojs-record