IE 11 中的 getUserMedia 或 IE 11 中的 MediaStream

Question

我正在尝试借助 IE 11 中的 temasys 插件来使用 getUserMedia 函数。getUserMedia 返回 IE 不支持的 MediaStream 实例。

这是我的示例代码：

import React from 'react'
import { render } from 'react-dom'

class App extends React.Component {
  state = {
    toggle: false,
  }

  componentDidMount() {
    AdapterJS.webRTCReady(isUsingPlugin => {
      console.log('isUsingPlugin....', isUsingPlugin)
      navigator.getUserMedia({
        video: {
          mandatory: {
            maxWidth: 640,
          },
          optional: [
            { maxFrameRate: 120 },
            { minFrameRate: 120 },
          ],
        },
      }, (st) => {
        try {
          this.videoRef.srcObject = st
        }
        catch (eee) {
          console.error(eee)
        }
        this.setState({ toggle: !this.state.toggle })
      }, (error) => {
        console.log('error....', error)
      })
    })
  }
  setRef = ref => {
    this.videoRef = ref
  }

  render() {
    return (
      <div>
        <video ref={this.setRef} autoPlay={true} />
      </div>
    )
  }
}

render(
  <App />,
  document.getElementById('root'),
)

st 是 IE 不支持的 MediaStream 实例。问题来了：

this.videoRef.srcObject = st

我也试过了

this.videoRef.src = window.URL.createObjectURL(st)

这在 IE 中也不起作用。

这里是fiddle。

如何让它在 IE 上运行？任何帮助将不胜感激。

Answer 1

我希望您使用的是 WebRTC 适配器，它有助于标准化 API 以执行这些任务。

Temasys 有自己的适配器，它建立在 WebRTC 适配器之上，并在保持类似界面的同时为其插件添加支持。

因此，IE 上也将支持 MediaStream 和其他东西，因为它是由该适配器库定义的。

WebRTC AdapterJS：https://github.com/webrtc/adapter

Temasys AdapterJS：https://github.com/Temasys/AdapterJS

希望这能解决您的问题。

查看此示例代码以实现：https://github.com/Temasys/Google-WebRTC-Samples/blob/master/src/content/getusermedia/canvas-video/js/main.js