Skip to content

Commit 18b79ad

Browse files
pardeep-kumar-bspardeep-kumar-bs
committed
add live stream.
1 parent ff9142d commit 18b79ad

15 files changed

+11555
-0
lines changed

‎live-stream/README.md

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
# Channelize JavaScript Live Steam UI kit
2+
3+
This JavaScript Sample app is built using our [JavaScript SDK](https://docs.channelize.io/javascript-sdk-introduction-overview), this will help you add a live stream layout to your website which can be customized to build chat exactly how you want, and unbelievably quickly. It enables achieving a beautiful chat app interface for all use-cases like live chat, online consultation & tutoring, team collaboration, messaging, customer support and gaming chat.
4+
5+
6+
#### See in Action [here](https://demo.channelize.io).
7+
8+
## Getting Started
9+
10+
Follow the below steps to add the Channelize live stream layout to your website.
11+
12+
##### Step 1: Add Live Stream #####
13+
14+
Add the Channelize live stream div in the body tag of your website.
15+
16+
```html
17+
<body>
18+
<div id="ch_live_stream"></div>
19+
</body>
20+
```
21+
22+
##### Step 2: Import Channelize live stream file #####
23+
24+
Import the `liveStream.Channelize.js` file after body tag in your website.
25+
26+
```javascript
27+
<script src="https://cdn.channelize.io/apps/live-stream/2.0.0/liveStream.Channelize.js"></script>
28+
```
29+
30+
##### Step 3: Import Channelize JS-SDK #####
31+
32+
Import the [`Channelize JS-SDK`](https://docs.channelize.io/javascript-sdk-introduction-overview) after body tag in your website.
33+
34+
```javascript
35+
<script src="https://cdn.channelize.io/sdk/4.2.0/browser.js"></script>
36+
```
37+
38+
##### Step 4: Create live stream object #####
39+
40+
Create Channelize.io object and call the load function which will require your public key as an argument.
41+
42+
```javascript
43+
<script>
44+
const channelizeLiveStream = new ChannelizeLiveStream('PUBLIC_KEY');
45+
channelizeLiveStream.load();
46+
</script>
47+
```
48+
49+
## Customizing the live stream
50+
51+
> Pre-requisites: Have Node v8.x+ installed.
52+
53+
1. Update Channelize live stream file URL in your index.html file.
54+
```javascript
55+
<script src="./dist/liveStream.Channelize.js"></script>
56+
```
57+
58+
2. Install required npm packages.
59+
```bash
60+
sudo npm install
61+
```
62+
63+
3. Build your changes.
64+
```bash
65+
sudo npm run build
66+
```
67+
68+
4. Start sample app.
69+
```bash
70+
npm start
71+
```
72+
73+
###### For UI Customizations : ######
74+
75+
- Customize the UI of chat live stream layout as per your choice by changing the values of predefined variables in `./live-stream/src/scss/variables.scss file` or by making changes in the code of the elements/content.
76+
77+
78+
###### For Function Customizations : ######
79+
80+
- Add your own functions or make code-level changes.
81+
82+
83+
## File Structure of Channelize Sample App
84+
```
85+
|-- dist
86+
|-- liveStream.Channelize.js - Channelize Live Stream Bundle file
87+
|-- node_modules
88+
|-- ... - (node packages)
89+
|-- src
90+
|-- js
91+
|-- components
92+
|-- conversation.js - conversation screen class
93+
|-- login.js - login class
94+
|-- threads.js - threads screen class
95+
|-- adapter.js - Channelize JS SDK functions
96+
|-- constants.js - const variables
97+
|-- utility.js - utility functions
98+
|-- liveStream.js - live stream main functions
99+
|-- scss
100+
|-- main.scss - main style class
101+
|-- variables.scss - css variables
102+
|-- index.html - sample file
103+
|-- package.json - npm package
104+
|-- README.md - description file
105+
|-- server.js - server file
106+
|-- webpack.config.js - webpack setting
107+
```

‎live-stream/index.html

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Channelize.io - Live Stream Demo</title>
5+
</head>
6+
<style type="text/css">
7+
body {
8+
height: 580px;
9+
}
10+
.live-stream-demo {
11+
margin: 20px;
12+
}
13+
.video-screen {
14+
display: inline-block;
15+
margin: 43px;
16+
}
17+
.live-stream {
18+
float: right;
19+
}
20+
</style>
21+
<body>
22+
<div class="live-stream-demo">
23+
<div class="video-screen">
24+
<img src="https://cdn.channelize.io/apps/live-stream/2.0.0/images/live-stream.png" width="700" height="450px">
25+
</div>
26+
<div class="live-stream">
27+
<div id="ch_live_stream"></div>
28+
</div>
29+
</div>
30+
</body>
31+
32+
<script src="https://cdn.channelize.io/sdk/4.2.0/browser.js"></script>
33+
<script src="https://cdn.channelize.io/apps/live-stream/2.0.0/liveStream.Channelize.js"></script>
34+
35+
<script>
36+
const channelizeLiveStream = new ChannelizeLiveStream('qHvonVEyIxDLa6zh');
37+
channelizeLiveStream.load((err,res)=> {});
38+
</script>
39+
</html>

0 commit comments

Comments
 (0)