Łączenie
Jak zmienić połączenie na video?
Uwaga
Aby zmienić typ połączenia musi być ono utworzone.
Zawsze możesz utworzyć połączenie korzystając z dokumentacji.
<button type="button" onclick="onClickVideoButton()">Video</button>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Samouczek: Conpeek SDK</title>
</head>
<body>
<video autoplay id="conpeek_plugin_video_box"></video><br>
<button type="button" id="CHAT" disabled onclick="onClickChatButton()">Chat</button><br>
<textarea id="conpeek_plugin_chat_message" rows="1" name="conpeek_plugin_chat_message" placeholder="Wpisz wiadomość..." style="height: 35px;"></textarea><br>
<input type="file" id="chatFilePicker">
<button type="button" onclick="onClickSendFileButton()">Wyślij Plik</button><br>
<input type="file" id="chatImageFilePicker" accept=".jpg,.jpeg,.png,.bmp">
<button type="button" onclick="onClickSendImageFileButton()">Wyślij Obraz</button><br>
<button type="button" onclick="onClickChangeMediaButton()">Zmień media</button><br>
<button type="button" onclick="onClickMuteButton()">Włącz wyciszenie mikrofonu</button><br>
<button type="button" onclick="onClickVideoButton()">Video</button><br>
<script type="text/javascript" src="conpeek.js"></script>
</body>
</html>
Podpowiedź
Na potrzeby przykładu dodaliśmy przycisk Video.
Gdy naciszniesz przycisk Video zostanie wywołana funkcja onClickVideoButton() oraz zostanie zmieniony typ połączenia na video.
Najpierw zmienimy aktualny typ połączenia na połączenie video
$conpeek.dialog.changeMedia();
<script type="text/javascript">
$conpeek.initialize({
url: 'https://example.conpeek.com',
plugin_id: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
media_tag: 'conpeek_plugin_video_box',
},
function (success, params) {
if (success) {
$conpeek.event.registerCallback("plugin_subscription", "ready", () => {
$conpeek.util.updateTargetData("Help Desk", function(success, body){
if(success) {
document.getElementById("CHAT").disabled = false
}
});
});
} else {
alert("Inicjalizacja nie powiodła się")
}
});
function onClickChatButton() {
$conpeek.dialog.connect({
media: ["chat"],
presentation: "John Doe",
destination: "Help Desk"
}, function () {
$conpeek.chat.send("Hello World!");
$conpeek.event.registerCallback("chat", "chat_message", function (data) {
console.log(data);
});
$conpeek.chat.registerDetectInput(document.getElementById ("conpeek_plugin_chat_message"));
}, function () {
alert("Tworzenie połączenia nie powiodło się");
});
};
function onClickSendFileButton() {
const chatFilePicker = document.getElementById('chatFilePicker');
$conpeek.dialog.uploadFile(chatFilePicker);
};
function onClickSendImageFileButton() {
const chatImageFilePicker = document.getElementById('chatImageFilePicker');
$conpeek.dialog.uploadImage(chatImageFilePicker);
};
function onClickChangeMediaButton() {
$conpeek.dialog.changeMedia(["audio"],
function () {
alert("Zmiana mediów powiodła się");
},
function () {
alert("Zmiana mediów nie powiodła się");
}
);
};
function onClickMuteButton() {
$conpeek.dialog.mute();
};
function onClickVideoButton() {
$conpeek.dialog.changeMedia(["video"],
function () {
alert("Zmiana mediów powiodła się");
},
function () {
alert("Zmiana mediów nie powiodła się");
}
);
};
</script>
Gdy już zmieniliśmy media pora na dodanie przycisku zmiany kamery.