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

Support streaming media into existing video/audio tag #531

Closed
RomanEmelyanov opened this issue Dec 17, 2015 · 7 comments
Closed

Support streaming media into existing video/audio tag #531

RomanEmelyanov opened this issue Dec 17, 2015 · 7 comments
Labels
area/browser enhancement good first contribution

Comments

@RomanEmelyanov
Copy link

@RomanEmelyanov RomanEmelyanov commented Dec 17, 2015

As the first step to run WebTorrent in VideoJS player want to run in specific video tag, but Chrome got error: Uncaught TypeError: e.on is not a function

Any idea about file.createReadStream().pipe(video) ?

Full code below:

<html><head><script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script></head><body><script>
var client = new WebTorrent()
var torrentId = 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d'
client.add(torrentId, function (torrent) {
var file = torrent.files[0]
var video = document.createElement('video')
video.controls = true
// Chrome error: Uncaught TypeError: e.on is not a function
document.body.appendChild(video)
file.createReadStream().pipe(video)

// Works fine if uncommented
//file.appendTo('body')
})
</script>
</body></html>
@feross

This comment has been minimized.

Sign in to view
Copy link
Member

@feross feross commented Dec 17, 2015

Thanks for creating this issue.

The source of the TypeError is that you can't pipe a node readable stream into a video tag like that.

We actually used to support file.createReadStream().pipe(videoTag) in a previous version of WebTorrent, but I removed it since it was confusing. I was overloading the ReadableStream.prototype.pipe semantics and trying to be too magical.

I think the correct solution is to detect when a video or audio tag is passed into file.appendTo and do the right thing, i.e. use that existing node. Or perhaps, add a new method file.streamTo to be more explicit.
@feross feross changed the title Want to run inside VideoJS player Support streaming media into existing video/audio tag Dec 17, 2015
@RomanEmelyanov

This comment has been minimized.

Sign in to view
Copy link
Author

@RomanEmelyanov RomanEmelyanov commented Dec 17, 2015

Ferros, thanks for fast reply! I'm try to use callback, but got another error:

Uncaught InvalidStateError: Failed to read the 'buffered' property from 'SourceBuffer': This SourceBuffer has been removed from the parent media source.

Any ideas?

Full code:

<html><head>
<link href="http://vjs.zencdn.net/5.4.4/video-js.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
</head><body><script>
var client = new WebTorrent()
var torrentId = 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d'
client.add(torrentId, function (torrent) {
var file = torrent.files[0]
file.appendTo('body', function (err, elem) {
 if (err) throw err
 elem.className = 'video-js'
 elem.setAttribute('id','VJSPlayer')
 elem.setAttribute('width','640')
 elem.setAttribute('height','360')
 videojs('VJSPlayer',{},function(){this.load();});
 console.log('New DOM node with the content', elem)
})
})
</script>
<video id="YTAPI" class="video-js" controls preload="none" width="640" height="360" data-setup="{}">
 <source src="http://www.ytapi.com/api/rO0yXC0oyIA/direct/18/" type='video/mp4'>
</video>
 <br>
<script src="http://vjs.zencdn.net/5.4.4/video.js"></script>
</body></html>
@feross

This comment has been minimized.

Sign in to view
Copy link
Member

@feross feross commented Dec 17, 2015

@RomanEmelyanov That's probably caused by using videojs wrong, but I can't help with that because I'm not familiar with videojs. If you find a bug in webtorrent that you can reproduce without videojs, feel free to open a new issue for it.
@feross

This comment has been minimized.

Sign in to view
Copy link
Member

@feross feross commented Dec 17, 2015

To the original issue, there's already a PR out that implements this: #425
@RomanEmelyanov RomanEmelyanov mentioned this issue Dec 22, 2015
Merged
@feross

This comment has been minimized.

Sign in to view
Copy link
Member

@feross feross commented Dec 28, 2015

Fixed by #425
@feross feross closed this Dec 28, 2015
@feross

This comment has been minimized.

Sign in to view
Copy link
Member

@feross feross commented Dec 28, 2015

Released as 0.65.0.
@lock

This comment has been minimized.

Sign in to view
Copy link

@lock lock bot commented May 5, 2018

This thread has been automatically locked because it has not had recent activity. To discuss futher, please open a new issue.
@lock lock bot locked as resolved and limited conversation to collaborators May 5, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
area/browser enhancement good first contribution
Milestone
No milestone
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
@RomanEmelyanov @feross
You can’t perform that action at this time.