iOS Safari浏览器仅捕获画布上视频中的初始帧，并复制所有捕获的图像

Question

• 我们正在使用Twilio Video JavaScript SDK，并在网络浏览器中进行视频通话（iphone ios = safari，android = chrome）。
• 视频通话期间用户可以捕获图像。
• 捕获图像实际上使用javascript drawImage函数从具有实时视频通话媒体的画布上绘制图像。
• 视频在Safari中可以正常播放，但是在捕获图像功能上，每次都无法达到预期的效果。
• 有时（并非总是如此），野生动物园会在所有捕获的图像中复制此类帧。例如，如果视频打开了10分钟，并且用户捕获了10次图像，则从第5秒到第8分钟，所有10张图像将是第5秒的场景。
• 此重复图像问题不会出现。有时发生问题时，如果我们引导用户重置其浏览器设置，则下次它运行正常，并且所有图像都来自预期的不同场景。
• 问题出现在iOS 11.2、12.3和13.1中

javascript代码：

        var width;
        var height;
        var video;

        video = document.querySelectorAll('#outremote_video video')[0];

        if (video != undefined && video != null && video != "" && video.videoWidth != 0 && video.videoHeight != 0) {
            width = video.videoWidth;
            height = video.videoHeight;

        }

        var img = new Image();
        var canvas = document.getElementById('screenshotcanvas');
        var context = canvas.getContext('2d');

        if (width && height) {

            canvas.width = width;
            canvas.height = height;
            console.error('height ' +canvas.height+ 'width  '+canvas.width);

            //take video view on canvas
            context.drawImage(video, 0, 0, width, height);    
            var imageData = canvas.toDataURL('image/jpeg');
            imageDataList.push(imageData);
        }

然后，我将Blob imageData上传到服务器。野生动物园有什么问题？为什么它有时表现出意外而没有任何错误消息。可能存在任何缓存问题吗？

Answer 1

请原谅作为答复，但我目前无法发表评论。我想为您的问题添加一些东西，当我尝试在iOS Safari上捕获视频帧时注意到这一点。像您一样，无论视频在哪里播放，我的抓帧（使用drawImage）似乎都只能检索初始帧。我还注意到，根据所使用的摄像头（正面与背面）和方向（纵向与横向），drawImage（）方法甚至根本不起作用。使用后置摄像头以人像模式拍摄视频时，获得一帧（任何一帧）我没有任何成功。其他组合产生第一帧或第二帧。 （iPhone 11 pro，13.3.1）

我热切地看着这个话题...