WebGL实时视频(1) CORS问题

最新推荐文章于 2024-08-16 17:21:59 发布

llhswwha

最新推荐文章于 2024-08-16 17:21:59 发布

阅读量1.8k

点赞数 2

分类专栏： WebGl Unity

本文链接：https://blog.csdn.net/llhswwha/article/details/102458060

版权

Unity 同时被 2 个专栏收录

26 篇文章 3 订阅

订阅专栏

WebGl

8 篇文章 4 订阅

订阅专栏

从文件打开weggl网页，file:///C:/Users/Administrator/Desktop/media(1)/index.html，

输入摄像头的rtsp地址

结果：

Access to video at 'rtsp://admin:admin12345@192.168.1.56:554/cam/realmonitor?channel=1&subtype=0' from origin 'file://' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

把文件放到iis中，在浏览器中打开，还是rtsp，结果：

Access to video at 'rtsp://admin:admin12345@192.168.1.56:554/cam/realmonitor?channel=1&subtype=0' from origin 'http://localhost' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

测试一下本地搭建的rtmp服务器上的视频能否播放

1.http://192.168.1.16:9099/live/download/1.mp4，可以

2.http://127.0.0.1:9099/live/download/1.mp4，可以

3.1.mp4，可以(在网页所在目录，现在是根目录，放上1.mp4文件)

4.mp4/1.mp4，可以(在网页所在目录，现在是根目录，创建mp4文件夹，放上1.mp4文件)

5.http://127.0.0.1:9099/live/a.m3u8，不行，Audio/Video not supported (errorcode=4)，Uncaught (in promise) DOMException

这点挺奇怪的，和之前研究hls时的网页播放相反的

<html lang="en">
    <head>
        <meta charset=utf-8/>
    </head>
    <body>
 
        <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="video"></video>
<script>
  if(Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    //hls.loadSource('http://127.0.0.1:9099/live/a.m3u8');//可以
    //hls.loadSource('http://192.168.1.16:9099/live/a.m3u8');//可以
    hls.loadSource('http://127.0.0.1:9099/live/download/1.mp4');//不行，没反应
    //hls.loadSource('http://192.168.1.16:9099/live/download/1.mp4');//不行

    //hls.loadSource('rtsp://admin:admin12345@192.168.1.56:554/cam/realmonitor?channel=1&subtype=0');
    //不行，hls.js@latest:1 Access to XMLHttpRequest at 'rtsp://admin:admin12345@192.168.1.56:554/cam/realmonitor?channel=1&subtype=0' from origin 'http://192.168.1.16' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
  });
 }
</script>
 
    </body>
</html>