如何使用getusermedia将视频捕获到服务器

在我的应用程序中，我希望用户记录他的视频。然后将视频下载到服务器磁盘。但它正在下载到客户端浏览器。我怎样才能保存2或3分钟的视频到服务器。我为此使用了。我写了如下代码：如何使用getusermedia将视频捕获到服务器

(function(exports) { 
exports.URL = exports.URL || exports.webkitURL; 
exports.requestAnimationFrame = exports.requestAnimationFrame || 
    exports.webkitRequestAnimationFrame || exports.mozRequestAnimationFrame || 
    exports.msRequestAnimationFrame || exports.oRequestAnimationFrame; 

exports.cancelAnimationFrame = exports.cancelAnimationFrame || 
    exports.webkitCancelAnimationFrame || exports.mozCancelAnimationFrame || 
    exports.msCancelAnimationFrame || exports.oCancelAnimationFrame; 

navigator.getUserMedia = navigator.getUserMedia || 
    navigator.webkitGetUserMedia || navigator.mozGetUserMedia || 
    navigator.msGetUserMedia; 

var ORIGINAL_DOC_TITLE = document.title; 
var video = $('video'); 
var canvas = document.createElement('canvas'); 
var rafId = null; 
var startTime = null; 
var endTime = null;  

function $(selector) { 
    return document.querySelector(selector) || null; 
} 

function toggleActivateRecordButton() { 
    var b = $('#record-me'); 
    b.textContent = b.disabled ? 'Record' : 'Recording...'; 
    b.classList.toggle('recording'); 
    b.disabled = !b.disabled; 
} 

function turnOnCamera(e) { 
    e.target.disabled = true; 
    $('#record-me').disabled = false; 

    video.controls = false; 

    var finishVideoSetup_ = function() { 

     setTimeout(function() { 
      video.width = 320; 
      video.height = 240;   
      canvas.width = video.width; 
      canvas.height = video.height; 
     }, 1000); 
    };  

    navigator.getUserMedia({video: true}, function(stream) { 
     video.src = window.URL.createObjectURL(stream); 
     finishVideoSetup_(); 
    }, function(e) {   
     video.src = 'Chrome_ImF.mp4'; 
     finishVideoSetup_(); 
    }); 

    if (navigator.getUserMedia) { 
     navigator.getUserMedia({ audio: true }, onRecordSucces, onFail); 
    } else { 
     console.log('navigator.getUserMedia not to present'); 
    } 


}; 

function record() { 
    var elapsedTime = $('#elasped-time'); 
    var ctx = canvas.getContext('2d'); 
    var CANVAS_HEIGHT = canvas.height; 
    var CANVAS_WIDTH = canvas.width; 
    frames = []; // clear existing frames; 
    startTime = Date.now(); 
    toggleActivateRecordButton(); 
    $('#stop-me').disabled = false; 
    function drawVideoFrame_(time) { 
     rafId = requestAnimationFrame(drawVideoFrame_); 
     ctx.drawImage(video, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); 
     document.title = 'Recording...' + Math.round((Date.now() - startTime)/1000) + 's'; 
     var url = canvas.toDataURL('image/webp', 1); 
     frames.push(url); 
    }; 
    rafId = requestAnimationFrame(drawVideoFrame_); 
    startRecording(); 
}; 

function stop() { 
    cancelAnimationFrame(rafId); 
    endTime = Date.now(); 
    $('#stop-me').disabled = true; 
    document.title = ORIGINAL_DOC_TITLE; 
    toggleActivateRecordButton();  
    embedVideoPreview(); 
}; 


function embedVideoPreview(opt_url) { 
    var url = opt_url || null; 
    var video = $('#video-preview video') || null; 
    var downloadLink = $('#video-preview a[download]') || null; 

    if (!video) { 
     video = document.createElement('video'); 
     video.autoplay = true; 
     video.controls = true;  
     video.style.width = canvas.width + 'px'; 
     video.style.height = canvas.height + 'px'; 
     $('#video-preview').appendChild(video); 

     downloadLink = document.createElement('a'); 
     downloadLink.download = 'capture.webm'; 
     downloadLink.textContent = '[ download video ]'; 
     downloadLink.title = 'Download your .webm video'; 
     var p = document.createElement('p'); 
     p.appendChild(downloadLink); 

     $('#video-preview').appendChild(p); 

    } else { 
     window.URL.revokeObjectURL(video.src); 
    } 



    if (!url) { 
     webmBlob = Whammy.fromImageArray(frames, 1000/60); 
     url = window.URL.createObjectURL(webmBlob); 

    video.src = url; 
    downloadLink.href = url; 
} 

function initEvents() { 
    $('#camera-me').addEventListener('click', turnOnCamera); 
    $('#record-me').addEventListener('click', record); 
    $('#stop-me').addEventListener('click', stop); 
} 

initEvents(); 

exports.$ = $; 

})(window);

当我点击下载链接时，它被下载到用户浏览器。但我想将数据发送到服务器并将其保存在服务器磁盘中。我试图将webmblob数据传递给控制器并进行检索。但它没有访问。我已经写了这样的代码

$.ajax({ 
    url: '/Home/VideoData', 
    type: 'POST', 
    dataType: 'blob', 
    cache: false, 
    data: { 
      data: webmblob 
      }, 
    contentType: "application/json; charset=utf-8", 
    error: function (xhr, status, error) { 
    }, 
    success: function() { 

    }, 
    });

在控制器我定义了诸如

public ActionResult VideoData(string data) 
    { 
     return Json("success", JsonRequestBehavior.AllowGet); 
    }

但数据来像[object blob]控制器。对不起，我的英文。希望你能理解我的问题。我如何将其转换为视频。任何帮助肯定是赞赏。

来源

2013-05-10 Jonathan

你的'contentType'头（在第二块代码中）应该是'video/webm'而不是“application/json”。 – 2016-11-07 15:50:37

您是否找到了解决方案？ – 2018-02-01 02:27:53

MediaStreamRecorder是用于记录getUserMedia（）流的WebRTC API。它允许网络应用程序通过实时音频/视频会话创建文件。

<video autoplay></video> 

<script language="javascript" type="text/javascript"> 
function onVideoFail(e) { 
    console.log('webcam fail!', e); 
    }; 

function hasGetUserMedia() { 
    // Note: Opera is unprefixed. 
    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || 
      navigator.mozGetUserMedia || navigator.msGetUserMedia); 
} 

if (hasGetUserMedia()) { 
    // Good to go! 
} else { 
    alert('getUserMedia() is not supported in your browser'); 
} 

window.URL = window.URL || window.webkitURL; 
navigator.getUserMedia = navigator.getUserMedia || 
         navigator.webkitGetUserMedia || 
          navigator.mozGetUserMedia || 
          navigator.msGetUserMedia; 

var video = document.querySelector('video'); 
var streamRecorder; 
var webcamstream; 

if (navigator.getUserMedia) { 
    navigator.getUserMedia({audio: true, video: true}, function(stream) { 
    video.src = window.URL.createObjectURL(stream); 
    webcamstream = stream; 
// streamrecorder = webcamstream.record(); 
    }, onVideoFail); 
} else { 
    alert ('failed'); 
} 

function startRecording() { 
    streamRecorder = webcamstream.record(); 
    setTimeout(stopRecording, 10000); 
} 
function stopRecording() { 
    streamRecorder.getRecordedData(postVideoToServer); 
} 
function postVideoToServer(videoblob) { 

    var data = {}; 
    data.video = videoblob; 
    data.metadata = 'test metadata'; 
    data.action = "upload_video"; 
    jQuery.post("http://www.foundthru.co.uk/uploadvideo.php", data, onUploadSuccess); 
} 
function onUploadSuccess() { 
    alert ('video uploaded'); 
} 

</script> 

<div id="webcamcontrols"> 
    <button class="recordbutton" onclick="startRecording();">RECORD</button> 
</div>

规格：

http://www.w3.org/TR/mediastream-recording/

你可以得到记录媒体文件，将它发送到服务器。

来源

2013-05-28 05:41:14

webcamstream.record（）; //测试代码时没有这样的方法。它是一个插件还是扩展 – 2013-08-31 09:52:06

@ifeanyiChukwu你看过W3C规范吗？请看看规范，这个Record API还在实施中。 – 2013-09-02 07:23:23

https://dvcs.w3.org/hg/dap/raw-file/default/media-stream-capture/MediaRecorder.html。我认为这个API是8月9日更新的。看了上面的链接后，我注意到没有.record（）方法。它被删除或替换为.start（）方法。 – 2013-09-02 09:57:31

Chrome（49+）和Firefox（30+）现在都支持Media Recorder API，它依靠getUserMedia()访问摄像头。

视频数据被本地存储在一个JavaScript video/webmBlob object，并且可以是：

在<video>元件
下载到客户端计算机作为.webm文件回放
上传（发布）到一个网络服务器进行存储和转换

This article cove请详细说明规格，这里是live demo + GitHub project。规格是avb。在w3c

来源

2016-11-07 15:42:52

如何使用getusermedia将视频捕获到服务器

回答

相关问题