webrtc-quickstream v1.1.0
WebRTC Quickstream
WebRTC Quickstream is a package to help create a WebRTC Media Stream and attach it to a video element easily. WebRTC Quickstream handles the various checks that need to be done to run getUserMedia on all browsers.
(Note: WebRTC is not supported on Chrome for iOS)
Install
npm i webrtc-quickstream
Usage
getWebRTCVideoElement:
The code below passes a video element, along with it's height, width, and a boolean argument for audio to the getWebRTCVideoElement()
function.
Height, width, and audio default to window.innerHeight
, window.innerWidth
, and true
respectively.
WebRTC Quickstream will use the appropriate getUserMedia()
function for the browser and attach the MediaStream to the video element.
A promise is returned and further modification to the video element or the MediaStream can be made.
import React, { Component } from 'react'
import {getWebRTCVideoElement} from 'webrtc-quickstream'
class App extends Component {
startVideo = () => {
let video = this.refs.videoTag
getWebRTCVideoElement(video, window.innerHeight, window.innerWidth, true)
.then(() => video.hidden = false)
.catch((e) => this.refs.nativeCamera.click())
}
render() {
return (
<div>
<button onClick={this.startVideo}>Start</button>
<video hidden autoPlay ref="videoTag"/>
<input
capture
type="file"
hidden
ref="nativeCamera"
onClick={(e) => console.log(e.target)}
/>
</div>
)
}
}
export default App
getWebRTCStream:
The getWebRTCStream()
function works much like getUserMedia()
, but extrapolates the process of finding the correct vendor prefix for the browser away.
Other than that, getWebRTCStream()
would be called just like getUserMedia()
, taking an object containing the constraints you wish to place on your MediaStream in it's arguments.
If no constraints are passed in, getWebRTCStream()
defaults the constraints to {video: true, audio: true}
Note that getWebRTCStream()
only handles the vendor prefixes and returns a promise that resolves to a MediaStream. It does NOT handle the specific requirements for playing a video with a MediaStream in the browser. Use getWebRTCVideoElement()
for this.
import React, { Component } from 'react'
import {getWebRTCStream} from 'webrtc-quickstream'
class App extends Component {
startVideo = () => {
let video = this.refs.videoTag
getWebRTCStream({video: true, audio: false})
.then((stream) => {
video.srcObject = stream
video.hidden = false
})
.catch((e) => this.refs.nativeCamera.click())
}
render() {
return (
<div>
<button onClick={this.startVideo}>Start</button>
<video hidden autoPlay ref="videoTag"/>
<input
capture
type="file"
hidden
ref="nativeCamera"
onClick={(e) => console.log(e.target)}
/>
</div>
)
}
}
export default App