100 lines
3.5 KiB
HTML
100 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>µStreamer H.264 demo</title>
|
||
<script src="https://webrtc.github.io/adapter/adapter-8.1.0.js"></script>
|
||
<!-- janus.js is the JavaScript client library of Janus, as specified above in
|
||
the prerequisites section of the client setup. You might need to change
|
||
the `src` path, depending on where you serve this file from. -->
|
||
<script src="janus.js"></script>
|
||
<style>
|
||
video {
|
||
height: 100%;
|
||
width: 100%;
|
||
object-fit: contain;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<video id="webrtc-output" autoplay playsinline muted></video>
|
||
<script type="text/javascript">
|
||
// Initialize Janus library.
|
||
Janus.init({
|
||
// Turn on debug logs in the browser console.
|
||
debug: true,
|
||
|
||
// Configure Janus to use standard browser APIs internally.
|
||
dependencies: Janus.useDefaultDependencies(),
|
||
});
|
||
|
||
// Establish a WebSockets connection to the server.
|
||
const janus = new Janus({
|
||
// Specify the URL of the Janus server’s WebSockets endpoint.
|
||
server: `ws://${window.location.hostname}/janus/`,
|
||
|
||
// Callback function if the client connects successfully.
|
||
success: attachUStreamerPlugin,
|
||
|
||
// Callback function if the client fails to connect.
|
||
error: console.error,
|
||
});
|
||
|
||
let uStreamerPluginHandle = null;
|
||
|
||
function attachUStreamerPlugin() {
|
||
// Instruct the server to attach the µStreamer Janus plugin.
|
||
janus.attach({
|
||
// Qualifier of the plugin.
|
||
plugin: "janus.plugin.ustreamer",
|
||
|
||
// Callback function, for when the server attached the plugin
|
||
// successfully.
|
||
success: function (pluginHandle) {
|
||
uStreamerPluginHandle = pluginHandle;
|
||
// Instruct the µStreamer Janus plugin to initiate streaming.
|
||
uStreamerPluginHandle.send({ message: { request: "watch", params: {audio: true} } });
|
||
},
|
||
|
||
// Callback function if the server fails to attach the plugin.
|
||
error: console.error,
|
||
|
||
// Callback function for processing messages from the Janus server.
|
||
onmessage: function (msg, jsepOffer) {
|
||
// If there is a JSEP offer, respond to it. This starts the WebRTC
|
||
// connection.
|
||
if (jsepOffer) {
|
||
uStreamerPluginHandle.createAnswer({
|
||
jsep: jsepOffer,
|
||
// Prevent the client from sending audio and video, as this would
|
||
// trigger a permission dialog in the browser.
|
||
media: { audioSend: false, videoSend: false },
|
||
success: function (jsepAnswer) {
|
||
uStreamerPluginHandle.send({
|
||
message: { request: "start" },
|
||
jsep: jsepAnswer,
|
||
});
|
||
},
|
||
error: console.error,
|
||
});
|
||
}
|
||
},
|
||
|
||
// Callback function, for when a media stream arrives.
|
||
onremotetrack: function (mediaStreamTrack, mediaId, isAdded) {
|
||
if (isAdded) {
|
||
// Attach the received media track to the video element. Cloning the
|
||
// mediaStreamTrack creates a new object with a distinct, globally
|
||
// unique stream identifier.
|
||
const videoElement = document.getElementById("webrtc-output");
|
||
if (videoElement.srcObject === null) {
|
||
videoElement.srcObject = new MediaStream();
|
||
}
|
||
videoElement.srcObject.addTrack(mediaStreamTrack.clone());
|
||
}
|
||
},
|
||
});
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |