IE 11中的getUserMedia或IE 11中的MediaStream

Question

我试图在IE 11的getUserMedia插件的帮助下使用temasys函数.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适配器之上，并在保留类似接口的同时为其插件添加支持。

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

的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