From cd05d30b4cf61df4691939627a7913f069f970c6 Mon Sep 17 00:00:00 2001 From: Erik Donohoo Date: Thu, 16 Nov 2023 15:10:54 -0700 Subject: [PATCH] Demo for Issue With Canvas and Archive --- Archiving/css/app.css | 4 +++ Archiving/index.html | 2 +- Archiving/js/app.js | 74 +++++++++++++++++++++++++++++++++++-------- 3 files changed, 65 insertions(+), 15 deletions(-) diff --git a/Archiving/css/app.css b/Archiving/css/app.css index 03c851e..a6f9b8d 100644 --- a/Archiving/css/app.css +++ b/Archiving/css/app.css @@ -39,4 +39,8 @@ body, html { #archiveLink > a { padding: 5px; background-color: white; +} + +video { + background: black; } \ No newline at end of file diff --git a/Archiving/index.html b/Archiving/index.html index 3d666b3..c28fd14 100644 --- a/Archiving/index.html +++ b/Archiving/index.html @@ -4,7 +4,7 @@ OpenTok Archiving Sample - + diff --git a/Archiving/js/app.js b/Archiving/js/app.js index b332c74..a2f8326 100644 --- a/Archiving/js/app.js +++ b/Archiving/js/app.js @@ -50,22 +50,67 @@ function initializeSession() { console.log('You were disconnected from the session.', event.reason); }); - // initialize the publisher - const publisherOptions = { - insertMode: 'append', - width: '100%', - height: '100%' + const randomColour = () => { + return Math.round(Math.random() * 255); }; - const publisher = OT.initPublisher('publisher', publisherOptions, handleError); - // Connect to the session - session.connect(token, (error) => { - if (error) { - handleError(error); - } else { - // If the connection is successful, publish the publisher to the session - session.publish(publisher, handleError); - } + // Canvas + navigator.mediaDevices.getUserMedia({ + audio: true, + video: { height: 480, width: 640} + }).then((stream) => { + const canvas = document.createElement('canvas'); + canvas.width = 640; + canvas.height = 480; + const ctx = canvas.getContext('2d'); + + const video = document.createElement('video'); + video.height = 480; + video.width = 640; + video.autoplay = true; + video.setAttribute('playsinline', 'true'); + video.srcObject = stream; + document.querySelector('#videos').appendChild(video); + + // Draw a random colour in the Canvas every 3 seconds + const interval = setInterval(() => { + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.fillStyle = `rgb(${randomColour()}, ${randomColour()}, ${randomColour()})`; + ctx.fillRect(0, 0, canvas.width, canvas.height); + ctx.drawImage(video, 0, 0, video.width, video.height, 0, 0, canvas.width, canvas.height) + }, 33); + + // initialize the publisher + const publisherOptions = { + insertMode: 'append', + width: '100%', + height: '100%', + scalableVideo: false, + videoSource: canvas.captureStream(30).getVideoTracks()[0], // Use canvas.captureStream at 3 fps and pass the video track to the Publisher + audioSource: stream.getAudioTracks()[0] + }; + + const publisher = OT.initPublisher('publisher', publisherOptions, (error) => { + if (error) { + clearInterval(interval); + handleError(error); + alert(error.message); + } + }); + + publisher.on('destroyed', () => { + clearInterval(interval); + }); + + // Connect to the session + session.connect(token, (error) => { + if (error) { + handleError(error); + } else { + // If the connection is successful, publish the publisher to the session + session.publish(publisher, handleError); + } + }); }); } @@ -132,6 +177,7 @@ if (SAMPLE_SERVER_BASE_URL) { apiKey = json.apiKey; sessionId = json.sessionId; token = json.token; + console.log(json); // Initialize an OpenTok Session object initializeSession(); }).catch((error) => {