我需要将 srcObject 分配给自身以显示 WebRTC 视频流答案

【问题标题】：I need to assign srcObject to itself to get a WebRTC video stream to show up我需要将 srcObject 分配给自身以显示 WebRTC 视频流
【发布时间】：2019-06-14 00:51:30
【问题描述】：

设置：我有一个使用 WebRTC（基于 GStreamer）流式传输一个视频流的 C++ 程序。在客户端，Chrome（最初使用的是 firefox，但后来我发现 webrtc-internals 可以很好地调试问题）。

应用程序尝试使用 WebSocket 反复连接到 C++ 程序。成功连接后，我将生成的 MediaSource 分配给视频的 srcObject 属性。结果是一个空白屏幕。但是，如果我进入控制台并手动将 srcObject 分配给它自己，那就是

var elem = document.getElementById("stream0")
elem.srcObject = elem.srcObject

视频突然出现。

在下面的代码中，AsyncVideoStream 类处理整个 webrtc 连接和重新连接处理。我认为这与这里无关，因为 chrome webrtc-internals 统计数据清楚地表明，即使没有显示任何内容，webrtc 连接也已成功建立（我得到一个与发件人匹配的解码 fps 数）。

HTML 非常简单：

<div class="video-stream-container-fullwidth">
    <video class='video-stream' id="stream0" autoplay></video>
</div>

javascript（实际上是打字稿）：

import AsyncVideoStream from './video_stream'

var config = { 'iceServers': [] };
var vidstreams = {}

document.addEventListener('DOMContentLoaded', () => {
    vidstreams[0] = new AsyncVideoStream('ws://localhost:57000/ws', config)

    var streamer = vidstreams[0];
    var id = `stream0`
    streamer.onVideoStream((stream) => {
        var elem = document.getElementById(id) as any;
        elem.srcObject = stream;
    })
})

document.addEventListener('beforeunload', () => {
    vidstreams[0].dispose();
})

【问题讨论】：

可能与受限自动播放策略有关。你可以试试<video class='video-stream' id="stream0" autoplay="true" muted="true" playsinline></video> 吗？ muted 属性可能是关键。
确实如此。似乎与控制台的交互被视为“用户交互”只需将其添加为答案......然后我可以将问题标记为已解决。

标签： javascript html5-video webrtc

【解决方案1】：

由于限制自动播放政策，它似乎无法正常工作。

以下作品（静音属性是关键）：

<video class='video-stream' id="stream0" autoplay="true" muted="true" playsinline></video>

正如@sylvain.joyeux 发现的那样，与控制台的交互被视为“用户交互”。

【讨论】：