Włączenie / wyłączenie nadawania obrazu
Jak przestać nadawać video?
Uwaga
Aby przestać nadawać video połączenie musi być utworzone.
<button type="button" onclick="onClickMuteVideoButton()">Wyłącz nadawanie obrazu</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>
<button type="button" onclick="onClickSwitchCameraButton()">Zmiana kamery</button><br>
<button type="button" onclick="onClickMuteVideoButton()">Wyłącz nadawanie obrazu</button><br>
<script type="text/javascript" src="conpeek.js"></script>
</body>
</html>
Podpowiedź
Na potrzeby przykładu dodaliśmy przycisk Wyłącz nadawanie obrazu.
Gdy naciszniesz przycisk Wyłącz nadawanie obrazu zostanie wywołana funkcja onClickMuteVideoButton().
$conpeek.dialog.muteVideo();
<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ę");
}
);
};
function onClickSwitchCameraButton() {
$conpeek.dialog.switchCamera();
};
function onClickMuteVideoButton() {
$conpeek.dialog.muteVideo();
};
</script>
Jak zacząć nadawać video?
Uwaga
Aby zacząć nadawać video połączenie musi być utworzone.
<button type="button" onclick="onClickUnmuteVideoButton()">Włącz nadawanie obrazu</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>
<button type="button" id="CHAT" disabled onclick="onClickChatButton()">Chat</button>
<textarea id="conpeek_plugin_chat_message" rows="1" name="conpeek_plugin_chat_message" placeholder="Wpisz wiadomość..." style="height: 35px;"></textarea>
<input type="file" id="chatFilePicker">
<button type="button" onclick="onClickSendFileButton()">Wyślij Plik</button>
<input type="file" id="chatImageFilePicker" accept=".jpg,.jpeg,.png,.bmp">
<button type="button" onclick="onClickSendImageFileButton()">Wyślij Obraz</button>
<button type="button" onclick="onClickChangeMediaButton()">Zmień media</button>
<button type="button" onclick="onClickMuteButton()">Włącz wyciszenie mikrofonu</button>
<button type="button" onclick="onClickVideoButton()">Video</button>
<button type="button" onclick="onClickSwitchCameraButton()">Zmiana kamery</button>
<button type="button" onclick="onClickMuteVideoButton()">Wyłącz nadawanie obrazu</button>
<button type="button" onclick="onClickUnmuteVideoButton()">Włącz nadawanie obrazu</button>
<script type="text/javascript" src="conpeek.js"></script>
</body>
</html>
Podpowiedź
Na potrzeby przykładu dodaliśmy przycisk Włącz nadawanie obrazu.
Gdy naciszniesz przycisk Włącz nadawanie obrazu zostanie wywołana funkcja onClickUnmuteVideoButton().
$conpeek.dialog.unmuteVideo();
<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ę");
}
);
};
function onClickSwitchCameraButton() {
$conpeek.dialog.switchCamera();
};
function onClickMuteVideoButton() {
$conpeek.dialog.videoMute();
};
function onClickUnmuteVideoButton() {
$conpeek.dialog.videoUnmute();
};
</script>
W następnym kroku dowiesz się jak wysyłać DTMF.