OCR

resources/views/program/video/index.blade.php

@@ -47,6 +47,10 @@
                         节目开始位置
                     @endif
                 </x-links.video_link>
+                @if($video_pivot->start_ocr)
+                    <canvas class="mt-1 w-full max-w-[180px] bg-black rounded" data-ocr-frame="{{ json_encode($video_pivot->start_ocr, JSON_UNESCAPED_UNICODE) }}"></canvas>
+                    <div class="text-xs text-gray-500">OCR @ {{ gmdate("H:i:s", (int)$video_pivot->start_ocr["ts"]) }}</div>
+                @endif
             </td>
             <td class="border align-bottom">
                 <x-links.video_link :bvid="$video_pivot->video_bvid" :part="$video_pivot->stop_part" :time="$video_pivot->stop_time">
@@ -57,11 +61,17 @@
                         节目结束位置
                     @endif
                 </x-links.video_link>
+                @if($video_pivot->stop_ocr)
+                    <canvas class="mt-1 w-full max-w-[180px] bg-black rounded" data-ocr-frame="{{ json_encode($video_pivot->stop_ocr, JSON_UNESCAPED_UNICODE) }}"></canvas>
+                    <div class="text-xs text-gray-500">OCR @ {{ gmdate("H:i:s", (int)$video_pivot->stop_ocr["ts"]) }}</div>
+                @endif
             </td>
         </tr>
     @endforeach
     </tbody>
 </table>
+<script src="{{ mix('/js/component/ocr_canvas.js') }}"></script>
+<script>document.addEventListener("DOMContentLoaded", function () { OcrCanvas.initSnapshots(); });</script>
 @include("common.footer")
 </body>
 </html>