Add: support video (still in test), change ogg to webm

This commit is contained in:
2021-12-16 00:51:32 +08:00
parent fc735c88d3
commit 465517e5cc
7 changed files with 75 additions and 53 deletions

View File

@@ -6,14 +6,15 @@
"token": "!! config your very strong token here !!",
"ffmpeg_threads": 1,
"ffmpeg_config_list": [
{"name": "OPUS 128k", "args": "-c:a libopus -ab 128k"},
{"name": "OPUS 96k", "args": "-c:a libopus -ab 96k"},
{"name": "OPUS 256k", "args": "-c:a libopus -ab 256k"},
{"name": "OPUS 320k", "args": "-c:a libopus -ab 320k"},
{"name": "OPUS 512k", "args": "-c:a libopus -ab 512k"},
{"name": "AAC 128k", "args": "-c:a aac -ab 128k"},
{"name": "AAC 256k", "args": "-c:a aac -ab 256k"},
{"name": "全损音质 32k", "args": "-c:a libopus -ab 32k"}
{"name": "OPUS 128k", "args": "-c:a libopus -ab 128k -vn"},
{"name": "OPUS 96k", "args": "-c:a libopus -ab 96k -vn"},
{"name": "OPUS 256k", "args": "-c:a libopus -ab 256k -vn"},
{"name": "OPUS 320k", "args": "-c:a libopus -ab 320k -vn"},
{"name": "OPUS 512k", "args": "-c:a libopus -ab 512k -vn"},
{"name": "AAC 128k", "args": "-c:a aac -ab 128k -vn"},
{"name": "AAC 256k", "args": "-c:a aac -ab 256k -vn"},
{"name": "全损音质 32k", "args": "-c:a libopus -ab 32k -vn"},
{"name": "video test", "args": "-c:a libopus -ab 128k -filter:v scale='min(640,iw)':min'(360,ih)':force_original_aspect_ratio=decrease -c:v libvpx -r 5"}
]
},
"tmpfs": {

View File

@@ -68,7 +68,7 @@ func (api *API) HandleGetFileStream(w http.ResponseWriter, r *http.Request) {
}
args := strings.Split(ffmpegConfig.Args, " ")
startArgs := []string{"-threads", strconv.FormatInt(api.APIConfig.FfmpegThreads, 10), "-i", path}
endArgs := []string{"-vn", "-f", "ogg", "-"}
endArgs := []string{"-f", "webm", "-"}
ffmpegArgs := append(startArgs, args...)
ffmpegArgs = append(ffmpegArgs, endArgs...)
cmd := exec.Command("ffmpeg", ffmpegArgs...)
@@ -137,7 +137,7 @@ func (api *API) HandlePrepareFileStreamDirect(w http.ResponseWriter, r *http.Req
args := strings.Split(ffmpegConfig.Args, " ")
startArgs := []string{"-threads", strconv.FormatInt(api.APIConfig.FfmpegThreads, 10), "-i", srcPath}
endArgs := []string{"-vn", "-y", objPath}
endArgs := []string{"-y", objPath}
ffmpegArgs := append(startArgs, args...)
ffmpegArgs = append(ffmpegArgs, endArgs...)
cmd := exec.Command("ffmpeg", ffmpegArgs...)

View File

@@ -17,7 +17,7 @@ type Tmpfs struct {
}
func (tmpfs *Tmpfs) GetObjFilePath(id int64, configName string) (string) {
return filepath.Join(tmpfs.Config.Root, strconv.FormatInt(id, 10) + "." + configName + ".ogg")
return filepath.Join(tmpfs.Config.Root, strconv.FormatInt(id, 10) + "." + configName + ".webm")
}
func (tmpfs *Tmpfs) GetLock(filename string) *sync.Mutex {

View File

@@ -100,3 +100,11 @@ dialog {
flex-direction: row;
flex-wrap: wrap;
}
.vertical {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.warp-word {
overflow-wrap: anywhere;
}

View File

@@ -83,14 +83,8 @@ function App() {
path="/manage/register"
element={<Register user={user} setUser={setUser} />}
/>
<Route
path="/manage/tags"
element={<Tags user={user} />}
/>
<Route
path="/manage/tags/:id"
element={<EditTag user={user} />}
/>
<Route path="/manage/tags" element={<Tags user={user} />} />
<Route path="/manage/tags/:id" element={<EditTag user={user} />} />
<Route
path="/manage/reviews/:id"
element={<EditReview user={user} />}
@@ -113,16 +107,16 @@ function App() {
/>
<Route
path="/files/:id/review"
element={<ReviewPage user={user} setPlayingFile={setPlayingFile} />}
element={
<ReviewPage user={user} setPlayingFile={setPlayingFile} />
}
/>
</Routes>
</main>
<footer>
<AudioPlayer
playingFile={playingFile}
setPlayingFile={setPlayingFile}
/>
</footer>
<AudioPlayer
playingFile={playingFile}
setPlayingFile={setPlayingFile}
/>
</Router>
</div>
);

View File

@@ -64,7 +64,7 @@ function AudioPlayer(props) {
let navigate = useNavigate();
return (
<div>
<footer className="vertical">
<h5>Player status</h5>
{props.playingFile.id && (
<span>
@@ -111,46 +111,65 @@ function AudioPlayer(props) {
<br />
<input
checked={loop}
onChange={(event) => setLoop(event.target.checked)}
type="checkbox"
/>
<label>Loop</label>
<span>
<input
checked={loop}
onChange={(event) => setLoop(event.target.checked)}
type="checkbox"
/>
<label>Loop</label>
<input
checked={raw}
onChange={(event) => setRaw(event.target.checked)}
type="checkbox"
/>
<label>Raw</label>
<input
checked={raw}
onChange={(event) => setRaw(event.target.checked)}
type="checkbox"
/>
<label>Raw</label>
{!raw && (
<span>
<input
checked={prepare}
onChange={(event) => setPrepare(event.target.checked)}
type="checkbox"
/>
<label>Prepare</label>
</span>
)}
{!raw && (
<span>
<input
checked={prepare}
onChange={(event) => setPrepare(event.target.checked)}
type="checkbox"
/>
<label>Prepare</label>
</span>
)}
<input
type="checkbox"
onClick={(e) => {
const domVideoPlayer = document.getElementById("dom-video-player");
if (domVideoPlayer === null) {
return;
}
if (e.target.checked) {
domVideoPlayer.style.height = "auto";
} else {
domVideoPlayer.style.height = "39px";
}
}}
/>
<label>Video</label>
</span>
{playingURL !== "" && (
<audio
<video
id="dom-video-player"
controls
autoPlay
loop={loop}
className="audio-player"
src={playingURL}
></audio>
></video>
)}
<FfmpegConfig
selectedFfmpegConfig={selectedFfmpegConfig}
setSelectedFfmpegConfig={setSelectedFfmpegConfig}
/>
</div>
</footer>
);
}

View File

@@ -33,7 +33,7 @@ function FfmpegConfig(props) {
<option key={ffmpegConfig.name}>{ffmpegConfig.name}</option>
))}
</select>
<span>{props.selectedFfmpegConfig.args}</span>
<span className="warp-word">{props.selectedFfmpegConfig.args}</span>
</div>
);
}