OpenTok.js最新版调用subscriber.getImgData()提示未定义如何修复？

问题原因 #

你遇到的报错是因为最新版OpenTok.js已经正式移除了getImgData()方法，该方法在v2.17版本起被标记为废弃，后续迭代中直接从SDK中删除。

修复方案 #

方案1：不降级SDK，用原生API实现同等功能 #

可以直接通过subscriber暴露的视频DOM元素，配合Canvas API自行实现截图逻辑，替换原有subscriber.getImgData()相关代码即可：

$('#take-photo').click(function() {
    // 新增逻辑开始
    const videoElement = subscriber.getVideoElement();
    const canvas = document.createElement('canvas');
    canvas.width = videoElement.videoWidth;
    canvas.height = videoElement.videoHeight;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
    const video = canvas.toDataURL('image/png');
    // 新增逻辑结束，替换原有的subscriber.getImgData()调用
    const blob = base64ToBlob(video);
    const formData = new FormData();

    formData.append('image', blob);
    formData.append("_token", csrf_token);

    $.ajax({
        url: '/video/' + video_id, 
        type: "POST",
        cache: false,
        contentType: false,
        processData: false,
        data: formData
    }).done(function(data){
        VideoScreenGallery.addImg(data.id, data.path);
    });
});

注意：需要确保subscriber的流已经加载完成再执行截图操作，可以监听subscriber的streamPlaying事件来控制拍照按钮的启用状态，避免截到空白图。

方案2：降级到支持getImgData()的旧版本SDK #

如果不想修改现有业务逻辑，可以把自动跟随最新版的SDK引入地址替换为固定版本的地址，最后一个支持getImgData()的稳定版本为v2.16.0，引入方式如下：

<script src="https://static.opentok.com/v2.16.0/js/opentok.min.js"></script>

使用固定版本地址不会自动升级到移除了该方法的新版本，原有代码无需修改即可正常运行。

内容的提问来源于stack exchange，提问作者Roham