提交工单
咨询集成、功能及报价等问题
产品 / 插件:实时音视频
平台 / 框架:Web
更新时间:2022-04-25 15:21
目前,使用 chrome 88~92 版本、Safari 浏览器推第三方视频流时,会出现此问题。
开发者可以在推流时,使用 Canvas 获取 video 元素的媒体流。
/**
* Compatible with the problem that the video of customized captured stream is abnormal when chrome 88-92 turns on hardware acceleration
* @param {*} video
* @returns
*/
function getStreamThroughCanvas(video) {
let canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const draw = function () {
if(!canvas) return
if (canvas.width !== video.videoWidth) canvas.width = video.videoWidth;
if (canvas.height !== video.videoHeight) canvas.height = video.videoHeight;
ctx?.drawImage(video, 0, 0, canvas.width, canvas.height);
setTimeout(draw, 66);
};
draw();
const media = canvas.captureStream();
// overwrite stop track function
const track = media.getVideoTracks()[0];
const q = track.stop;
track.stop = () => {
q.call(track);
draw();
canvas.width = 0;
canvas.remove();
canvas = null
};
// get audio track
const stream = video.captureStream && video.captureStream()
if (stream instanceof MediaStream && stream.getAudioTracks().length) {
const micro = stream.getAudioTracks()[0];
media.addTrack(micro);
}
return media;
}
联系我们
文档反馈