canvas动画视频录制后在回放的时候,url请求错误: http://localhost:8888/[object%20Object]

[pittQ]

Steps to reproduce

1, 对canvas视频进行录制
2, 回放的时候,资源路径不对,请求路径是:http://localhost:8888/[object%20Object]
报错的代码在2d.ts的55行

What is expected?

正常渲染canvas动画视频

What is actually happening?

报错

[cbbfcd]

hi, 有可以复现的 demo 吗？

[pittQ]

<canvas id="c1" width="1000" height="500" />

let _video = document.createElement('video') _video.src = "视频文件" _video.autoplay = true

canvasE.value = document.getElementById('c1'); ctx.value = canvasE.value.getContext('2d'); _video.addEventListener('play', () => { timerCallback(1000,500) })

const timerCallback = (width: number, height: number) => { // 如果视频暂停或者结束就停止 if (video.value.paused || video.value.ended) { return; } ctx.value.drawImage(_video 0, 0, 1000, 500); setTimeout(() => { timerCallback(width, height); }, 40); }

const start = () => { console.log('开始录制....................') recorder = record({ recordCanvas: true, emit(event) { events.push(event); } }) }

录制的脚本是不是有问题??
麻烦大佬帮忙看下

[cbbfcd]

好奇一问，这是什么场景，需要用 canvas 来播放视频呢？

[pittQ]

好奇一问，这是什么场景，需要用 canvas 来播放视频呢？

我用video标签页试了, 也录不了,所以才改成这样

[pittQ]

好奇一问，这是什么场景，需要用 canvas 来播放视频呢？

完整代码在这里: https://codesandbox.io/s/suspicious-rain-vjru2h?file=/src/components/HelloWorld.vue

[cbbfcd]

好的，这个问题我看看

[pittQ]

好的，这个问题我看看

还有一个问题需求请教一下, 用blob的方式录制视频的时候, 切换了视频源, 回放的时候, 视频只有封面第二个视频不播放
完整代码如下:
https://codesandbox.io/s/suspicious-rain-vjru2h?file=/src/App.vue

[cbbfcd]

好的，这个问题我看看

还有一个问题需求请教一下, 用blob的方式录制视频的时候, 切换了视频源, 回放的时候, 视频只有封面第二个视频不播放 完整代码如下: https://codesandbox.io/s/suspicious-rain-vjru2h?file=/src/App.vue

好的，我一起看看

[cbbfcd]

@pittQ 通过 video 播放录制，我这边试了试可以的。你看看这个 demo 呢

https://codesandbox.io/s/affectionate-lederberg-z20ns1?file=/src/App.vue

[cbbfcd]

canvas 播放视频回放是有问题的，这个我看看

[cbbfcd]

https://codesandbox.io/s/affectionate-lederberg-z20ns1?file=/src/App.vue

我改了一下 demo, 中途切换视频源，依然是可以录屏的。你试试呢

[pittQ]

https://codesandbox.io/s/affectionate-lederberg-z20ns1?file=/src/App.vue

我改了一下 demo, 中途切换视频源，依然是可以录屏的。你试试呢

录屏是可以, 回放的时候不行

[cbbfcd]

@pittQ 你看看我那个 demo 我加了回放的按钮，是可以的。

[cbbfcd]

至于 canvas 绘制视频这里，目前 timecat 没有处理，相关代码。

这里没有处理是 HTMLVideoElement 的情况，而且数据量比较大，回放的时候处理也有问题，这里看来是有问题的。

[oct16]

音频由于浏览器策略限制，只能录入麦克风音源