Question

我正在尝试使用getUserMedia显示从网络摄像头拍摄的MediaStream，并使用可能的任何机制（作为实验）将其转发到远程对等体。我没有直接使用webRTC，因为我想控制原始数据。

我遇到的问题是我的视频元素没有显示任何内容，我也没有收到任何错误。我在Elementary OS（基于Ubuntu 14.04的Linux操作系统）上使用Chrome版本51.0.2704.103（64位）。

作为旁注，如果我将所有blob记录到一个数组中然后创建一个新的blob并将视频的src元素设置为URL.createObjectUrl（blob），它会正确显示视频。

以下是我尝试完成此操作的代码（减去转发，我只是尝试在本地播放）：

var ms = new MediaSource();
var video = document.querySelector("video"); 
video.src = window.URL.createObjectURL(ms);

ms.addEventListener("sourceopen", function() {
    var sourceBuffer = ms.addSourceBuffer('video/webm; codecs="vorbis,vp8"');

    navigator.getUserMedia({video: {width: 320, height: 240, framerate: 30}, audio: true}, function(stream) {
        var recorder = new MediaRecorder(stream);

        recorder.ondataavailable = function(event) {
            var reader = new FileReader();
            reader.addEventListener("loadend", function () {
                var uint8Chunk = new Uint8Array(reader.result);
                if (!sourceBuffer.updating) {
                    sourceBuffer.appendBuffer(uint8Chunk);
                }
                if (video.paused) video.play();
            });
            reader.readAsArrayBuffer(event.data);
        };

        recorder.start(10);
    }, function(error) {
        console.error(error);
    });
}, false);

以下是我在chrome：// media-internal：

中获得的信息

render_id: 147
player_id: 0
pipeline_state: kPlaying
event: WEBMEDIAPLAYER_CREATED
url: blob:http%3A//localhost%3A8080/e5c51dd8-5709-4e6f-9457-49ac8c34756b
found_audio_stream: true
audio_codec_name: opus
found_video_stream: true
video_codec_name: vp8
duration: unknown
audio_dds: false
audio_decoder: OpusAudioDecoder
video_dds: false
video_decoder: FFmpegVideoDecoder

还有日志：

00:00:00 00 pipeline_state  kCreated
00:00:00 00 event   WEBMEDIAPLAYER_CREATED
00:00:00 00 url blob:http%3A//localhost%3A8080/e5c51dd8-5709-4e6f-9457-49ac8c34756b
00:00:00 00 pipeline_state  kInitDemuxer
00:00:01 603    found_audio_stream  true
00:00:01 603    audio_codec_name    opus
00:00:01 603    found_video_stream  true
00:00:01 603    video_codec_name    vp8
00:00:01 604    duration    unknown
00:00:01 604    pipeline_state  kInitRenderer
00:00:01 604    audio_dds   false
00:00:01 604    audio_decoder   OpusAudioDecoder
00:00:01 604    video_dds   false
00:00:01 604    video_decoder   FFmpegVideoDecoder
00:00:01 604    pipeline_state  kPlaying

更新：我尝试将数据发送到节点并使用ffmpeg（fluent-ffmpeg）将其保存到webm文件，我可以正确查看VLC中的文件。

更新2：从节点流回来之后，我得到以下内容：Media segment did not contain any video coded frames, mismatching initialization segment. Therefore, MSE coded frame processing may not interoperably detect discontinuities in appended media.。在做了一些研究之后，似乎必须将webm文件分段才能工作，但是我还没有遇到过为实时流做这个（使用ffmpeg或其他工具）的方法。这里有什么想法吗？

Answer 1

有点晚了，但是您可以这样尝试（在Chrome中）：

<html>

<body>
    <video class="real1" autoplay controls></video>
    <video class="real2" controls></video>

    <script>
        const constraints = {video: {width: 320, height: 240, framerate: 30}, audio: true};

        const video1 = document.querySelector('.real1');
        const video2 = document.querySelector('.real2');

        var mediaSource = new MediaSource();
        video2.src = window.URL.createObjectURL(mediaSource);
        var sourceBuffer;
        mediaSource.addEventListener('sourceopen', function () {
            sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs=opus,vp8');
            console.log(sourceBuffer);
        })

        var isFirst = true;
        var mediaRecorder;
        var i = 0;
        function handleSuccess(stream) {
            video1.srcObject = stream;
            mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm; codecs=opus,vp8' });
            console.log(mediaRecorder.mimeType)
            mediaRecorder.ondataavailable = function (e) {
                var reader = new FileReader();
                reader.onload = function (e) {              
                    sourceBuffer.appendBuffer(new Uint8Array(e.target.result));
                }
                reader.readAsArrayBuffer(e.data);

                if (video2.paused) {
                    video2.play(0);
                }
            }
            mediaRecorder.start(20);
        }

        function handleError(error) {
            console.error('Reeeejected!', error);
        }
        navigator.mediaDevices.getUserMedia(constraints).
            then(handleSuccess).catch(handleError);
    </script>
</body>

</html>

我认为您错过了同时为记录器和sourceBuffer设置相同（受支持的）编解码器的情况。

使用媒体流扩展（MSE）显示getUserMediaStream实时视频

1 个答案: