Javascript 用于视频录制的HTML 5媒体流“录制时发布”功能_Javascript_Html

Javascript 用于视频录制的HTML 5媒体流“录制时发布”功能

javascript html

Javascript 用于视频录制的HTML 5媒体流“录制时发布”功能,javascript,html,Javascript,Html,我编写了HTML5代码用于视频录制和上传。当点击开始按钮时，它将产生一个javascript错误。 “类型错误：webcamstream.record不是函数streamRecorder=webcamstream.record（）；” “类型错误：streamRecorder是未定义的streamRecorder。getRecordedData（postVideoToServer）；” 它只适用于mozilla浏览器。请帮助我…代码是 <!DOCTYPE html> <html

我编写了HTML5代码用于视频录制和上传。当点击开始按钮时，它将产生一个javascript错误。 “类型错误：webcamstream.record不是函数streamRecorder=webcamstream.record（）；” “类型错误：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>


流量记录仪；
网络摄像机流；
函数enter（）
{
如果（navigator.mozGetUserMedia）{
navigator.myGetMedia=navigator.mozGetUserMedia；
myGetMedia（{video:true}，connect，error）；
} 
否则{
警报（“N”）；
}
函数连接（流）
{
var video=document.getElementById（“我的视频”）；
video.src=window.URL？window.URL.createObjectURL（流）：流；
网络摄像机流=流；
video.play（）；
}
函数错误（e）{console.log（e）；}
}
函数startRecording（）
{
警报（“启动”）；
streamRecorder=webcamstream.record（）；
设置超时（停止记录，10000）；
}
函数stopRecording（）
{
警报（“停止”）；
流记录器.getRecordedData（postVideoToServer）；
}
函数postVideoToServer（videoblob）{
警报（“开始上传视频”）；
变量数据={}；
data.video=videoblob；
data.metadata='测试元数据'；
data.action=“上传视频”；
jQuery.post（“http://www.kongraju.in/uploadvideo.php“、数据、onUploadSuccess）；
}
函数onUploadSuccess（）{
警报（“视频上传”）；
}
无标题文件

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

您可以尝试通过在画布上绘制每个帧并使用新的文件系统API将其保存到临时图像文件来实现录制。也许我以后可以给你举个例子。它已经使用Webkit引擎完成。请参见

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

我不认为

MediaStream.record（）

的

MediaStreamRecorder

已经在任何浏览器中实现。我不认为

MediaStream.record（）的MediaStreamRecorder

已在任何浏览器中实现。OP尝试使用的

MediaStrea.record

方法被指定为

MediaStream

的扩展，但是还没有浏览器实现此API。但是我知道如何在您的案例中向服务器发送带图像的音频。OP尝试使用的

MediaStrea.record

方法被指定为

MediaStream

的扩展，但是还没有浏览器实现此API。但是我知道如何在您的案例中向服务器发送带图像的音频。