相关疑难解决方法(0)

我收到错误消息..

未捕获(在promise中)DOMException:play()失败,因为用户没有先与文档交互.

..当尝试使用Chrome版本66在桌面上播放视频时.

我找到了一个在网站上自动开始播放的广告,但使用以下HTML:

<video
    title="Advertisement"
    webkit-playsinline="true"
    playsinline="true"
    style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
    src="http://ds.serving-sys.com/BurstingRes/Site-2500/Type-16/1ff26f6a-aa27-4b30-a264-df2173c79623.mp4"
    autoplay=""></video>

那么,绕过Chrome的V66的自动播放拦截真的那么容易,因为只需添加webkit-playsinline="true",playsinline="true"和autoplay=""属性的<video>元素？对此有任何负面影响吗？

我正在制作一个简单的项目，在 React 中使用 WebRTC 和 typescript。

我正在关注MDN HTMLMediaElement.captureStream()。

const vid: HTMLVideoElement | null = document.querySelector("video");
if (vid) {
   vid.captureStream();
}

.
.
.

<video id="myVid"></video>

但我收到这个错误

Property 'captureStream' does not exist on type 'HTMLVideoElement'.ts(2339)

我什至尝试过，

const vid: HTMLMediaElement | null = document.querySelector("video");

我究竟做错了什么？？

编辑

我试过

const videoCont = useRef<HTMLVideoElement>(null);

var URL = window.URL || window.webkitURL
const fileURL = URL.createObjectURL(e)
if (videoCont.current) {
         videoCont.current.src = fileURL;
         videoCont.current.play = async () => {
              const mediaStream = videoCont.current?.captureStream();
       }
   }

还是同样的错误， …

我有这个简单的脚本，我在 webRTC 文档中找到了我尝试运行它，但似乎我错过了一些东西

const leftVideo = document.getElementById('leftVideo');
const rightVideo = document.getElementById('rightVideo');

leftVideo.addEventListener('canplay', () => {
const stream = leftVideo.captureStream();
rightVideo.srcObject = stream;
});

我在检查流捕获时收到此错误 Uncaught DOMException: Failed to execute 'captureStream' on 'HTMLMediaElement': 无法从 HTMLVideoElement.leftVideo.addEventListener 处的跨源数据元素捕获这是我的 index.html

<video id="leftVideo" playsinline controls loop muted>
    <source src="test1.webm" type="video/webm"/>
    <p>This browser does not support the video element.</p>
</video>

<video id="rightVideo" playsinline autoplay></video>