Creating a Publisher
Creating a Publisher
Watch a demonstration of the current section
- From your File System, create a folder called examples
- Open an editor that points at the examples folder
- Create a file named publisher.html
-
To start, add the video element to the web page above the library dependencies in the body:
... <body> <div id="video-container"> <video id="red5pro-publisher"></video> </div> </body> ... <!-- WebRTC Shim --> <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script> <!-- Exposes `red5prosdk` on the window global. --> <script src="lib/red5pro/red5pro-sdk.min.js"></script> ...
-
Create a Red5 Pro Publisher and attach it to a view
// Create a new instance of the WebRTC publisher. var publisher = new red5prosdk.RTCPublisher(); // Create a view instance based on video element id. var view = new red5prosdk.PublisherView('red5pro-publisher'); view.attachPublisher(publisher);
-
Get access to the user media
// Access user media. navigator.getUserMedia({ audio: true, video: true }, function(media) { // Upon access of user media, // 1. Attach the stream to the publisher. // 2. Show the stream as preview in view instance. publisher.attachStream(media); view.preview(media, true); }, function(error) { console.error(error); });
-
Initialize the publisher and use it to publish your broadcast
// Using Chrome/Google TURN/STUN servers. var iceServers = [{urls: 'stun:stun2.l.google.com:19302'}]; // Initialize publisher.init({ protocol: 'ws', host: 'localhost', port: 8081, app: 'live', streamName: 'mystream', iceServers: iceServers, tcpMuxPolicy: 'negotiate' }) .then(function() { // Invoke the publish action return publisher.publish(); }) .catch(function(error) { // A fault occurred while trying to initialize and publish the stream. console.error(error); });