BookStackApp / BookStack

A platform to create documentation/wiki content built with PHP & Laravel
https://www.bookstackapp.com/
MIT License
14.84k stars 1.86k forks source link

Video and file upload #882

Open andresilva-cc opened 6 years ago

andresilva-cc commented 6 years ago

It would be nice to have the ability to upload videos and files. You could use the same file manager and just allow those type of files too. For files, maybe we could use the file manager to upload, and then use the link option to insert it as a download option.

iBooster commented 6 years ago

Yep, i think this is a great idea.

Abijeet commented 6 years ago

Hi all,

Thanks for raising this feature request. While we discuss this, if you want to attach a custom video, you can do the following,

bookstack-video

iBooster commented 6 years ago

Thanks, for myself this is the solution i needed, but not for my users. But for now it is all i need. Thank you

If I do this on my project, just like you did in the video, the video is not loading... only difference between our videos are, that mine is in .webm format...

tlmmm commented 5 years ago

Can a file be uploaded without it being shown on the sidebar? I would like to upload some PDFs and just have links to them throughout the pages.

Thanks.

TheFiZi commented 4 years ago

@Abijeet I am unable to replicate your demo

booktstackVideoEmbed

BookStack v0.28.2

Apologies for the language, can re-upload with out the swear word if you'd prefer :)

whysthatso commented 4 years ago

question is what acutally is playing the video, and hence what formats are possible? is it some integrated js-player, or is the browser actually nativly playing the file?

i've also uploaded an mp4 file, but those are just containers certainly.

TheFiZi commented 4 years ago

The two files I tried:

General
Complete name                            : HP80My1VMluY55lT.mp4
Format                                   : MPEG-4
Format profile                           : Base Media
Codec ID                                 : isom (isom/iso2/avc1/mp41)
File size                                : 51.6 MiB
Duration                                 : 3 min 47 s
Overall bit rate                         : 1 904 kb/s
Writing application                      : Lavf57.83.100

Video
ID                                       : 1
Format                                   : AVC
Format/Info                              : Advanced Video Codec
Format profile                           : High@L4
Format settings                          : CABAC / 3 Ref Frames
Format settings, CABAC                   : Yes
Format settings, ReFrames                : 3 frames
Codec ID                                 : avc1
Codec ID/Info                            : Advanced Video Coding
Duration                                 : 3 min 47 s
Bit rate                                 : 1 772 kb/s
Width                                    : 1 920 pixels
Height                                   : 1 080 pixels
Display aspect ratio                     : 16:9
Frame rate mode                          : Variable
Frame rate                               : 23.976 (24000/1001) FPS
Minimum frame rate                       : 23.974 FPS
Maximum frame rate                       : 23.981 FPS
Color space                              : YUV
Chroma subsampling                       : 4:2:0
Bit depth                                : 8 bits
Scan type                                : Progressive
Bits/(Pixel*Frame)                       : 0.036
Stream size                              : 48.0 MiB (93%)
Color range                              : Limited
Color primaries                          : BT.709
Transfer characteristics                 : BT.709
Matrix coefficients                      : BT.709

Audio
ID                                       : 2
Format                                   : AAC
Format/Info                              : Advanced Audio Codec
Format profile                           : LC
Codec ID                                 : mp4a-40-2
Duration                                 : 3 min 47 s
Bit rate mode                            : Constant
Bit rate                                 : 126 kb/s
Channel(s)                               : 2 channels
Channel positions                        : Front: L R
Sampling rate                            : 44.1 kHz
Frame rate                               : 43.066 FPS (1024 SPF)
Compression mode                         : Lossy
Stream size                              : 3.41 MiB (7%)
Language                                 : English
Default                                  : Yes
Alternate group                          : 1

and

General
Unique ID                                : 246705257846812138323519864319541940752 (0xB999B45071F2B3B331F85243F31E9210)
Complete name                            : QBmbGIqnz1950HAC.mkv
Format                                   : Matroska
Format version                           : Version 4 / Version 2
File size                                : 51.5 MiB
Duration                                 : 3 min 47 s
Overall bit rate                         : 1 901 kb/s
Writing application                      : Lavf57.83.100
Writing library                          : Lavf57.83.100
ErrorDetectionType                       : Per level 1

Video
ID                                       : 1
Format                                   : AVC
Format/Info                              : Advanced Video Codec
Format profile                           : High@L4
Format settings                          : CABAC / 3 Ref Frames
Format settings, CABAC                   : Yes
Format settings, ReFrames                : 3 frames
Codec ID                                 : V_MPEG4/ISO/AVC
Duration                                 : 3 min 47 s
Width                                    : 1 920 pixels
Height                                   : 1 080 pixels
Display aspect ratio                     : 16:9
Frame rate mode                          : Constant
Frame rate                               : 23.976 (24000/1001) FPS
Color space                              : YUV
Chroma subsampling                       : 4:2:0
Bit depth                                : 8 bits
Scan type                                : Progressive
Default                                  : Yes
Forced                                   : No
Color range                              : Limited
Color primaries                          : BT.709
Transfer characteristics                 : BT.709
Matrix coefficients                      : BT.709

Audio
ID                                       : 2
Format                                   : Opus
Codec ID                                 : A_OPUS
Duration                                 : 3 min 47 s
Channel(s)                               : 2 channels
Channel positions                        : Front: L R
Sampling rate                            : 48.0 kHz
Bit depth                                : 32 bits
Compression mode                         : Lossy
Language                                 : English
Default                                  : Yes
Forced                                   : No
whysthatso commented 4 years ago

The two files I tried:

can you add what tool you used to generate this info? i'd like to generate comparable output for my testfiles.

TheFiZi commented 4 years ago

@whysthatso I used mediainfo (https://mediaarea.net/en/MediaInfo)

amelie-excent commented 4 years ago

Hi, I have the same issue, I want to upload video in a page but it not possible :(

amelie-excent commented 4 years ago

There are my file infos :

General
Complete name                            : video.mp4
Format                                   : MPEG-4
Format profile                           : Base Media
Codec ID                                 : isom (isom/iso2/avc1/mp41)
File size                                : 290 KiB
Duration                                 : 58 s 560 ms
Overall bit rate                         : 40.5 kb/s
Writing application                      : Lavf58.31.104

Video
ID                                       : 1
Format                                   : AVC
Format/Info                              : Advanced Video Codec
Format profile                           : High@L4
Format settings                          : CABAC / 4 Ref Frames
Format settings, CABAC                   : Yes
Format settings, Reference frames        : 4 frames
Codec ID                                 : avc1
Codec ID/Info                            : Advanced Video Coding
Duration                                 : 58 s 560 ms
Bit rate                                 : 38.9 kb/s
Width                                    : 1 592 pixels
Height                                   : 894 pixels
Display aspect ratio                     : 16:9
Frame rate mode                          : Variable
Frame rate                               : 12.893 FPS
Minimum frame rate                       : 8.333 FPS
Maximum frame rate                       : 25.000 FPS
Color space                              : YUV
Chroma subsampling                       : 4:2:0
Bit depth                                : 8 bits
Scan type                                : Progressive
Bits/(Pixel*Frame)                       : 0.002
Stream size                              : 278 KiB (96%)
Writing library                          : x264 core 158 r2984 3759fcb
Encoding settings                        : cabac=1 / ref=3 / deblock=1:0:0 / analyse=0x3:0x113 / me=hex / subme=7 / psy=1 / psy_rd=1.00:0.00 / mixed_ref=1 / me_range=16 / chroma_me=1 / trellis=1 / 8x8dct=1 / cqm=0 / deadzone=21,11 / fast_pskip=1 / chroma_qp_offset=-2 / threads=6 / lookahead_threads=1 / sliced_threads=0 / nr=0 / decimate=1 / interlaced=0 / bluray_compat=0 / constrained_intra=0 / bframes=3 / b_pyramid=2 / b_adapt=1 / b_bias=0 / direct=1 / weightb=1 / open_gop=0 / weightp=2 / keyint=250 / keyint_min=25 / scenecut=40 / intra_refresh=0 / rc_lookahead=40 / rc=crf / mbtree=1 / crf=23.0 / qcomp=0.60 / qpmin=0 / qpmax=69 / qpstep=4 / ip_ratio=1.40 / aq=1:1.00
Codec configuration box                  : avcC
amelie-excent commented 4 years ago

I done an other test with an other video and it worked

file info :

General
Complete name                            : video2.mp4
Format                                   : MPEG-4
Format profile                           : Base Media
Codec ID                                 : isom (isom/iso2/avc1/mp41)
File size                                : 874 KiB
Duration                                 : 1 min 15 s
Overall bit rate                         : 94.8 kb/s
Writing application                      : Lavf58.31.104

Video
ID                                       : 1
Format                                   : AVC
Format/Info                              : Advanced Video Codec
Format profile                           : High@L4
Format settings                          : CABAC / 4 Ref Frames
Format settings, CABAC                   : Yes
Format settings, Reference frames        : 4 frames
Codec ID                                 : avc1
Codec ID/Info                            : Advanced Video Coding
Duration                                 : 1 min 15 s
Bit rate                                 : 92.4 kb/s
Width                                    : 1 578 pixels
Height                                   : 1 086 pixels
Display aspect ratio                     : 3:2
Frame rate mode                          : Variable
Frame rate                               : 16.080 FPS
Minimum frame rate                       : 8.333 FPS
Maximum frame rate                       : 25.000 FPS
Color space                              : YUV
Chroma subsampling                       : 4:2:0
Bit depth                                : 8 bits
Scan type                                : Progressive
Bits/(Pixel*Frame)                       : 0.003
Stream size                              : 852 KiB (97%)
Writing library                          : x264 core 158 r2984 3759fcb
Encoding settings                        : cabac=1 / ref=3 / deblock=1:0:0 / analyse=0x3:0x113 / me=hex / subme=7 / psy=1 / psy_rd=1.00:0.00 / mixed_ref=1 / me_range=16 / chroma_me=1 / trellis=1 / 8x8dct=1 / cqm=0 / deadzone=21,11 / fast_pskip=1 / chroma_qp_offset=-2 / threads=6 / lookahead_threads=1 / sliced_threads=0 / nr=0 / decimate=1 / interlaced=0 / bluray_compat=0 / constrained_intra=0 / bframes=3 / b_pyramid=2 / b_adapt=1 / b_bias=0 / direct=1 / weightb=1 / open_gop=0 / weightp=2 / keyint=250 / keyint_min=25 / scenecut=40 / intra_refresh=0 / rc_lookahead=40 / rc=crf / mbtree=1 / crf=23.0 / qcomp=0.60 / qpmin=0 / qpmax=69 / qpstep=4 / ip_ratio=1.40 / aq=1:1.00
Codec configuration box                  : avcC

I don't understand why this one worked and not the other :/

SimonMGS commented 3 years ago

Hi there,

We're pretty much decided on using Bookstack, but attaching custom videos will be important for us. Just a bit concerned about hitting a situation where some videos mysteriously fail to play. Anyone know what the state of play is with this issue?

maggie44 commented 3 years ago

@SimonMGS and @andresilva-cc, have you tried this in different browsers? Is it only a Safari issue or an issue on all browsers?

I suspect this may be related to BookStack not handling the headers correctly?

Here are the web server logs from a request through the BookStack URL using Firefox:

196.247.57.252 - - [31/Jan/2021:01:50:40 +0000] "GET /bookstack/attachments/1 HTTP/2.0" **200** 10546620 "https://website.com/bookstack/books/testwr42/page/werf23" "Mozilla/5.0 (Macintosh; Intel Mac OS X 11.1; rv:85.0) Gecko/20100101 Firefox/85.0"

and with Safari:

196.247.57.252 - - [31/Jan/2021:01:49:47 +0000] "GET /bookstack/attachments/1 HTTP/2.0" **200** 3846480 "https://website.com/bookstack/books/testwr42/page/werf23" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.2 Safari/605.1.15"

In both instances, it returns the response '200'.

When doing the same request to the same video file but not through BookStack, but directly to the file via the same web server, with Firefox:

196.247.57.252 - - [31/Jan/2021:01:53:26 +0000] "GET /bookstack/sample-mp4-file.mp4 HTTP/2.0" **200** 3260170 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 11.1; rv:85.0) Gecko/20100101 Firefox/85.0"
196.247.57.252 - - [31/Jan/2021:01:53:27 +0000] "GET /bookstack/sample-mp4-file.mp4 HTTP/2.0" **206** 60860 "https://website.com/bookstack/sample-mp4-file.mp4" "Mozilla/5.0 (Macintosh; Intel Mac OS X 11.1; rv:85.0) Gecko/20100101 Firefox/85.0"

and Safari:

196.247.57.252 - - [31/Jan/2021:02:10:08 +0000] "GET /bookstack/sample-mp4-file.mp4 HTTP/2.0" **200** 3718922 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.2 Safari/605.1.15"
196.247.57.252 - - [31/Jan/2021:02:10:08 +0000] "GET /bookstack/sample-mp4-file.mp4 HTTP/2.0" **206** 2 "https://website.com/bookstack/sample-mp4-file.mp4" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.2 Safari/605.1.15"
196.247.57.252 - - [31/Jan/2021:02:10:09 +0000] "GET /bookstack/sample-mp4-file.mp4 HTTP/2.0" **206** 4710121 "https://website.com/bookstack/sample-mp4-file.mp4" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.2 Safari/605.1.15"
196.247.57.252 - - [31/Jan/2021:02:10:09 +0000] "GET /bookstack/sample-mp4-file.mp4 HTTP/2.0" **206** 60860 "https://website.com/bookstack/sample-mp4-file.mp4" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.2 Safari/605.1.15"
196.247.57.252 - - [31/Jan/2021:02:10:10 +0000] "GET /bookstack/sample-mp4-file.mp4 HTTP/2.0" **206** 9953559 "https://website.com/bookstack/sample-mp4-file.mp4" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.2 Safari/605.1.15"

In this instance, the web server returns a 206 immediately after the 200. The 206 is a partial response, and is to do with video streaming, it sends the first part of the file for processing. Firefox will handle video with 200 responses, but Safari depends on a 206 response (see Apple literature here: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html#//apple_ref/doc/uid/TP40006514-SW6).

There is a test outlined on the Apple page noted above to see if the server is correctly supporting partial requests. If it is, it should return 100 bytes with the following curl command:

curl --range 0-99 http://example.com/test.mov -o /dev/null

Here are the results, suggesting that the bookstack passing isn't supporting partial requests:

curl --range 0-99 https://website.com/bookstack/sample-mp4-file.mp4 -o /dev/null
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   100  100   100    0     0    209      0 --:--:-- --:--:-- --:--:--   209
curl --range 0-99 https://website.com/bookstack/attachments/1 -o /dev/null                                        
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 10.0M    0 10.0M    0     0  5228k      0 --:--:--  0:00:01 --:--:-- 5225k

Looks like BookStack may need to ensure it is passing the correct headers when it acts as the middleman using the /bookstack/attachments/1 to parse the MP4 file.

If testing with large files using Firefox through the BookStack URL (which will return 200) it may be trying to download the whole file before play starts, so be patient when testing on large files.

Also note the related error in the Safari console when loading https://website.com/bookstack/attachments/1 directly:

Failed to load resource: Frame load interrupted (https://stackoverflow.com/questions/12359600/failed-to-load-resource-frame-load-interrupted-agian)

I think we may want to ask whether this workaround is best for videos though. A separate feature to insert videos that used the same mechanism as for images would provide a direct url that would likely overcome this issue. And for standard non-embedded video attachments the headers issue shouldn’t be a problem.

maggie44 commented 3 years ago

This is proving trickier that I had hoped. Attachments are stored outside of the public/ directory, and therefore aren't accessible directly with a url, with no built in option to allow them to be.

I had looked at whether allowing more file types into to the image uploader (such as .mp4 etc) to reuse the image upload mechanisms would be better, and then just add in a custom video upload button. But there is a lot more going not there than I thought, such as image compression which wouldn't be applicable to videos, and wouldn't be a simple change in the code. Moreover, it has a 'secure' option which when enabled would put the videos outside of public/ and then would stop the video embedding working again.

Any ideas from anyone welcome at this stage. I'm also curious how this works on s3 storage. Does it still useattachments/1 as a URL or does it use the direct URL to the storage?

maggie44 commented 3 years ago

This one is beyond me unfortunately, have reached the limits of my PHP abilities. I changed some things around to allow videos to be uploaded through the image gallery, and then when embedding them they work fine so would resolve the issues above. Due to the secure option available on the image gallery though, this wouldn't be a long-term solution as would run into the same issues as before with attachments.

Instead, after working through a whole bunch of options, I'm thinking the best way to do this now will be:

  1. Remove the current 'media' extension to TinyMCE that provides embed (seems they cannot be customised) https://github.com/BookStackApp/BookStack/blob/bc1e84325c7edfb52b07c7e6bde881b09280c3ba/resources/js/components/wysiwyg-editor.js#L462
  2. Add in a custom menu that contains the same embed options as the TinyMCE plugin, but also one additional one for uploading videos, with its own embed code for video https://github.com/BookStackApp/BookStack/blob/bc1e84325c7edfb52b07c7e6bde881b09280c3ba/resources/js/components/wysiwyg-editor.js#L462 https://github.com/BookStackApp/BookStack/blob/8e87f01aa0da5d33a50bb92da78c7cab1e6d626a/resources/js/components/wysiwyg-editor.js#L710
  3. When choosing the upload videos option, fire up a gallery for videos only (copying most of the same code as the images gallery, but point to its own storage directory and remove the image related processing).
  4. Leave the secure storage disabled on the video gallery (allowing the complex filename security that images provide though).
ssddanbrown commented 3 years ago

@maggie0002

Any ideas from anyone welcome at this stage. I'm also curious how this works on s3 storage. Does it still use attachments/1 as a URL or does it use the direct URL to the storage?

S3-based storage attachments are still served over the same mechanism, but fetched from storage to BookStack on request.

The upload and display side of things for video will be the relatively easy part in my view. The thing I've never liked about video is that it's complex to support on the web. As you've found, the hosting side needs to serve video properly, which webservers will support but it does complicate if we need to do anything more that public serving as you've mentioned.

My main issue is format support. Video is tricky, especially if wanting to use newer and more efficient formats, as it can largely rely on operating system, system added codecs & web browser. Often you'd want to supply multiple options for best support when it comes to video, but I really don't want to get into video processing within BookStack. We just couldn't provide a nice reliable process for non-technical people. This is the main hurdle in my opinion, and why I've not been eager to move this forward.

maggie44 commented 3 years ago

@ssddanbrown thanks for dropping a line on this to give an update.

I see where you are coming from, there can be a lot of complexity to video streaming, although as you note mostly from the web host side rather than the BookStack side; not that it would necessarily prevent the support requests coming back here.

I had pictured this to be mp4 support rather than branching out into more complex formats. Complications as you mention: there would be requests for more formats (would have to refer people to convert their videos before uploading or to host on other services such as Google); and offering secure storage in the future.

Personally I feel these challenges are trumped by the growing demand these days for video, even if it means it would have to be without secure storage/more complex formats. Whether it be video documentation, education, hobbies, music, news and everything in between, video is increasingly dominating and I imagine demand is only going to keep growing.

+1 still from me on future support. Thanks for taking the time to take a look through this ticket.

cb3inco commented 3 years ago

I'm trying to upload two videos, one over 100mb and the other over 200mb. It appears they can upload, but there is no 'finalizing' the upload and I don't see them 'attached'. They are mp4 format. Are these files just to big?

kassemz commented 3 years ago

Uploading and playing videos using the secure option /attachments/1 results in very slow playing experience/cutting off to the point of the video being not usable.

@cb3inco do the files actually get uploaded or you are getting an error? You followed the instructions here to increase the limits? See https://www.bookstackapp.com/docs/admin/upload-config/#changing-upload-limits

cb3inco commented 3 years ago

@kassemz I ended up going a different route in providing those videos to our users. 'routing' the video through Bookstack doesn't really help when using a distributed file system for large files when it's not providing a direct link to those files. I ended up using Cloudflare stream for video playback and created a separate bucket with a specific policy that allows me to link directly to the video for the user to download.

nblist commented 3 years ago

Hi @Abijeet

I love Bookstack and am trying to leverage it to also provide video instructions for some tasks on a synology system. The video files are going to be stored on the synology system locally.

I wonder if this was solved. I have the same issue described above "TheFiZi". I am able to upload the mp4 but it doesn't play the mp4. (FYI, I had also changed the upload limits etc at the link that @kassemz posted )

Alternatively, if it hasn't been solved, has anyone found a workaround ?

My concern is more on ensuring I can play the videos. The videos are in mp4 format. If the specifics of mp4 have to be changed, I am sure I can use handbreak to change them.

FYI, I installed Bookstack using Portainer ( https://www.youtube.com/watch?v=_13K1DeZwhk ).

thanks

NB

nblist commented 3 years ago

Hi Guys,

I found a work around, It seems to work on safari & chrome on macs so far.

As mentioned above my system is a synology and I have installed bookstack using Portainer link above.

The image files when uploaded to the bookstack website are being accessed through the following URL http://www.myhomenetwork/uploads/images/gallery/2021-06/sample.jpg. The file is being uploaded to the docker folder /docker/bookstack/www/uploads/images/gallery/2021-06/.

So I created another folder (videos) under uploads which was at /docker/bookstack/www/uploads/, once I uploaded the mp4 or m4v files there, they played fine without any challenges (if I accessed them directly.

Now when I needed to inserted a video (insert/edit media) on a editable page, I inserted the full URL http://www.myhomenetwork/uploads/videos/sample.mp4. It worked perfectly.

Hope this helps those of you who are having challenges.

NB

BeckyAlemayehu commented 1 year ago

Was wondering if there is any update on native video upload and player support. Most of our wikis are becoming video explainers and would love if the app supports it. We're currently using a workaround with video.js and editing page's html, but its not sustainable.

jeffshead commented 1 year ago

So I created another folder (videos) under uploads which was at /docker/bookstack/www/uploads/, once I uploaded the mp4 or m4v files there, they played fine without any challenges (if I accessed them directly.

Now when I needed to inserted a video (insert/edit media) on a editable page, I inserted the full URL http://www.myhomenetwork/uploads/videos/sample.mp4. It worked perfectly.

Thanks! Works for me.

@ssddanbrown - Having the ability to set a default location/URL for uploading local video files and then having the ability to select that location (maybe an UPLOAD VIDEO button next to the UPLOAD FILE button) in the Attachments uploader and finally having the option/ability to list the videos in a drop-down list in the Insert/Edit Media popup may be a nice workaround for native browser playback.

gaufde commented 1 year ago

So I created another folder (videos) under uploads which was at /docker/bookstack/www/uploads/, once I uploaded the mp4 or m4v files there, they played fine without any challenges (if I accessed them directly.

Now when I needed to inserted a video (insert/edit media) on a editable page, I inserted the full URL http://www.myhomenetwork/uploads/videos/sample.mp4. It worked perfectly.

This works for me too! Notably it solved an issue where scrubbing through the video was broken in Chrome, playback was completely broken in Safari, but everything worked normally in Firefox.

I agree with a lot of the sentiments in this thread though--proper video support in Bookstack is definitely needed! So much documentation is done through short video clips nowadays, so I think even basic and limited support is much better than nothing. Right now, many video uploads at my company will likely have to be done by me personally since getting everyone on my team to learn how to upload the file into the correct folder, etc., will be nigh impossible.