Add VOD.

README.md

@@ -1,16 +1,17 @@
 # openpilot-server
 
 #### 1. 配置文件
-(1)在 config.txt 文件中，  
+(1)在 config.txt 文件中，
-  <ws_bind> 是绑定websocket server 的ip和端口。  
+  <ws_bind> 是绑定websocket server 的ip和端口。
-  <http_bind> 是绑定http server 的ip和端口。  
+  <http_bind> 是绑定http server 的ip和端口。
-  <athena_host> 是该服务端公网的域名。  
+  <athena_host> 是该服务端公网的域名。
-  <upload_url> 是该服务端公网的域名。  
+  <upload_url> 是该服务端公网的域名。
-  <amap_key> 高德API KEY 。https://console.amap.com/dev/index 这里注册。选择绑定“Web服务”
+  <amap_key> 高德API KEY 。https://console.amap.com/dev/index 这里注册。选择绑定“Web服务”  
+  <ffmpeg_path>ffmpeg程序路径。 ffmpeg 从https://ffmpeg.org/download.html下载。  
 (2) 启动  
-在服务器上启动opserver.exe。  
+在服务器上启动opserver.exe。
 
-#### 2. 设置c3/c3x  
+#### 2. 设置c3/c3x
 (1) ssh进入c3/c3x 设备。  
 (2) 在/data/continue.sh export 添加 <athena_host> 和 <upload_url>。  
   export ATHENA_HOST='ws://laolang.duckdns.org:7899'  
@@ -19,22 +20,22 @@
   像这样：  
 /-----/data/continue.sh file-----------------  
 #!/usr/bin/bash  
-  
+
 export ATHENA_HOST='ws://laolang.duckdns.org:7899'  
 export API_HOST='http://laolang.duckdns.org:7898'  
 export MAPBOX_TOKEN='pk.eyJ1Ijoiam5ld2IiLCJhIjoiY2xxNW8zZXprMGw1ZzJwbzZneHd2NHljbSJ9.gV7VPRfbXFetD-1OVF0XZg'  
-  
+
 cd /data/openpilot  
 exec ./launch_openpilot.sh  
 
 /----------------------  
-     
+
 (3) rm -rf /data/params/d/DongleId  
   sudo reboot #重启你的c3/c3x  
-  
+
-#### 3. 下载文件和设置导航  
+#### 3. 下载文件和设置导航
 (1) 浏览器中打开 http://<your_domain_name> 例如 [http://laolang.duckdns.org:7898](http://laolang.duckdns.org:7898/static/index.html)  
-输入测试Dongle ID : e7a8b8c1cb559c9d
+输入测试Dongle ID : e7a8b8c1cb559c9d  
 
 (2) 进入设置导航地址。(仅支持IPhone地图和高德地图)  
 
@@ -42,7 +43,7 @@ exec ./launch_openpilot.sh
 
 # openpilot-server for english
 
-#### 1. Configuration File  
+#### 1. Configuration File
 (1) In the config.txt file,  
 <ws_bind> IP and port of the websocket server.  
 <http_bind> IP and port of the http server.  
@@ -50,8 +51,8 @@ exec ./launch_openpilot.sh
 <upload_url> The domain name of the server.  
 (2) Launch  
 Launch opserver.exe on your windows server.  
-  
+
-#### 2. Configuration in c3/c3x  
+#### 2. Configuration in c3/c3x
 (1) SSH into the c3/c3x device.  
 (2) In "/data/continue.sh" file, export <athena_host> and <upload_url>.  
 export ATHENA_HOST='ws://laolang.duckdns.org:7899'  
@@ -59,24 +60,24 @@ export API_HOST=' http://laolang.duckdns.org:7898 '
 export MAPBOX_TOKEN='<register_on_mapbox_website.>'  
 like this:  
 /-----/data/continue.sh file-----------------  
-#!/usr/bin/bash  
+#!/usr/bin/bash
-  
+
 export ATHENA_HOST='ws://laolang.duckdns.org:7899'  
 export API_HOST='http://laolang.duckdns.org:7898'  
 export MAPBOX_TOKEN='<register_on_mapbox_website.>'  
-  
+
 cd /data/openpilot  
 exec ./launch_openpilot.sh  
-  
+
 /----------------------  
-  
+
 (3) rm -rf /data/params/d/DongleId  
 sudo reboot #Restart your c3/c3x  
-  
+
-#### 3. Download and navigation  
+#### 3. Download and navigation
-(1) Open http://<your_domain_name> (for example [http://laolang.duckdns.org:7898](http://laolang.duckdns.org:7898/static/index.html)) in your browser  
+(1) Open http://<your_domain_name> (for example [http://laolang.duckdns.org:7898](http://laolang.duckdns.org:7898/static/index.html)) in your browser
   Input test Dongle ID : e7a8b8c1cb559c9d  
-  
+
 (2) In the web page configure the navigation.(Only support IPhone map and AMap)  
 
 #### 4.Star me. Thank you

config.txt

@@ -2,4 +2,5 @@ ws_bind=0.0.0.0:7899
 http_bind=0.0.0.0:7898
 athena_host=ws://laolang.duckdns.org:7899
 upload_url=http://laolang.duckdns.org:7898
-amap_key=23428738744447ba93dda0d6473ff026e
+amap_key=23428738744447ba93dda0d6473ff026e
+ffmpeg_path=D:\\software\\ffmpeg.exe

static/index.html

@@ -131,6 +131,11 @@
 		window.location = url;
 	}
 
+	function showVOD(){
+		url = "/static/vod.html"
+		window.location = url;
+	}
+
 	function recordOperationTime(){
 		strSec = Math.floor(Date.now() / 1000)
 		localStorage.setItem("operationTime", strSec)
@@ -172,8 +177,12 @@
 </form>
 
 
+
+
 <div id="btnlist" style="display: none;text-align:center" title="" >
-</br></br></br></br>
+	</br></br></br></br>
+	<input type="button" value="Vod" class="button button1" onclick = "showVOD();" />
+	</br></br>
 	<input type="button" value="Log" class="button button1" onclick = "showlog();" />
 	&nbsp;&nbsp;
 	<input type="button" value="AMap" class="button button1" onclick = "showAmap();" />

static/vod.html

@@ -0,0 +1,212 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+<!--Happy children's day 2024-05-30-->
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://vjs.zencdn.net/7.14.3/video-js.css" rel="stylesheet">
+    <script src="https://vjs.zencdn.net/7.14.3/video.js"></script>
+    <style>
+		body {
+			margin: 0;
+			font-family: 'Arial', sans-serif;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			height: 100vh;
+			background-color: #f5f5f5;
+		}
+
+		.video-container {
+			margin-bottom: 20px;
+			border-radius: 8px;
+			overflow: hidden;
+			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+		}
+
+		.controls-container {
+			text-align: center;
+			margin-top: 20px;
+		}
+
+		.input-group {
+			display: flex;
+			max-width: 400px;
+			margin: 0 auto;
+			overflow: hidden;
+			border-radius: 5px;
+			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+		}
+
+		#m3u8Input {
+			flex: 1;
+			padding: 12px;
+			border: none;
+			border-radius: 5px 0 0 5px;
+			font-size: 16px;
+		}
+
+		button {
+			padding: 12px 20px;
+			background-color: #4CAF50;
+			color: white;
+			border: none;
+			border-radius: 0 5px 5px 0;
+			cursor: pointer;
+			font-size: 16px;
+			transition: background-color 0.3s;
+		}
+
+		button:hover {
+			background-color: #45a049;
+		}
+		
+	</style>
+
+    <title>openpilot-online</title>
+	
+	<script type="text/javascript">
+	function isWeChat(){
+		//window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
+		var ua = window.navigator.userAgent.toLowerCase();
+		//通过正则表达式匹配ua中是否含有MicroMessenger字符串
+		if(ua.match(/MicroMessenger/i) == 'micromessenger'){
+		return true;
+		}else{
+		return false;
+		}
+	  }
+
+	  window.onload = function() {
+		console.log(window.navigator.platform);
+	}
+	</script>
+</head>
+<body>
+    <div id="video-frame" class="video-container"></div>
+	<div>
+		<input type='button' style="width:100px; height:50px;" onclick='playVideo(lastUrl);' value='Play'>
+		<input type='button' style="width:100px; height:50px;" onclick='window.location="/static/index.html";' value='Return'>
+	</div>
+    <script>
+		init = false;
+		lastUrl = "";
+		var arr_url;
+
+		dongleid = localStorage.getItem("dongleId");
+		uri = "/vod/"+dongleid
+
+		getVodUrl();
+		var int=self.setInterval("clock()",10000);
+		function clock()
+		{
+			getVodUrl();
+		}
+
+		function getVodUrl() {
+			console.log("getVodUrl");
+			const xhr = new XMLHttpRequest();
+			xhr.open('GET', uri, true);
+			xhr.onload = function() {
+				if (this.status === 200) {
+					let arr = this.responseText.split(',');
+					console.log(arr)
+					if (arr.length == 0){
+						alert("No video.");
+						return;
+					}
+
+					arr_url = arr;
+
+					if (!init) {
+						vodUrl = findUrl();
+						if (vodUrl != "") {
+							content =  '<video onended="videoEnded()" id="m3u8Player" class="video-js vjs-default-skin" controls width="360" height="640">\
+							<source id="src_m3u8" src="'+vodUrl+ '" type="application/x-mpegURL">\
+							</video>'
+							console.log(content);
+							document.getElementById('video-frame').innerHTML = content;
+							init = true;
+						}
+					}
+					
+				}
+			};
+			xhr.send();
+		}
+
+		function findUrl() {
+			var arr = arr_url;
+			idx = 99;
+			for (i=0; i < arr.length; i++) {
+				if (lastUrl == arr[i]) {
+					idx = i;
+					console.log(arr[i]);
+					break;
+				}
+			}
+
+			if (idx != 0){
+				if (idx==99) {
+					idx = arr.length - 1;
+				} else {
+					idx = idx -1;
+				}
+
+				lastUrl = arr[idx];
+				return lastUrl;
+			}
+
+			return "";
+		}
+		
+		function videoEnded(){
+			console.log("The End.")
+
+			vodUrl = findUrl();
+			if (vodUrl == "") {
+				return
+			}
+
+			console.log(vodUrl);
+			
+			src = vodUrl;
+			newSource = {
+				src: vodUrl,
+				type: 'application/x-mpegURL'
+			};
+
+			const videoPlayer = videojs('m3u8Player');
+			videoPlayer.src(newSource);
+			videoPlayer.play();
+		  }
+
+		function playVideo(src) {
+			console.log(src);
+			input = document.getElementById('src_m3u8').src
+			document.getElementById('video-frame').style.display="";
+			const videoPlayer = videojs('m3u8Player');
+			
+			newSource = {
+				src: src,
+				type: 'application/x-mpegURL'
+			};
+		
+			videoPlayer.src(newSource);
+
+			videoPlayer.ready(function(){
+				videoPlayer.on('loadedmetadata', function(){
+				console.log("videoPlayer duration:",videoPlayer.duration());
+				videoPlayer.error(null);
+				})});
+
+			videoPlayer.play();
+
+			
+		}
+	</script>
+</body>
+</html>