Example demonstrating how to take snapshot of a published stream
This example demonstrates taking snapshot of a stream published on Web Call Server.
...
When publishing is started, video from the camera is played in 'Local' element on the left side of the page.
When 'Take a snapshot' button is clicked, snapshot is taken and displayed in 'Snapshot' element on the right side of the page.
Code of the example
The path to the source code of the example on WCS server is:
...
Here host is the address of the WCS server.
Work with code of the streamer
To analyze the code, let's take the version of file stream-snapshot.js with hash 6f0eb5fa1576abc0e4008d52768af56977c7ed61, which is available here and can be downloaded with corresponding build 0.5.15.1977.
1. Initialization of the API. line 13API is initialized after loading the page. For Flash support, the path to SWF file is passed to the
Flashphoner.init() method. code
Code Block | ||||
---|---|---|---|---|
| ||||
Flashphoner.init({flashMediaProviderSwfLocation: '../../../../media-provider.swf'}); |
2. Connection to server. line 76Connection to server is established when Start button is clicked.
Flashphoner.createSession() code
Code Block | ||||
---|---|---|---|---|
| ||||
Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function(session){ //session connected, start streaming startStreaming(session); }).on(SESSION_STATUS.DISCONNECTED, function(){ setStatus(SESSION_STATUS.DISCONNECTED); $('#url').prop('disabled', false); onUnpublished(); }).on(SESSION_STATUS.FAILED, function(){ setStatus(SESSION_STATUS.FAILED); $('#url').prop('disabled', false); onUnpublished(); }); |
Session is created with method createSession(). Callback function, which will be called in case of successfully established connection (status SESSION_STATUS.ESTABLISHED), is added.
3. Video streaming. line 93
...
3. Receiving the event confirming successful connection
ConnectionStatusEvent ESTABLISHED code
Code Block | ||||
---|---|---|---|---|
| ||||
Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function(session){
//session connected, start streaming
startStreaming(session);
}).on(SESSION_STATUS.DISCONNECTED, function(){
...
}).on(SESSION_STATUS.FAILED, function(){
...
}); |
4. Video streaming.
session.createStream(), and function publish() is called to publish the stream. code
When stream is created, the following parameters are passed
...
Code Block | ||||
---|---|---|---|---|
| ||||
session.createStream({ name: streamName, display: localVideo, cacheLocalResources: true, receiveVideo: false, receiveAudio: false ... }).publish(); |
5. Receiving the event confirming successful streaming
StreamStatusEvent PUBLISHING code
Code Block | ||||
---|---|---|---|---|
| ||||
session.createStream({ name: streamName, display: localVideo, cacheLocalResources: true, receiveVideo: false, receiveAudio: false }).on(STREAM_STATUS.PUBLISHING, function(publishStream){ setStatus(STREAM_STATUS.PUBLISHING); onPublishing(publishStream); }).on(STREAM_STATUS.UNPUBLISHED, function(){ setStatus(STREAM_STATUS.UNPUBLISHED); //enable start button onUnpublished(); ... }).on(STREAM_STATUS.FAILED, function(){ setStatus(STREAM_STATUS.FAILED); //enable start button onUnpublished();... }).publish(); |
When stream is created, callback functions for events STREAM_STATUS.PUBLISHING, STREAM_STATUS.UNPUBLISHED, STREAM_STATUS.FAILED can be added.
STREAM_STATUS.PUBLISHING - when this status is received, function onPublishing() of the example is called to make appropriate changes in controls of the interface.
STREAM_STATUS.UNPUBLISHED and STREAM_STATUS.FAILED - when one of these statuses is received, function onUnpublished() of the example is called to make appropriate changes in controls of the interface.
4. Taking snapshot. line 31
New stream object is created when 'Take a snapshot' button is clicked.
Name of the published stream is passed to method session.createStream() when the new stream is created, and method snapshot() is called to take snapshot of the stream6. Taking snapshot.
session.createStream(), snapshot() code
Code Block | ||||
---|---|---|---|---|
| ||||
session.createStream({name: name}).on(STREAM_STATUS.SNAPSHOT_COMPLETE, function(stream){
...
}).snapshot(); |
7. Receiving the event confirming successful snapshot taking
StreamStatusEvent SNAPSHOT_COMPLETE code
On receivng the event, stream.getInfo() method returns snapshot in base64 encoding. Then stream created to take snapshot is stopped.
Code Block | ||||
---|---|---|---|---|
| ||||
session.createStream({name: name}).on(STREAM_STATUS.SNAPSHOT_COMPLETE, function(stream){ console.log("Snapshot complete"); setSnapshotStatus(STREAM_STATUS.SNAPSHOT_COMPLETE); snapshotImg.src = "data:image/png;base64,"+stream.getInfo(); //remove failed callback stream.on(STREAM_STATUS.FAILED, function(){}); //release stream object stream.stop(); }).on(STREAM_STATUS.FAILED, function(stream){ setSnapshotStatus(STREAM_STATUS.FAILED);... }).snapshot(); |
8. Streaming stop
stream.stop() code
Code Block | ||||
---|---|---|---|---|
| ||||
function onPublishing(stream) { console.log("Snapshot failed, info: " + stream.getInfo()); }).snapshot(); |
Callback function, which will be called when snapshot is taken (status STREAM_STATUS.SNAPSHOT_COMPLETE), is added to display the snapshot image.
5. Releasing snapshot stream object. line 38
The following method is called to release the stream object in case of failure
Code Block | ||||
---|---|---|---|---|
| ||||
stream.stop(); |
6. Stop of streaming. line 48
...
$("#publishBtn").text("Stop").off('click').click(function(){
$(this).prop('disabled', true);
stream.stop();
}).prop('disabled', false);
$("#snapshotBtn").off('click').click(function(){
$(this).prop('disabled', true);
snapshot(stream.name());
}).prop('disabled', false);
} |
9. Receiving the event confirming successful streaming stop
StreamStatusEvent UNPUBLISHED code
Code Block | ||||
---|---|---|---|---|
| ||||
stream.stop(); |
...
session.createStream({
name: streamName,
display: localVideo,
cacheLocalResources: true,
receiveVideo: false,
receiveAudio: false
}).on(STREAM_STATUS.PUBLISHING, function(publishStream){
...
}).on(STREAM_STATUS.UNPUBLISHED, function(){
setStatus(STREAM_STATUS.UNPUBLISHED);
//enable start button
onUnpublished();
}).on(STREAM_STATUS.FAILED, function(){
...
}).publish();
|