Skip to content
This repository has been archived by the owner on Jun 30, 2022. It is now read-only.

Sample Gsoc demo - 'Introduce Audio/Video call to LiveChat' #579

Draft
wants to merge 1 commit into
base: develop
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@
"preact-i18nline": "^2.0.0",
"preact-router": "^3.2.1",
"query-string": "^6.13.1",
"simple-peer": "^9.10.0",
"whatwg-fetch": "^3.4.0"
},
"browserslist": [
Expand Down
54 changes: 54 additions & 0 deletions src/components/Screen/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ import Tooltip from '../Tooltip';
import { createClassName } from '../helpers';
import styles from './styles.scss';

import Peer from "simple-peer";

class ScreenHeader extends Component {
largeHeader = () => {
const { agent } = this.props;
Expand All @@ -39,6 +41,57 @@ class ScreenHeader extends Component {
return title;
}

onCall = () => {
const { agent } = this.props;
console.log(agent);

navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(stream => {

const peer = new Peer({
initiator: true,
trickle: false,
config: {

iceServers: [

{url:'stun:stun01.sipphone.com'},
{url:'stun:stun.ekiga.net'},
{url:'stun:stun.fwdnet.net'},
{url:'stun:stun.ideasip.com'},
{url:'stun:stun.iptel.org'},
{url:'stun:stun.rixtelecom.se'},
{url:'stun:stun.schlund.de'},
{url:'stun:stun.l.google.com:19302'},
{url:'stun:stun1.l.google.com:19302'},
{url:'stun:stun2.l.google.com:19302'},
{url:'stun:stun3.l.google.com:19302'},
{url:'stun:stun4.l.google.com:19302'},
{url:'stun:stunserver.org'},
{url:'stun:stun.softjoys.com'},
{url:'stun:stun.voiparound.com'},
{url:'stun:stun.voipbuster.com'},
{url:'stun:stun.voipstunt.com'},
{url:'stun:stun.voxgratia.org'},
{url:'stun:stun.xten.com'},

]
},
stream: stream,
});

peer.on("signal", data => {
// send message via api...
console.log('signal data.....', data);
})


})
.catch(()=>{
console.log('error in navigator')
})

}

render = ({
alerts,
agent,
Expand Down Expand Up @@ -82,6 +135,7 @@ class ScreenHeader extends Component {
{agent && agent.phone && (
<Header.CustomField>{agent.phone}</Header.CustomField>
)}
<button className="btn btn-primary" onClick={this.onCall}>CALL</button>
</Header.Content>
<Tooltip.Container>
<Header.Actions>
Expand Down
13 changes: 13 additions & 0 deletions src/lib/room.js
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,19 @@ Livechat.onMessage(async (message) => {
return;
}

let sdpMsg = null;
try {
console.log('receive msg...', message)
sdpMsg = JSON.parse(message.msg);
if(sdpMsg && sdpMsg.type === "answer") {
window.peerObj.signal(sdpMsg);
}
}
catch(e) {

}


message = transformAgentInformationOnMessage(message);

await store.setState({
Expand Down
66 changes: 66 additions & 0 deletions src/routes/Chat/component.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ import SendIcon from '../../icons/send.svg';
import EmojiIcon from '../../icons/smile.svg';
import styles from './styles.scss';

import Peer from "simple-peer";

export default class Chat extends Component {
state = {
atBottom: true,
Expand Down Expand Up @@ -96,6 +98,68 @@ export default class Chat extends Component {
}
}

onCall = async () => {
const { agent } = this.props;
console.log(agent);

navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(stream => {

const peer = new Peer({
initiator: true,
trickle: false,
config: {

iceServers: [

{url:'stun:stun01.sipphone.com'},
{url:'stun:stun.ekiga.net'},
{url:'stun:stun.fwdnet.net'},
{url:'stun:stun.ideasip.com'},
{url:'stun:stun.iptel.org'},
{url:'stun:stun.rixtelecom.se'},
{url:'stun:stun.schlund.de'},
{url:'stun:stun.l.google.com:19302'},
{url:'stun:stun1.l.google.com:19302'},
{url:'stun:stun2.l.google.com:19302'},
{url:'stun:stun3.l.google.com:19302'},
{url:'stun:stun4.l.google.com:19302'},
{url:'stun:stunserver.org'},
{url:'stun:stun.softjoys.com'},
{url:'stun:stun.voiparound.com'},
{url:'stun:stun.voipbuster.com'},
{url:'stun:stun.voipstunt.com'},
{url:'stun:stun.voxgratia.org'},
{url:'stun:stun.xten.com'},

]
},
stream: stream,
});

window.peerObj = peer;

peer.on("signal", data => {
// send message via api...
console.log('signal data.....', data);
this.handleSubmit(JSON.stringify(data));
})

peer.on('stream', stream => {
console.log('jj stream');
const userVideoElement = document.getElementsByClassName("agentVideo")[0];
if(userVideoElement) {
userVideoElement.srcObject = stream;
}
})


})
.catch(()=>{
console.log('error in navigator')
})

}

render = ({
color,
title,
Expand Down Expand Up @@ -164,6 +228,7 @@ export default class Chat extends Component {
onSelect={this.handleEmojiSelect}
autoFocus={true}
/>}
<video class="agentVideo" playsInline autoPlay></video>
</div>
</Screen.Content>
<Screen.Footer
Expand Down Expand Up @@ -216,6 +281,7 @@ export default class Chat extends Component {
<SendIcon width={20} height={20} />
</ComposerAction>
)}
<button className="btn btn-primary" onClick={this.onCall}>CALL</button>
</ComposerActions>
)}
limitTextLength={limitTextLength}
Expand Down
Loading