Hi there, I’m trying to migration from Twilio Video to Zoom.
Followed this doc try to create a simple project for POC
I’m using CDN to load Zoom Video SDK in a HTML page.
the real code Im using is , I think this is the latest version
then call webservice to generate access token
all seems works when visit this page, it will ask to allow to use Camera but then when try to attach video to page, it throw error for
stream.getCurrentUserInfo() is not a function
Uncaught (in promise) TypeError: stream.getCurrentUserInfo is not a function
function startVideo() {
stream.startVideo().then(() => {
stream.attachVideo(stream.getCurrentUserInfo().userId, VideoQuality.Video_720P).then((userVideo) => {
document.querySelector(‘video-player-container’).appendChild(userVideo)
})
})
}
not sure what I’m missing, any help? thanks!
the html code is here
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="https://source.zoom.us/videosdk/zoom-video-1.10.8.min.js"></script>
<!--<script src="/js/zoomload.js" type="module"></script>-->
</head>
<body>
<style>
/* adjust the CSS to your liking */
video-player-container {
width: 100%;
height: 300px;
}
video-player {
width: 100%;
height: auto;
aspect-ratio: 16/9;
}
</style>
<video-player-container></video-player-container>
Room Name
<br />
<input type="text" id="roomname" value="restroom" placeholder="Room name" /><br />
User Name
<br />
<input type="text" id="identity" value="test111" placeholder="Your name" /><br />
Role:<br />
<select name="role" id="role">
<option value="1">Host/Co-host</option>
<option value="0" selected>Guest</option>
</select>
<br />
<input type="text" id="sessionkey" value="1234" placeholder="session key" /><br />
<input type="button" onclick="startVideo();" value="Start Video" />
<script>
const ZoomVideo = window.WebVideoSDK.default
var client = ZoomVideo.createClient();
var token = '';
var stream
try {
var a = new Promise(function () {
var roomname = $("#roomname")[0].value;
var username = $("#identity")[0].value;
var sessionkey = $("#sessionkey")[0].value;
var roletype = $("#role")[0].value;
$.ajax({
type: "POST",
url: "TwilioVideoService.asmx/GetZoomAuthJWT",
data: "roomname=" + roomname + "&username=" + username + "&roletype=" + roletype + "&session_key=" + sessionkey,
dataType: "text",
async: false,
success: function (result) {
if (result.length > 0 && $(result)[0].textContent !== '') {
token = $(result)[2].textContent.replace("\n", "").replace(" ", "").replace("\n", "");
client.init('en-US', 'Global', { patchJsMedia: true }).then(() => {
client
.join(roomname, token, username, sessionkey)
.then(() => {
stream = client.getMediaStream()
})
})
}
},
error: function (errormessage) {
console.log(errormessage);
}
});
})
}
catch (ex) {
alert(ex);
}
function startVideo() {
stream.startVideo().then(() => {
stream.attachVideo(stream.getCurrentUserInfo().userId, VideoQuality.Video_720P).then((userVideo) => {
document.querySelector('video-player-container').appendChild(userVideo)
})
})
}
</script>
</body>
</html>