; (function (window) { // 获取 video 元素的宽度和高度 var rtmp_videoChannelWidth; var rtmp_videoChannelHeight; // 创建 ImageCapture 对象 var rtmp_videoChannelCapture; var rtmp_usVideoElement; var rtmp_captureCanvas; /// 初始化 imageCapture 并返回 video 宽高 /// [video_id] 传入需要捕获的 video/Canvas 元素的id function initRTMPVideoCapture(video_id) { try { // 获取video元素 rtmp_usVideoElement = document.getElementById(video_id); try { // 获取video流 let stream = rtmp_usVideoElement.captureStream(); let track = stream.getVideoTracks()[0]; // 获取video的宽度和高度 const settings = track.getSettings(); rtmp_videoChannelWidth = settings.width; rtmp_videoChannelHeight = settings.height; // 创建ImageCapture对象 rtmp_videoChannelCapture = new ImageCapture(track); } catch (error) { rtmp_videoChannelCapture = null; // 获取video元素的宽度和高度 rtmp_videoChannelWidth = rtmp_usVideoElement.videoWidth; rtmp_videoChannelHeight = rtmp_usVideoElement.videoHeight; } // 初始化canvas rtmp_captureCanvas = document.createElement("canvas"); rtmp_captureCanvas.width = rtmp_videoChannelWidth; rtmp_captureCanvas.height = rtmp_videoChannelHeight; return [rtmp_videoChannelWidth, rtmp_videoChannelHeight]; } catch (error) { return [0, 0]; } } function setRTMPClipSize(width, height) { rtmp_captureCanvas.width = width; rtmp_captureCanvas.height = height; } /// 捕获视频帧并转换为二进制数组返回 function captureRTMPOneFrame() { if (rtmp_videoChannelCapture == null) { const context = rtmp_captureCanvas.getContext("2d"); context.drawImage( rtmp_usVideoElement, 0, 0, rtmp_videoChannelWidth, rtmp_videoChannelHeight ); const dataUrl = rtmp_captureCanvas.toDataURL("image/jpeg"); const binary = atob(dataUrl.split(",")[1]); const uint8Array = new Uint8Array(binary.length); for (let i = 0; i < binary.length; i++) { uint8Array[i] = binary.charCodeAt(i); } return Promise.resolve(uint8Array); } else { const promise = rtmp_videoChannelCapture.grabFrame().then((imageBitmap) => { const context = rtmp_captureCanvas.getContext("2d"); context.drawImage( imageBitmap, 0, 0, rtmp_videoChannelWidth, rtmp_videoChannelHeight ); const dataUrl = rtmp_captureCanvas.toDataURL("image/jpeg"); const binary = atob(dataUrl.split(",")[1]); const uint8Array = new Uint8Array(binary.length); for (let i = 0; i < binary.length; i++) { uint8Array[i] = binary.charCodeAt(i); } return uint8Array; }); return promise; } } /// 释放 imageCapture 对象 function disposeRTMPVideoCapture() { rtmp_videoChannelCapture = null; rtmp_usVideoElement = null; rtmp_captureCanvas = null; console.log("rtmp_videoChannelCapture has been disposed"); } window.rtmpCapturer = { init: initRTMPVideoCapture, setClipSize: setRTMPClipSize, captureOne: captureRTMPOneFrame, release: disposeRTMPVideoCapture, } })(window);