解决captureStream跨域问题

解决 video 获取媒体流的时候遇到的跨域问题

现有需求需要实现一个功能 : 需要把用户上传的视频文件在前端转为媒体流再转推出去，以实现用户使用自定义视频进行播放转推

由于用户上传的视频文件与实际页面在不同的三级域名下，在使用 captureStream API 是遇到如下报错

DOMException: Failed to execute 'captureStream' on 'HTMLMediaElement': Cannot capture from element with cross-origin data

在 HTML5 中，一些 HTML 元素提供了对 CORS 的支持，例如<audio>，<link>，<img>，<video>，<script>均有一个跨域属性 (crossOrigin property)，它允许你配置元素获取数据的 CORS 请求。

因此，上面的跨域问题可以这么处理：

1	<video crossorigin="anonymous" ></video>

crossorigin 属性值可以是以下值

关键字	描述
anonymous	对此元素的 CORS 请求将不设置凭据标志。
use-credentials	对此元素的 CORS 请求将设置凭证标志；这意味着请求将提供凭据。
“”	设置一个空的值，如 crossorigin 或 crossorigin=””，和设置 anonymous 的效果一样。

即使是无效的关键字和空字符串也会被当作 anonymous 关键字使用。