标签: recordrtc

我正在使用内置的MediaRecorder替换RecordRTC,以便在Chrome中录制音频.然后在带有音频api的程序中播放录制的音频.我无法使audio.duration属性工作.它说

如果视频(音频)是流式传输且没有预定义长度,则返回"Inf"(无限).

使用RecordRTC,我不得不使用ffmpeg_asm.js将音频从wav转换为ogg.我的猜测是在RecordRTC设置预定义音频长度的过程中的某个地方.有没有办法使用MediaRecorder设置预定义的长度？

我正在处理一项记录 WebRTC 视频对话然后将其转换为文本的任务。

为了录制音频，我使用RecordRTC，而对于语音识别，我想使用 Web Speech API。

是否可以将录制的音轨传递给 Web Speech API，然后从中获取文本？如果可能的话 - 有没有关于它的文章？

我只能找到有关 Google Speech API 的文章，但此 API 不是免费的...

如果我使用以下代码录制画布动画：

        streamInput = parent.document.getElementById('whiteboard');
        stream = streamInput.captureStream();
        const recorder = RecordRTC(stream, {
             // audio, video, canvas, gif
            type: 'video',
            mimeType: 'video/webm',
            recorderType: MediaStreamRecorder,
            disableLogs: false,
            timeSlice: 1000,
            ondataavailable: function(blob) {},
            onTimeStamp: function(timestamp) {},
            bitsPerSecond: 3000000,
            frameInterval: 90,
            frameRate: 60,
            bitrate: 3000000,
        });

    recorder.stopRecording(function() {
            getSeekableBlob(recorder.getBlob(), function(seekableBlob) {
                url = URL.createObjectURL(recorder.getBlob());
                $("#exportedvideo").attr("src", url);
                $("#exportedvideo").attr("controls", true);
                $("#exportedvideo").attr("autoplay", true);
            })                                      
        });

视频播放正常，我可以在 chrome/edge/firefox 等中找到它。

当我使用以下代码下载视频时：

getSeekableBlob(recorder.getBlob(), function(seekableBlob) {
        var file = new File([seekableBlob], "test.webm", {
            type: 'video/webm'
        });
        invokeSaveAsDialog(file, file.name);
}

视频下载和播放正常，搜索栏更新正常。

如果我然后将搜索栏移动到任何位置，只要我移动它，我就会收到一条媒体播放器消息：无法播放，无法播放，因为该项目的文件格式不受支持。检查商店以查看此商品是否在此处可用。0xc00d3e8c …

我在将画布录制为 mp4 文件格式的视频时遇到问题。我设法使用 RecordRTC 将画布记录为 webm 格式。当我尝试提供 mimetype: video/mp4 时，它给出了一个错误，无法记录为 mimetype: video/mp4。

 var canvas = document.getElementById('canvas');
            var canvasStream = canvas.captureStream();

            var finalStream = new MediaStream();
            audioStream.getAudioTracks().forEach(function(track) {
                finalStream.addTrack(track);
            });
            canvasStream.getVideoTracks().forEach(function(track) {
                finalStream.addTrack(track);
            });

            var recorder = RecordRTC(finalStream, {
            type: 'video',
            mimeType: 'video/mp4'
            });

            recorder.startRecording();

上面的代码适用于 webM 格式。我看不到将 HTML5 画布录制为 mp4 格式的视频的方法。我只需要将它从 webm 转换为 mp4。这需要很多时间。有没有什么办法可以直接把canvas录制成mp4而不经过先制作webm然后再转换成mp4的过程？

谢谢。

我正在使用 RecordRTC 库来录制屏幕和音频。我需要 mp4 容器中的 h264 编解码器，但通过我的设置，我在 matroska 容器中获得 h264 编解码器。我正在使用以下代码：

this.captureUserMedia(screenConstraints, function(screenStream) {
            that.captureUserMedia(audioConstraints, function(audioStream) {
                var arrOfStreams = [screenStream, audioStream];

                var options = {
                    type: 'video',
                    mimeType: 'video/webm\;codecs=h264', // or video/webm\;codecs=h264 or video/webm\;codecs=vp9
                    audioBitsPerSecond: 192000,
                    recorderType: MultiStreamRecorder,
                    video: {
                        width: desiredWidth,
                        height: desiredWidth / screenAspectRatio
                    }
                };

                that.recorder = RecordRTC(arrOfStreams, options);

                that.recorder.startRecording();

                that.btnStopRecording.onclick = function () {
                    console.log("recording stopped");
                    that.recorder.stopRecording(that.postFiles.bind(that));
                }
            });
        });
    }

RecordRTC 库可以吗？这是项目 github 上的问题，但他们推荐了我使用过的选项。是使用ffmpeg从matroska重新打包为mp4的唯一方法吗？

我正在开发一个应用程序，它基本上是一个可以嵌入交互式模拟的绘图应用程序。

我正在尝试添加用于在网站本身中录制屏幕和音频的选项，以便教师可以在线创建课程。实现这一目标的最佳方法是什么？我在互联网上搜索了很多，发现Muaz Khan 的 recordRTC是一个非常好的选择。但我是个菜鸟，我觉得里面有太多的选择，我不确定哪个对我来说是最好的选择。

我还阅读了有关 webRTC 的内容。是否可以使用它进行屏幕录制？我不介意使用 chrome 扩展，前提是我应该可以选择用它记录页面的特定部分。请帮忙....

我正在使用 RecordRTC 并尝试每 1 分钟保存一次视频，但为了保存视频，我必须调用 stopRecording()。例如：

function postFiles() {
            var blob = recorder.getBlob();
            // getting unique identifier for the file name
            var fileName = generateRandomString() + '.webm';

            var file = new File([blob], fileName, {
                type: 'video/webm'
            });

            xhr('/uploadFile', file, function(responseText) {
                    console.log(responseText);
            });

            if(mediaStream) mediaStream.stop();
        }

stopRecording(postFiles);

我想在不停止录制的情况下保存视频。

我想以2秒的间隔记录本地和远程流并用Ajax上传到服务器。但问题是，ondataavailable 方法被调用了两次，因此同一个视频被上传到服务器两次。第一个视频可以正常播放，而其余视频要么已损坏，要么非常小（不到一秒）。所有视频的大小几乎相同！

我也尝试过 MediaRecorder API，但问题是一样的。我尝试过 5 秒的间隔，但仍然没有成功！

这就是我获取本地流的方式：

navigator.mediaDevices.getUserMedia({
    video: false,
    audio: true
}).then(function (myStream) {
    localStream = myStream;

    localStream.getTracks().forEach(function (track) {
        yourConn.addTrack(track, localStream);
    });
}).catch(function (error) {
    streamAdded = false;
    console.warn('Could not detect microphone');
    return false;
});

这就是我执行录音的方式：

yourConn.ontrack = function (e) {
   remoteVideo.srcObject = e.streams[0];

   let recorder = RecordRTC([localStream, e.streams[0]], {
      mimeType: 'video/webm;codecs=h264',
      type: 'video',
      timeSlice: 5000,
      ondataavailable: function(blob) {
        uploadBlob(blob);
      },
   });

   recorder.startRecording();
}

上传Blob函数：

var formData = new FormData();
formData.append('recorded_file', mp4File);

$.ajax({
    url: myURL,
    data: formData, …

我试图让blob成为视频元素的src.我的代码工作正常时:

videoRef.src = URL.createObjectURL(blob)

但不推荐使用'src'和'URL.createObjectURL'来代替使用'srcObject'https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

和https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

我的问题是如何简单地将blob文件添加到srcObject中,如下所示:

videoRef.srcObject = blob

当我尝试上面的代码时,我得到错误:"TypeError:无法在'HTMLMediaElement'上设置'srcObject'属性:提供的值不是'MediaStream'类型."

我如何不使用已弃用的videoRef.src并将blob直接应用于videoRef.srcObject？或者blob类型是否可以使用src,只有流不能使用src？

是否有一些公式（例如每秒帧数X分辨率）来确定bitsPerSecond？我无法理解我应该使用什么值。我想指定 720p、1080p 和 4k 视频的 bitsPerSecond。我不确定文件类型是否重要，但这很可能适用于 webm 或 mp4。我担心我的某些文件过大，而另一些文件我没有使用足够的位，导致视频故障。

我确实找到了这里列出的值.... https://restream.io/blog/what-is-a-good-upload-speed-for-streaming/但即便如此，我也不知道如何转换。

我正在使用 RecordRTC https://github.com/muaz-khan/RecordRTC，它是 MediaRecorder 的包装器。

recorder = RecordRTC(camera, {
       recorderType: MediaStreamRecorder,
       mimeType: encoding_options,
       bitsPerSecond: bits_per_second,
       timeSlice: 15000,
       getNativeBlob: true
   });

我想过做这样的事情吗？但我使用的值太大还是太小？

var bits_per_second = 5000000;

if (current_camera_height > 2100){
  bits_per_second = 16777216
}

if (current_camera_height > 1000){
  bits_per_second = 7500000
}