Last active
July 21, 2023 10:51
-
-
Save Exlord/c0029012278674865eb026d2e5b60f32 to your computer and use it in GitHub Desktop.
Tech to handle MediaStream playback in Videojs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import videojs from 'video.js'; | |
| const Html5 = videojs.getTech('Html5'); | |
| const supportsSrcObject = 'srcObject' in HTMLMediaElement.prototype; | |
| export default class MediaStreamTech extends Html5 { | |
| /** | |
| * A getter/setter for the `Html5` Tech's source object. | |
| * > Note: Please use {@link Html5#setSource} | |
| * | |
| * @param {Tech~SourceObject} [src] | |
| * The source object you want to set on the `HTML5` techs element. | |
| * | |
| * @return {Tech~SourceObject|undefined} | |
| * - The current source object when a source is not passed in. | |
| * - undefined when setting | |
| * | |
| * @deprecated Since version 5. | |
| */ | |
| // eslint-disable-next-line consistent-return | |
| src(src) { | |
| if (src === undefined) { | |
| return this.el_.srcObject; | |
| } | |
| // Setting src through `src` instead of `setSrc` will be deprecated | |
| this.setSrc(src); | |
| } | |
| setSource(source) { | |
| // mediastream is set on the stream property not src property | |
| if (supportsSrcObject) { | |
| this.el_.srcObject = source.stream; | |
| } else { | |
| this.el_.src = window.URL.createObjectURL(source.stream); | |
| } | |
| this.el_.play(); | |
| this.trigger('playing'); | |
| } | |
| /** | |
| * Check if HTML5 media is supported by this browser/device. | |
| * | |
| * @return {boolean} | |
| * - True if HTML5 media is supported. | |
| * - False if HTML5 media is not supported. | |
| */ | |
| static isSupported() { | |
| return true; | |
| } | |
| /** | |
| * Check if the tech can support the given type | |
| * | |
| * @param {string} type | |
| * The mimetype to check | |
| * @return {string} 'probably', 'maybe', or '' (empty string) | |
| */ | |
| static canPlayType(type) { | |
| return type === 'application/webrtc-peer' ? 'probably' : ''; | |
| } | |
| /** | |
| * Check if the tech can support the given source | |
| * @return {string} 'probably', 'maybe', or '' (empty string) | |
| */ | |
| static canPlaySource(srcObj) { | |
| return MediaStreamTech.canPlayType(srcObj.type); | |
| } | |
| } | |
| videojs.registerTech('MediaStreamTech', MediaStreamTech); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //just import it anywhere you want to use it | |
| import './mediaStreamTech'; | |
| //set the source like this | |
| sources.push({ | |
| type: 'application/webrtc-peer', | |
| src: 'hack', // this can be anything , but cannot be empty | |
| stream: SomeMediaStreamSoucre | |
| }); | |
| //also don't fotget the techOrder | |
| techOrder = ['MediaStreamTech']; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment