Skip to content

/ webtorrent

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Large video torrent playback issues. #1261

Closed
calvincs opened this issue Jan 13, 2018 · 7 comments
Closed

Large video torrent playback issues. #1261

calvincs opened this issue Jan 13, 2018 · 7 comments

Comments

@calvincs
Copy link

@calvincs calvincs commented Jan 13, 2018

What version of WebTorrent?
webtorrent@0.98.20

What operating system and Node.js version?
Ubuntu 16.04, Node.js v6.12.3

What browser and version? (if using WebTorrent in the browser)
Chrome Version 63.0.3239.132 (Official Build) (64-bit)

What did you expect to happen?
View torrent video over 4.6GB in web browser

What actually happened?
Torrent begins to load data to browser, however browser freezes as memory reaches 100% and/or recieve the following warning
Uncaught Error: Error rendering file "testing.m4v": File length too large for Blob URL approach: 4556358256 (max: 200000000)
at HTMLVideoElement.l (webtorrent.min.js:6)

Attempted use of file.createReadStream(); still sees excessive use of system ram and does not result in being able to play video in browser.
@jhiesey

This comment has been minimized.

Sign in to view
Copy link
Contributor

@jhiesey jhiesey commented Jan 14, 2018

It looks like videostream isn't being used. Please enable logging with localStorage.debug = 'render-media' and post the console output.
@calvincs

This comment has been minimized.

Sign in to view
Copy link
Author

@calvincs calvincs commented Jan 15, 2018

For this execution, I used the appendTo boilerplate code. Tho I have tried others with no success.
Used code from section HTML example with status showing UI

          var file = torrent.files.find(function (file) {
            return file.name.endsWith('.m4v')
          });
          file.appendTo('#videobox', function (err, elem) {
              if (err) throw err // file failed to download or display in the DOM
          });

Cleaned up output:

20:10:31.603 webtorrent.min.js:7 XHR finished loading: GET "https://demo.ventibean.com/demo/QmQZ5nqBEY3j99cPHL5BHHNJpaoYrnDXgk410000000000".
20:10:31.661 webtorrent.min.js:4 render-media Use `videostream` package for demomovie.m4v +0ms
20:10:31.672 webtorrent.min.js:5 [Violation] 'setTimeout' handler took 70ms
20:10:35.572 webtorrent.min.js:7 Fetch finished loading: GET "https://demo.ventibean.com/demo/RmV25FGUE3EVCJUjfD89zQ89SEen94zC3zFK0000000000".
20:10:40.988 webtorrent.min.js:7 Fetch finished loading: GET "https://demo.ventibean.com/demo/RmV25FGUE3EVCJUjfD89zQ89SEen94zC3zFK0000000000".
20:10:43.121 webtorrent.min.js:7 Fetch finished loading: GET "https://demo.ventibean.com/demo/RmV25FGUE3EVCJUjfD89zQ89SEen94zC3zFK0000000000".
20:10:43.230 webtorrent.min.js:5 [Violation] 'setTimeout' handler took 73ms
20:10:43.235 webtorrent.min.js:4 render-media videostream error: fallback to MediaSource API: Event 
{
    isTrusted: true,
    type: "error",
    target: video,
    currentTarget: video,
    eventPhase: 2,
     …
}
bubbles: falsecancelBubble: falsecancelable: truecomposed: falsecurrentTarget: nulldefaultPrevented: falseeventPhase: 0 isTrusted: truepath: (9)[video, div# videobox, div# hero, body, shadow, document - fragment, html, document, Window] returnValue: truesrcElement: videoaccessKey: ""
assignedSlot: nullattributes: NamedNodeMap {
    0: controls,
    1: autoplay,
    2: src,
    controls: controls,
    autoplay: autoplay,
    src: src,
    length: 3
}
autoplay: truebaseURI: "https://demo.ventibean.com/apps/#QmQZ5nqBEY3j99cPHL5BHHNJpaoYrnDXgk410000000000"
buffered: TimeRanges {
    length: 0
}
childElementCount: 0 childNodes: NodeList[] children: HTMLCollection[] classList: DOMTokenList[value: ""] className: ""
clientHeight: 666 clientLeft: 0 clientTop: 0 clientWidth: 1331 contentEditable: "inherit"
controls: truecontrolsList: DOMTokenList[value: ""] crossOrigin: nullcurrentSrc: "blob:https://demo.ventibean.com/f32940bc-ee55-49d0-89cd-472f76a67b0e"
currentTime: 0 dataset: DOMStringMap {}
defaultMuted: falsedefaultPlaybackRate: 1 dir: ""
disableRemotePlayback: falsedraggable: falseduration: NaNended: falseerror: MediaErrorcode: 4 message: "MEDIA_ELEMENT_ERROR: Empty src attribute"
__proto__: MediaErrorMEDIA_ERR_ABORTED: 1 MEDIA_ERR_DECODE: 3 MEDIA_ERR_NETWORK: 2 MEDIA_ERR_SRC_NOT_SUPPORTED: 4 code: (...) message: (...) constructor: ƒ MediaError() Symbol(Symbol.toStringTag): "MediaError"
get code: ƒ() get message: ƒ() __proto__: ObjectfirstChild: nullfirstElementChild: nullheight: 0 hidden: falseid: ""
innerHTML: ""
innerText: ""
isConnected: trueisContentEditable: falselang: ""
lastChild: nulllastElementChild: nulllocalName: "video"
loop: falsemediaKeys: nullmuted: falsenamespaceURI: "http://www.w3.org/1999/xhtml"
networkState: 3 nextElementSibling: nullnextSibling: nullnodeName: "VIDEO"
nodeType: 1 nodeValue: nullnonce: ""
offsetHeight: 666 offsetLeft: 174 offsetParent: bodyoffsetTop: 45 offsetWidth: 1331 onabort: nullonauxclick: nullonbeforecopy: nullonbeforecut: nullonbeforepaste: nullonblur: nulloncancel: nulloncanplay: nulloncanplaythrough: nullonchange: nullonclick: nullonclose: nulloncontextmenu: nulloncopy: nulloncuechange: nulloncut: nullondblclick: nullondrag: nullondragend: nullondragenter: nullondragleave: nullondragover: nullondragstart: nullondrop: nullondurationchange: nullonemptied: nullonencrypted: nullonended: nullonerror: nullonfocus: nullongotpointercapture: nulloninput: nulloninvalid: nullonkeydown: nullonkeypress: nullonkeyup: nullonload: nullonloadeddata: nullonloadedmetadata: nullonloadstart: nullonlostpointercapture: nullonmousedown: nullonmouseenter: nullonmouseleave: nullonmousemove: nullonmouseout: nullonmouseover: nullonmouseup: nullonmousewheel: nullonpaste: nullonpause: nullonplay: nullonplaying: nullonpointercancel: nullonpointerdown: nullonpointerenter: nullonpointerleave: nullonpointermove: nullonpointerout: nullonpointerover: nullonpointerup: nullonprogress: nullonratechange: nullonreset: nullonresize: nullonscroll: nullonsearch: nullonseeked: nullonseeking: nullonselect: nullonselectstart: nullonstalled: nullonsubmit: nullonsuspend: nullontimeupdate: nullontoggle: nullonvolumechange: nullonwaiting: nullonwaitingforkey: nullonwebkitfullscreenchange: nullonwebkitfullscreenerror: nullonwheel: nullouterHTML: "<video controls="
" autoplay="
" src="
"></video>"
outerText: ""
ownerDocument: documentparentElement: div# videoboxparentNode: div# videoboxpaused: trueplaybackRate: 1 played: TimeRanges {
    length: 0
}
poster: ""
prefix: nullpreload: "auto"
previousElementSibling: nullpreviousSibling: nullreadyState: 0 remote: RemotePlayback {
    state: "disconnected",
    onconnecting: null,
    onconnect: null,
    ondisconnect: null
}
scrollHeight: 666 scrollLeft: 0 scrollTop: 0 scrollWidth: 1331 seekable: TimeRanges {
    length: 0
}
seeking: falseshadowRoot: (...) sinkId: ""
slot: ""
spellcheck: truesrc: "https://demo.ventibean.com/apps/"
srcObject: nullstyle: CSSStyleDeclaration {
    alignContent: "",
    alignItems: "",
    alignSelf: "",
    alignmentBaseline: "",
    all: "",
     …
}
tabIndex: 0 tagName: "VIDEO"
textContent: ""
textTracks: TextTrackList {
    length: 0,
    onchange: null,
    onaddtrack: null,
    onremovetrack: null
}
title: ""translate: truevideoHeight: 0videoWidth: 0volume: 1webkitAudioDecodedByteCount: 0webkitDecodedFrameCount: 0webkitDisplayingFullscreen: falsewebkitDroppedFrameCount: 0webkitSupportsFullscreen: truewebkitVideoDecodedByteCount: 0width: 0__proto__: HTMLVideoElementtarget: videotimeStamp: 13770.685type: "error"__proto__: Event +12s
20:10:43.238 webtorrent.min.js:4 render-media Use MediaSource API for demomovie.m4v +3ms
20:10:43.244 webtorrent.min.js:4 Uncaught (in promise) DOMException: Failed to load because no supported source was found.
20:10:43.248 webtorrent.min.js:4 render-media MediaSource API error: fallback to Blob URL: Event {isTrusted: true, type: "error", target: video, currentTarget: video, eventPhase: 2, …}bubbles: falsecancelBubble: falsecancelable: truecomposed: falsecurrentTarget: nulldefaultPrevented: falseeventPhase: 0isTrusted: truepath: Array(9)0: video1: div#videobox2: div#hero3: body4: shadow5: document-fragment6: html7: document8: Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}length: 9__proto__: Array(0)returnValue: truesrcElement: videotarget: videotimeStamp: 13780.960000000001type: "error"__proto__: Event +10ms
20:10:43.248 webtorrent.min.js:4 render-media File length too large for Blob URL approach: 4556358256 (max: 200000000) +0ms
20:10:43.249 webtorrent.min.js:4 render-media Error rendering file "demomovie.m4v": File length too large for Blob URL approach: 4556358256 (max: 200000000) +1ms
20:10:43.249 (index):196 Uncaught Error: Error rendering file "demomovie.m4v": File length too large for Blob URL approach: 4556358256 (max: 200000000)
20:10:43.258 webtorrent.min.js:6 Uncaught (in promise) DOMException: The element has no supported sources.
20:10:46.424 webtorrent.min.js:7 Fetch finished loading: GET "https://demo.ventibean.com/demo/RmV25FGUE3EVCJUjfD89zQ89SEen94zC3zFK0000000000".

Video Information from avprobe:

ffprobe version 3.4.1-1~16.04.york0 Copyright (c) 2007-2017 the FFmpeg developers
...

Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'demomovie.m4v':
  Metadata:
    major_brand     : mp42
    minor_version   : 512
    compatible_brands: isomiso2avc1mp41
    creation_time   : 2018-01-09T22:09:43.000000Z
    title           : demomovie
    encoder         : HandBrake 0.10.2 2016021200
  Duration: 01:57:44.88, start: 0.000000, bitrate: 5159 kb/s
    Chapter #0:0: start 0.000000, end 333.416000
    Metadata:
      title           : Chapter 1
    Chapter #0:1: start 333.416000, end 955.829000
    Metadata:
      title           : Chapter 2
    Chapter #0:2: start 955.829000, end 1270.227000
    Metadata:
      title           : Chapter 3
    Chapter #0:3: start 1270.227000, end 1697.779000
    Metadata:
      title           : Chapter 4
    Chapter #0:4: start 1697.779000, end 2873.162000
    Metadata:
      title           : Chapter 5
    Chapter #0:5: start 2873.162000, end 3155.026000
    Metadata:
      title           : Chapter 6
    Chapter #0:6: start 3155.026000, end 3796.918000
    Metadata:
      title           : Chapter 7
    Chapter #0:7: start 3796.918000, end 4217.046000
    Metadata:
      title           : Chapter 8
    Chapter #0:8: start 4217.046000, end 4585.289000
    Metadata:
      title           : Chapter 9
    Chapter #0:9: start 4585.289000, end 5117.362000
    Metadata:
      title           : Chapter 10
    Chapter #0:10: start 5117.362000, end 5426.129000
    Metadata:
      title           : Chapter 11
    Chapter #0:11: start 5426.129000, end 5897.433000
    Metadata:
      title           : Chapter 12
    Chapter #0:12: start 5897.433000, end 6238.065000
    Metadata:
      title           : Chapter 13
    Chapter #0:13: start 6238.065000, end 6425.502000
    Metadata:
      title           : Chapter 14
    Chapter #0:14: start 6425.502000, end 6587.330000
    Metadata:
      title           : Chapter 15
    Chapter #0:15: start 6587.330000, end 7064.808000
    Metadata:
      title           : Chapter 16
    Stream #0:0(und): Video: h264 (Main) (avc1 / 0x31637661), yuv420p(tv, bt709), 1920x800 [SAR 1:1 DAR 12:5], 4987 kb/s, 23.98 fps, 23.98 tbr, 90k tbn, 180k tbc (default)
    Metadata:
      creation_time   : 2018-01-09T22:09:43.000000Z
      handler_name    : VideoHandler
    Stream #0:1(eng): Audio: aac (LC) (mp4a / 0x6134706D), 48000 Hz, stereo, fltp, 164 kb/s (default)
    Metadata:
      creation_time   : 2018-01-09T22:09:43.000000Z
      handler_name    : Stereo
    Stream #0:2(eng): Data: bin_data (text / 0x74786574)
    Metadata:
      creation_time   : 2018-01-09T22:09:43.000000Z
      handler_name    : SubtitleHandler
@calvincs

This comment has been minimized.

Sign in to view
Copy link
Author

@calvincs calvincs commented Jan 24, 2018

Curious, if a torrent is larger then what can fit in memory, is it suppose to reside on disk at that point? If not, Im not sure how larger torrents can utilize the web browser interface.
@DiegoRBaquero

This comment has been minimized.

Sign in to view
Copy link
Member

@DiegoRBaquero DiegoRBaquero commented Jan 24, 2018

@calvincs Using IndexedDB, for example.
@stale

This comment has been minimized.

Sign in to view
Copy link

@stale stale bot commented May 9, 2018

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
@stale stale bot added the stale label May 9, 2018
@calvincs

This comment has been minimized.

Sign in to view
Copy link
Author

@calvincs calvincs commented May 9, 2018

I have not had a chance to use IndexDB as a solution, however I've kept an eye on this thread for activity and have not seen any. If a solution is not built in, such as IndexDB, I'll have to circle around later for testing adding it myself. Thanks for the help, understand if this is closed.
@stale stale bot removed the stale label May 9, 2018
@feross

This comment has been minimized.

Sign in to view
Copy link
Member

@feross feross commented May 10, 2018

You can specify IndexedDB as your backend if you use idb-chunk-store and the store option that the WebTorrent constructor accepts.
@feross feross closed this May 10, 2018
@lock lock bot locked as resolved and limited conversation to collaborators Aug 8, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants
@calvincs @jhiesey @DiegoRBaquero @feross
You can’t perform that action at this time.