examples/player.html

<!doctype html>
<!-- 
	Copyright 2023 Ceeblue B.V.
-->
<html lang="en">

<head>
	<title>Ceeblue Videojs Player</title>
	<meta charset="utf-8">
	<meta content="Ceeblue" name="author">
	<meta content="width=device-width, initial-scale=1.0" name="viewport" />

	<link href="assets/ceeblue-logo-32x32.png" rel="icon" sizes="32x32">
    <link href="assets/ceeblue-logo-192x192.png" rel="icon" sizes="192x192">

	<link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" rel="stylesheet">
	<link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.1.0/css/solid.css"
		integrity="sha384-TbilV5Lbhlwdyc4RuIV/JhD8NR+BfMrvz4BL5QFa2we1hQu6wvREr3v6XSRfCTRp" rel="stylesheet">
	<link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.1.0/css/fontawesome.css"
		integrity="sha384-ozJwkrqb90Oa3ZNb+yKFW2lToAWYdTiF1vt8JiH5ptTGHTGcN7qdoR1F95e0kYyG" rel="stylesheet">
	<link href="https://vjs.zencdn.net/8.7.0/video-js.css" rel="stylesheet">
	<link href="../dist/videojs-plugins.css" rel="stylesheet">
	
	<style>
		body {
			margin-top: 1em;
			margin-bottom: 3em;
		}

		[v-cloak] {
			display: none;
		}
	</style>
</head>

<body class="container">
	<div class="row">
		<div class="row col-12">
			<div class="col-12 col-md-6">
				<a href="https://ceeblue.net"><img alt="CEEBLUE Media Services" class="rounded mx-auto d-block" src="assets/ceeblue-logo.png"/></a>
			</div>
			<div class="col-12 col-md-6 d-flex align-items-center justify-content-center">
				<a href="https://videojs.com" id="videojs-logo"><img src="assets/videojs-logo-black.svg"></img></a>
			</div>
		</div>

		<div class="col-md-12 mt-4" id="main">
			<div class="col-12">
				<ul class="nav nav-pills nav-fill">
					<li v-for="value in sources" class="nav-item">
						<a class="nav-link" href="#" :class="{ active: value == source}" v-on:click.stop.prevent="changeSource">{{ value }}</a>
					</li>
				</ul>
			</div>

			<div class="card text-center border-0">
				<div class="card-body">
					<video ref="videoPlayer" class="video-js vjs-default-skin vjs-fluid" playsinline controls autoplay></video>
				</div>
			</div>
			
			<div class="form-row" v-if="dataMessages.length > 0" disabled>
				<div class="col-12">
					<h5>Timed Metadatas</h5>
				</div>
				<div class="form-group col-12 text-left border rounded overflow-auto" style="white-space: pre;">{{ dataMessages }}</div>
			</div>

			<div class="form-row">
				<div class="form-group col-6 col-sm-4">
					<select class="custom-select" id="signaling-selection"
						:disabled="playState !== PlayState.STOPPED"
						v-model="connectorType" title="Signaling">
						<option v-bind:value="option" v-for="option in connectorTypes">
							{{ option }}
						</option>
					</select>
				</div>								
				<div class="form-group col-6 col-sm-4">
					<input :disabled="isPlaying()" class="form-control"
						placeholder="Node host" type="text"
						v-model="host" title="Ceeblue node host">
				</div>
				<div class="form-group col-6 col-sm-4">
					<input disabled class="form-control"
						placeholder="Video quality" type="text"
						v-model="quality" title="Stream quality">
				</div>
			</div>
		
			<div class="form-row">				
				<div class="form-group col-6">
					<input :disabled="isPlaying()" class="form-control"
						placeholder="Stream name" type="text"
						v-model="streamName" title="Stream name">
				</div>

				<div class="form-group col-6">
					<input :disabled="isPlaying()" class="form-control"
						placeholder="Access token cc0f52bb-92bb-462b-8218-88c3febe8533" type="text"
						v-model="accessToken" title="Private stream token">
				</div>
			</div>

			<div class="d-flex justify-content-center" v-cloak>
				<button class="btn" type="button"
					v-bind:class="{ 'btn-danger': isPlaying(), 'btn-success': isStopped(), 'btn-secondary': isStarting() }"
					v-on:click="play">
					<span>{{ playButtonCaption() }} <i class="fas fa-spinner fa-pulse"
							v-if="isStarting()"></i></span>
				</button>
			</div>
		</div>
	</div>

	<script type="module">
		// development version, includes helpful console warnings
		// import { createApp } from 'https://cdn.jsdelivr.net/npm/vue@3/dist/vue.esm-browser.js';
		// production version, optimized for size and speed
		import { createApp } from 'https://cdn.jsdelivr.net/npm/vue@3/dist/vue.esm-browser.prod.js';
		import {} from 'https://cdn.jsdelivr.net/npm/webrtc-adapter/out/adapter.js';
		import {} from 'https://vjs.zencdn.net/8.7.0/video.min.js';
		import {} from '../dist/videojs-plugins.js';
		import { Player } from './js/Player.js';

		const SourceType = videojs.getPlugin('SourceController').SourceType;
        const WebRTCSourceHandler = videojs.getTech('Html5').sourceHandlers.find((value) => value.name == 'ceeblue/videojs-plugins');
		
		const {
        	Util,
			NetAddress,
			Connect,
		} = WebRTCSourceHandler.webrtcClient.utils;
		console.log('webrtc-client version:', WebRTCSourceHandler.webrtcClient.VERSION);
	
		const PlayState = {
			PLAYING: 'PLAYING',
			STARTING: 'STARTING',
			STOPPED: 'STOPPED'
		};
		// /!\ keep this outside of the app to avoid issues with vuejs proxying)
		let player = null; // the videojs Player

		createApp({
			data() {
				return {
					PlayState: PlayState,
					playState: PlayState.STOPPED,

					streamName: '',
					accessToken: null,
					host: null,

					audio: null,
					video: null,
					audiobutton: true,
					videobutton: true,
					retryCount: 0,
					auto: true,

					connectorTypes: ['WebSocket (WS)', 'HTTP (WHEP)'],
					connectorType: 'WebSocket (WS)',
					sources: [SourceType.WEBRTC, SourceType.LLHLS, SourceType.DASH, SourceType.HLS],
					source: '',

					dataMessages: '',
					quality: '',
				}
			},
			created() {
				const options = Util.options();
				// init values
				const host = options.host;
				this.host = new NetAddress(host || location.host, 443);
				this.streamName = options.stream;
				this.accessToken = options.accesstoken || options.token;

				this.audioTrack = options.audio;
				this.videoTrack = options.video;
				this.audiobutton = options.audiobutton;
				this.videobutton = options.videobutton;
				this.retryCount = options.retryCount;
				this.auto = options.auto !== false;
				this.connectorType = host && host.toLowerCase().startsWith('http')? this.connectorTypes[1] : this.connectorTypes[0];
			},
			methods: {
				startPlayback(selectedSource) {
					this.playState = PlayState.STARTING;

					// filter query params
					const query = {};
					if (this.audioTrack) {
						query.audio=this.audioTrack;
					}
					if (this.videoTrack) {
						query.video=this.videoTrack;
					}
					if (!player) {
						const playerOptions = {
							responsive: true,
							html5: {
								nativeControlsForTouch: false, 
								vhs: {overrideNative: true},
								nativeAudioTracks: false,
								nativeVideoTracks: false,
							},
							// Ceeblue specific options
							qualityButton: this.videobutton,
							retryCount: this.retryCount,
							auto: this.auto
						}

						// Build the sources list with custom options for WebRTC
						const protocol = this.connectorType === this.connectorTypes[1]? 'https' : 'wss';
						const connectParams = {
							endPoint: protocol + '://' + this.host.toString(),
							streamName:this.streamName,
							accessToken:this.accessToken,
							query
						};
						const sources = [];
						for (let i = 0; i < this.sources.length; i++) {
							let source = this.sources[i];
							if (source == SourceType.WEBRTC) {
								// This is an example of custom Source Object to pass options to the WebRTC source handler
								// You can also customize every source type in the same way
								source = {
									src: Connect.buildURL(Connect.Type.WEBRTC, connectParams, protocol).toString(),
									// Ceeblue specific options
									iceserver: {
										urls: ['turn:' + this.host.domain + ':3478?transport=tcp', 'turn:' + this.host.domain + ':3478'], 
										username: 'csc_demo', 
										credential: 'UtrAFClFFO'
									},
									audiobutton: this.audiobutton,
									data: true
								};
							}
							sources.push(source);
						}
						
						player = new Player(this.$refs.videoPlayer, connectParams, sources, playerOptions);
						player.on('sourcechanged', (source) => {
							console.log('sourcechanged', source);
							this.dataMessages = '';
							if (source == null) {
								this.stopPlayback();
							} else {
								const qualityLevels = player.player.qualityLevels();
								qualityLevels.on('change', (e) => {
									if (qualityLevels.selectedIndex < 0)
										return;
									const quality = qualityLevels[qualityLevels.selectedIndex];
									this.quality = quality.width + 'x' + quality.height + ' ' + Math.floor(quality.bitrate/1000) + 'kbps';
								});
								if (qualityLevels.selectedIndex >= 0) {
									const quality = qualityLevels[qualityLevels.selectedIndex];
									this.quality = quality.width + 'x' + quality.height + ' ' + Math.floor(quality.bitrate/1000) + 'kbps';
								}
								this.source = source;
								this.playState = PlayState.PLAYING;
							}
						});
						// Listen to timed metadatas
						player.player.textTracks().on('addtrack', (e) => {
							console.log('New text track', e);
							const track = e.track;
							track.on('cuechange', () => {
								const cue = track.activeCues[0];
								if (!cue)
									return;
								// If the message has more than 3 rows, remove the first one
								if (this.dataMessages.split(/\r\n|\r|\n/).length > 3) {
									this.dataMessages = this.dataMessages.substring(this.dataMessages.indexOf('\n') + 1);
								}
								this.dataMessages += "[" + cue.startTime.toFixed(3) + "] " + cue.text + '\n';
							});
						});
					}
					player.start(selectedSource);
				},
				stopPlayback() {
					console.log('StopPlayback');
					player.stop();
					player = null;
					this.dataMessages = '';
					this.source = '';
					this.quality = '';
					this.playState = PlayState.STOPPED;
				},
				changeSource(e) {
					if (this.source == e.target.text)
						return;
					if (!player) {
						this.startPlayback(e.target.text);
					} else {
						player.source = e.target.text;
					}
				},
				play() {
					if(this.playState === PlayState.STOPPED) {
						this.startPlayback();
					} else {
						this.stopPlayback();
					}
				},

				playButtonCaption() {
					if (this.isStopped())
						return 'Play';
					if (this.isStarting())
						return 'Starting... ';
					if (this.isPlaying())
						return 'Stop';
				},
				isPlaying() {
					return this.playState === PlayState.PLAYING;
				},
				isStarting() {
					return this.playState === PlayState.STARTING;
				},
				isStopped() {
					return this.playState === PlayState.STOPPED;
				}
			},
		}).mount('#main');
	</script>
</body>

</html>