Question

我为录像和上传编写了html 5代码。单击开始按钮时，将产生javascript错误。 “TypeError：webcamstream.record不是函数streamRecorder = webcamstream.record（）;” “TypeError：streamRecorder未定义streamRecorder.getRecordedData（postVideoToServer）;”

它仅适用于mozilla浏览器。请帮助我......代码

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">

var streamRecorder;
var webcamstream;

function enter()
{

if (navigator.mozGetUserMedia) { 
   navigator.myGetMedia=navigator.mozGetUserMedia;
   navigator.myGetMedia({video: true}, connect, error); 
} 
else { 
   alert("N");
}

function connect(stream) 


{



    var video = document.getElementById("my_video");
    video.src = window.URL ? window.URL.createObjectURL(stream) : stream;
    webcamstream = stream;
    video.play();



  }

  function error(e) { console.log(e); }



}

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

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

    function onUploadSuccess() {
        alert ('video uploaded');
    }

  </script>

<title>Untitled Document</title>
</head>

<body>
<canvas width="640" height="480" id="c"></canvas>
<input type="button" value="START CAMERA" onClick="enter()"/>
<input type="button" value="START RECORD" onClick="startRecording()"/>
<input type="button" value="STOP RECORD" onClick="stopRecording()"/>
<video id="my_video" width="640" height="480"/>

</body>
</html>

Answer 1

根据getMediaStream API的规范草案，没有名为record（）W3C mediacapture draft的方法

您可以尝试通过在画布上绘制每个帧并使用新的File System API将其保存到临时图像文件来实现录制。也许我稍后会为你提供一个例子。它已经使用Webkit-Engine完成。见here

用于视频录制的HTML 5媒体流记录功能

1 个答案: