EDCB_Material_WebUI icon indicating copy to clipboard operation
EDCB_Material_WebUI copied to clipboard

いくつかの改善や不具合修正を行った EDCB Material WebUI

EDCB Material WebUI

Screenshot

本家からの変更点

いくつかの改善や不具合修正を行っています。

  • 未承認の Pull Requests を個人的に取り込んだ
  • PWA (Progressive Web Apps) に対応した (本家に取り込まれました)
  • 録画設定から録画保存フォルダを指定できるようにした
  • EPG予約・録画結果画面でサイドパネルから予約・結果を削除できるようにした
  • 余白が足りない部分などのスタイルを修正し、より見やすくした
  • HLS 再生時に字幕が表示されない不具合を修正した
  • 録画ファイルが大量に保存されている環境で、QuotaExceededError が発生しライブラリページの読み込みに失敗する不具合を修正した
  • デフォルトの環境設定をカスタマイズした
  • デフォルトのトランスコード設定をカスタマイズした
  • ソースコードの文字コードを UTF-8 (BOM なし) に統一した

DTV-Builds で配布している、EDCB のビルド済みアーカイブのファイル構成で利用することを想定しています。
それ以外の環境に導入する際は、適宜必要な実行ファイルを EDCB\Tools 以下に適切に配置してください。


EDCBのWebUIをMaterial Design Liteを使いマテリアルデザインに沿うように表示できます

予約の追加確認、番組表の表示などの基本的な機能の他、リモート視聴・ファイル再生、PWAなどに対応しています

Legacy WebUIをベースとして、多くの部分を流用し、作成しています
view mp4init.lua segment.lua comment legacy.script.js は一部ファイル名を変えて流用、
logoをTvTestの設定の読み込み部分など、 xcodeを公開フォルダ外のファイルにアクセスできるよう変更し使わせて頂きました

おかげさまでド素人にも作成することができました。xtne6f氏に感謝します

導入

最低限の動作に必要なファイルは、EDCBのreleasesEDCB-work-plus-s-bin.zipで入手可能です
リモート視聴を行う場合は、別途使用するトランスコーダが必要です

  1. EDCBのReadme_Mod.txtのCivetwebの組み込みについてをよく読む

  2. EDCBのHTTPサーバ機能を有効化、アクセス制御を設定

    • EnableHttpSrv=1
    • HttpAccessControlList=+127.0.0.1,+192.168.0.0/16
  3. http://localhost:5510/ などにアクセス、サーバー機能が有効になったことを確認
    ※ ここでうまく行かない場合はEDCBの設定の問題だと思われます

  4. ファイルを適切に設置 (下記の配置例を参照)
    HttpPublicSettingをEDCBフォルダに入れる
    ※ 配置例 (*があるものは必ずその場所に配置)

    EDCB/
     ├─ HttpPublic/
     │   ├─ api/ *
     │   ├─ EMWUI/
     │   ├─ legacy/
     │   ├─ img/ *
     │   │   └logo/ *
     │   └─ video/ *
     ├─ Tools/
     │   ├─ ffmpeg.exe
     │   ├─ ffprobe.exe *
     │   ├─ tsreadex.exe *
     │   ├─ asyncbuf.exe *
     │   ├─ tsmemseg.exe *
     │   └─ psisiarc.exe *
     ├─ Setting/
     │   ├─ XCODE_OPTIONS.lua *
     │   └─ HttpPublic.ini *
     ├─ EpgDataCap_Bon.exe *
     ├─ EpgTimerSrv.exe *
     ├─ EpgTimer.exe *
     ├─ lua52.dll *
     └─ SendTSTCP.dll *
    
  5. リモート視聴する場合EpgDataCap_Bonなどのネットワーク設定でTCP送信先にSrvPipeを追加

  6. http://localhost:5510/EMWUI/ にアクセス出来たら準備完了、設定へ

  • 更新の際はHttpPublicのみ上書きしてください
  • PWAを使用する場合は追加の設定や別途ファイルが必要です

設定

番組表などの基本的な設定は設定ページ
配信機能の設定などはHttpPublic.iniXCODE_OPTIONS.luaを編集してください

テーマカラー

MDLで選択したテーマカラーに変更することができます
選んだテーマカラーのcssをダウンロードしmaterial.min.cssを置き換えるか、HttpPublic.inicssキーを編集することで変更できます

  • 一部(border周り)が置き換えただけでは対応できない部分があります(.mark)
    気になる方はcssをuser.cssに記述してください
  • 色はMaterial designから選択することをお勧めします
    .markのborderはA700を指定しています

PWA

PWA(プログレッシブウェブアプリ)に対応しアプリとしてインストールすることができます

視聴機能

Legacy WebUIの配信機能を移植し、以下の事が可能となりました

  • HLSでの配信
  • web-bmlによるデータ放送の表示
  • aribb24.jsによる字幕表示
  • 実況の表示

過去の機能と仕様などが変わり互換性はありませんので再度設定をしてください EDCB Legacy WebUIについてにも目を通してください

注意

  • トランスコードオプションはXCODE_OPTIONS.luaを編集してください
  • リモコン、コメントボタンを長押しすると各データの常時取得が有効になります
  • データ放送がリセットできないため、一度データ放送を読み込みチャンネルを変更すると、リモコンボタンは無効化されます
    上記の理由から常時取得有効中でも、リモコンボタンを一度押すまでデータ放送は読み込まれません
  • データ放送のNVRAM設定はLegacy WebUIと共通です、今のところLegacy WebUIのNVRAM設定でできます
  • .pscファイルによる表示は現在非対応としています(要望があったら対応するかもしれません)
  • プレイヤーの速度設定はブラウザ側の機能を使用しています
    倍速読み込みはトランスコードオプションのfilterFastを有効にします

リモート視聴

  • EpgDataCap_BonなどのTCP送信先にSrvPipeが追加されている必要があります
  • NetworkTVモードでEpgDataCap_Bonなどを起動しています
    他にNetworkTVモードを使用している場合は注意してください

ファイル再生

  • 開始時間を指定し、再度トランスコードすることでシークっぽい動作をしています
  • 録画結果ページでは録画結果(GetRecFileInfo())からファイパスを取得し、ファイルの確認をし表示します
  • ffprobe.exeがToolsフォルダにある場合、メタ情報が取得可能となり、より正確な処理ができます

ライブラリ

  • 録画保存フォルダのビデオファイル(ts,mp4,webm等)を表示・再生します
    HttpPublic.iniでフォルダの変更が可能です

  • Chrome系ブラウザでmp4を再生しようとするとエラーで再生できないことがありますが-movflags faststartオプションを付けエンコすることで再生できる場合が、 また公開フォルダ外のファイルはスクリプトを経由するためシークできるブラウザとできないブラウザあるようです

  • サムネ
    HttpPublicFolderのvideo\thumbsフォルダにmd5ハッシュ.jpgがあるとサムネを表示できます
    ライブラリページのメニューから作成することができます

補足

局ロゴ

EDCBのロゴに対応しています

  • ロゴフォルダにない場合、TVTestのロゴを検索するかどうかHttpPublic.iniで設定できます
  • LogoData.iniが見つからない場合のみ公開フォルダ下のimg\logo\ONIDSID{.png|.bmp}(4桁で16進数)を表示(旧仕様互換)

放送中ページ

URLに?webPanel=を追加すると無駄をそぎ落としたデザインになります

  • VivaldiのWEBパネルに追加して使用することを想定しています

番組表の隠しコマンド

以下をGETメゾットで取得しますのでURLに含めてください

  • hour=整数
    開始時間を指定
  • interval=整数
    表示間隔を指定
    • デフォルト値 PC=25 スマホ=13
  • chcount=整数
    読み込むチャンネル数を一時的に変更
    • デフォルト値 PC=0(無制限) スマホ=15
    • showが有効時は非表示のチャンネルを含みます
  • show=
    非表示指定したチャンネルを読み込む(サイドバーで表示・非表示)
    • 値は指定する必要はありません
  • subch=
    サービス一覧でサブチャンネルを表示します

chcountshowは週間番組表では使えません

お知らせ機能

※PCでのみでの機能です

  • 登録した番組の開始30秒前にデスクトップ通知します
  • videoフォルダにnotification.mp3を用意すると通知音が出ます
    各自で用意してください

注意

チャンネルが増えたりしたら設定を保存しなおしてください(番組表に表示されません)

動作確認

  • Windows
    • Chrome
    • Vivaldi
    • firefox
  • Android
    • Chrome

その他

  • iOS、スカパープレミアムの環境はありません。
  • バグ報告は詳細に、上記の環境ない箇所の場合は特に詳細に、対処できません
  • 欲しい物リストを公開しました、ご支援の程よろしくお願いします
  • このプログラムを使用し不利益が生じても一切の責任を負いません
  • また改変・再配布などはご自由にどうぞ

Framework & JavaScriptライブラリ

This software includes the work that is distributed in the Apache License 2.0.