标签: capturestream

我正在制作一个简单的项目，在 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();
       }
   }

还是同样的错误， …

我正在尝试从动态创建的视频元素捕获流。当我获取视频元素并尝试 videoElement.captureStream() 时，Firefox 返回videoElement.captureStream 不是一个函数，但相同的代码可以在 Chrome 上运行。问题似乎 Firefox 在动态创建视频元素方面存在问题。我尝试突变观察者来检测新添加的视频元素并访问 captureStream 方法，但没有运气我发布了下面的代码示例（我正在使用 adapter.js for WebRTC https://webrtc.github.io/adapter/adapter-latest .js )

(function (win) {

    var listeners = [],
        doc = win.document,
        MutationObserver = win.MutationObserver || win.WebKitMutationObserver,
        observer;

    function ready(selector, fn) {
        listeners.push({
        selector: selector,
        fn: fn
        });
        if (!observer) {
        observer = new MutationObserver(check);
        observer.observe(doc.documentElement, {
            childList: true,
            subtree: true
        });
        }
        check();
    }

    function check() {
        for (var i = 0, len = listeners.length, listener, elements; i < len; i++) { …