iOS Safari 上 HLS 视频的 AWS S3 签名

Question

我使用 HLS.js 来处理 HLS 流，并且我已经能够让它在 Android 上正常工作。问题是 Safari iOS 内置了 HLS 支持，因此它不支持媒体源扩展 (MSE)。这意味着我无法使用自定义加载程序对每个文件块 URL 进行签名，以便它可以访问 S3 上的该文件块。每个用户都有自己的认知访问权限，并且只能访问 S3 存储桶中的文件夹。这会阻止用户观看其他人的视频。这就是为什么播放列表文件的通用签名是不够的，因为播放列表文件可以被签名，但是一旦流尝试访问文件块，它就会被阻止，因为它们没有签名。

if (Hls.isSupported()) {
                        class loader extends Hls.DefaultConfig.loader {
                            constructor(config) {
                                super(config);
                                var load = this.load.bind(this);
                                this.load = async function(context, config, callbacks) {
                                    let signedVideoPlaylistUrl = await new Promise((resolve, reject) => {
                                        s3.getSignedUrl('getObject', {
                                            Bucket: 'bucket-name',
                                            // Pass the URL and get the S3 key
                                            Key: context.url.split("s3.amazonaws.com/")[1],
                                            Expires: 60 * 60 * 1 // 1 hour
                                        }, function(error, result){
                                            if(error){
                                                console.error(error);
                                                reject(error);
                                            } else {
                                                resolve(result);
                                            }
                                        })
                                    });
                                    context.url = signedVideoPlaylistUrl;
                                    load(context, config, callbacks);
                                };
                            }
                        }
                        var hls = new Hls({
                            loader: loader
                        });
                        hls.attachMedia(video);
                        hls.on(Hls.Events.MEDIA_ATTACHED, function(event, data) {
                            console.log(event, data);
                        });
                        hls.on(Hls.Events.MANIFEST_PARSED, function() {
                            console.log(event, data);
                            //video.play();
                        });
                        hls.loadSource(`"https://bucket-name.s3.amazonaws.com/users/random-user-id/category/video_hls/recordingId.m3u8`);
                    }
                    // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
                    // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element through the `src` property.
                    // This is using the built-in support of the plain video element, without using hls.js.
                    // Note: it would be more normal to wait on the 'canplay' event below however on Safari (where you are most likely to find built-in HLS support) the video.src URL must be on the user-driven
                    // white-list before a 'canplay' event will be emitted; the last video event that can be reliably listened-for when the URL is not on the white-list is 'loadedmetadata'.
                    else if (video.canPlayType('application/vnd.apple.mpegurl')) {
                        //THIS IS WHERE I'M STUCK
                        throw new Meteor.Error("Not Supported");
                        video.src = signedVideoPlaylistUrl;
                        video.addEventListener('loadedmetadata', function() {
                            video.play();
                        });
                    }
                }

由于 iOS 上的 Safari 不支持 HLS.js，因此我无法像上面的代码那样拦截 URL。有谁知道是否可以这样做？我还没有找到一种方法来使用带有视频标签的原生 HTML 来实现这一点。

谢谢！

Answer 1

我遇到过确切的问题，并且已经解决了。

关键是使用 cookie 而不是查询参数。

然后视频元素会自动在每个请求上添加 cookie。