Created
June 30, 2023 05:49
-
-
Save asissuthar/2eaa7a1fc537e0e76ccd6320e7cf6ef5 to your computer and use it in GitHub Desktop.
Zego Video SDK Demo. Use this on website for custom implementation and on mobile side pre-built UI can be used.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>Zego Express Video Call</title> | |
| <style type="text/css"> | |
| * { | |
| font-family: sans-serif; | |
| } | |
| h1, | |
| h4 { | |
| text-align: center; | |
| } | |
| #local-video, | |
| #remote-video { | |
| width: 400px; | |
| height: 300px; | |
| border: 1px solid #dfdfdf; | |
| } | |
| #local-video { | |
| position: relative; | |
| margin: 0 auto; | |
| display: block; | |
| } | |
| #remote-video { | |
| display: flex; | |
| margin: auto; | |
| position: relative !important; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h4>Local video</h4> | |
| <div id="local-video"></div> | |
| <h4>Remote video</h4> | |
| <div id="remote-video"></div> | |
| <script src="ZegoExpressWebRTC-2.25.2.js"></script> | |
| <script> | |
| let appID = 0; | |
| let server = `wss://webliveroom${appId}-api.zegocloud.com/ws`; | |
| const zg = new ZegoExpressEngine(appID, server); | |
| let userID = ""; | |
| let userName = ""; | |
| let roomID = ""; | |
| let token = ""; | |
| function generateStreamID(userID, roomID, type) { | |
| type = type || "main"; | |
| return `${roomID}_${userID}_${type}`; | |
| } | |
| zg.loginRoom( | |
| roomID, | |
| token, | |
| { userID, userName: userName }, | |
| { userUpdate: true } | |
| ).then(async (result) => { | |
| if (result == true) { | |
| const localStream = await zg.createStream(); | |
| const localView = zg.createLocalStreamView(localStream); | |
| localView.play("local-video"); | |
| const streamID = generateStreamID(userID, roomID, "main"); | |
| zg.startPublishingStream(streamID, localStream); | |
| } | |
| }); | |
| zg.on( | |
| "roomStreamUpdate", | |
| async (roomID, updateType, streamList, extendedData) => { | |
| if (updateType == "ADD") { | |
| const streamID = streamList[0].streamID; | |
| const remoteStream = await zg.startPlayingStream(streamID); | |
| const remoteView = zg.createRemoteStreamView(remoteStream); | |
| remoteView.play("remote-video"); | |
| } else if (updateType == "DELETE") { | |
| // When streams are deleted, stop playing them. | |
| } | |
| } | |
| ); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment