Tag: microsoft stream

Exporting Microsoft Stream Transcripts with Timecode URLs

I’d created a couple of quick code snippets to export Microsoft Stream transcripts & someone asked if you could include a way for users to click on a hyperlink and pop into the video at the right spot for the line in the transcript they clicked. Seemed like a good idea — I’ve searched though my meeting transcript & now I want to see/hear that important part in the original video.

The method I’m using to grab the transcript text actually grabs a LOT of information that’s thrown into an object being called ‘t”:

I was only using t.eventData.text to build my transcript. What do you need in order to create a jump-to-this-timecode URL for a Stream video? I had no idea! Luckily, MS supplied an easy answer — if you share a video, one of the options is to start the video at a specific time. If you pass in “st” (which I assume stands for ‘start time’) and the number of seconds ( (17 * 60) + 39 = 1059, so the 17:39 from my video matches up with 1059 seconds in the st)

We still need the unique ID assigned to the video, but … I’m exporting the transcript from MS’s Stream site, which includes the ID in the URL. So I’m able to use window.location.href to get the URL, then strip everything past the ? … now I’ve got a way to create timecoded links to video content. I just need to glom that into the code I am using to export the transcript.

Question is … how to display it to the user? Clicking on a link for 1059 seconds doesn’t really mean anything. If I were doing this at work, I might pass the number of seconds through a “pretty time” function to convert that number of seconds back into hour:minute:second format so the user clicks on 17:39 … but, as a quick example, this builds hyperlinks with the integer number of seconds as text:

var strURL = window.location.href;
strURLBase = strURL.substring(0, strURL.indexOf('?'));

var arrayTranscriptionLines = window.angular.element(window.document.querySelectorAll('.transcript-list')).scope().$ctrl.transcriptLines.map((t) => { 
	var strTimecodeURL = '<a href="' + strURLBase + '?st=' + t.startSeconds + '">' + t.startSeconds + '</a>'
	return strTimecodeURL + "&nbps;&nbps;&nbps;&nbps;" + t.eventData.text;
});
console.log(arrayTranscriptionLines);

I might also just link the transcript text to the appropriate URL. Then clicking on the text “I want you to remember this” would jump you to the right place in the video where that line occurs:

var strURL = window.location.href;
strURLBase = strURL.substring(0, strURL.indexOf('?'));

var arrayTranscriptionLines = window.angular.element(window.document.querySelectorAll('.transcript-list')).scope().$ctrl.transcriptLines.map((t) => { 
	var strResult = '<a href="' + strURLBase + '?st=' + t.startSeconds + '">' + t.eventData.text + '</a>'
	return strResult;
});
console.log(arrayTranscriptionLines);

And we’ve got hyperlinked text that jumps to the right spot:

Exporting Microsoft Stream Transcript

Microsoft has changed the interface on Stream slightly, so my code to export the Stream transcript needed an update. since copy/paste doesn’t seem to work for everyone, the script is also available as a text file.

var objTranscriptionLines = window.angular.element(window.document.querySelectorAll('.transcript-list')).scope().$ctrl.transcriptLines;
var strRunningText = "";
for(var i = 0; i < objTranscriptionLines.length; i++){
    if( objTranscriptionLines[i] ){
        var strLineText = objTranscriptionLines[i].eventData.text;
        strRunningText = strRunningText + "\n" + strLineText;
    }
}
console.log(strRunningText);

Exporting Microsoft Stream Transcript — Prettier Output and Error Handling

Updated script available at https://www.rushworth.us/lisa/?p=6854 — and, since copy/paste doesn’t seem to work for everyone, the script is also available as a text file.

I had posted a one-liner to grab the text content of the Microsoft Stream transcript — there’s a good bit of cleanup required to make something professional looking, but I’ve been lazy about it & leave formatting up to the recipient. The one-liner approach fails when it doesn’t encounter a text element where it expects to find one. A more robust export approach creates a Node List containing all of the transcript-line classed elements, then iterates through that list and when the node has a textContent attribute appends that content to a running string value. Printing the running string value produces output that needs minimal reformatting.

Code:

var objTranscriptLines = window.document.querySelectorAll('.transcript-line');
var strRunningText = null;
for(var i = 0; i < objTranscriptLines.length; i++){
    if( objTranscriptLines[i].textContent ){
        var strLineText = objTranscriptLines[i].textContent;
        strRunningText = strRunningText + "\n" + strLineText.replace("Discard   Save","");
    }
}
console.log(strRunningText);

Results:

You *could* strip off the timestamps as well — instead of strLineText.replace(“Discard Save”,””) use (strLineText.replace(“Discard    Save”,””)).substr(8)

Extracting the Transcript from Microsoft Stream Videos

Updated script available at https://www.rushworth.us/lisa/?p=6854

While Microsoft does not provide a way to export the transcript from Stream videos (thus recorded Teams meetings), it is possible to get something a nicer than the select/copy/paste from the transcript box. Click the video settings and select “Show transcript”

Display the browser developer tools – In Firefox, select the “Web Developer” sub-menu from the browser menu and select “Web Console”

This console is often used for displaying errors in a website, but it can also be used to send commands to the browser. There’s a “>>” prompt – click next to it and you’ll have a flashing cursor.

Paste this into the console:

window.angular.element(window.document.querySelectorAll('.transcript-list')).scope().$ctrl.transcriptLines.map((t) => { return t.eventData.text; })

… and hit enter. Another line will appear below what you’ve entered. Right-click on that new entry and select “Copy Object”. Now paste into a text editor or Microsoft Word.

The output could use a little cleanup. You’ll see “\r\n” anywhere there’s a newline. This

Becomes “a new tip to make things quicker. So\r\nshare your knowledge” … you could replace “\r\n” with a space (I find the newlines to be superfluous) or use a regex replacement to replace “\\r\\n” (literal string, the backslash escapes the backslash to retain it) with “\n” (an actual newline)

Each time-stamped bit of the transcript is in a separate set of quotes – I’ve got a quick replacement that takes

",\n "

And replaces it with a newline … so

Becomes

Depending on the target audience … for me, that’s where I stop. To send the transcript to someone else, I manually clean up the spaces and quote before the first line and the quote-comma on the last line.

Did you know … you can record Microsoft Teams meetings (and add a transcription)?

Once you have started a Microsoft Teams meeting, click the not-quite-a-hamburger menu in the meeting control and select “Start recording.

You will see a confirmation that your meeting is recording – and, as the message mentions, make sure everyone knows they are being recorded.

If you are attending the meeting using a web browser, the browser tab will have a little red circle indicating that recording is active.

If you no longer wish to record the meeting, click the not-quite-a-hamburger-menu button again and select “Stop recording.

Now where is that recording?? Open the meeting chat

And you’ll see a post indicating that the recording is saving. Once the recording has been saved, a link to the recording will appear in the conversation. You can get a link to share with others.

If you would like a transcription to be created for your meeting, select “Open in Microsoft Stream”. This will open the recording in a web browser. Under the meeting information, click the not-quite-a-hamburger menu and select “Edit”

On the edit page, select the video language. Ensure “Captions” is checked.

Scroll up to the top of the page and click “Apply”.

Wait for it – the transcription process can take a loooong time. Once the transcription is done, you can click the gear icon in the video information and select “Show transcript” (if the transcript isn’t done yet, this option is still available. But the transcript pane will just tell you to come back later)

Read through the transcript – an AI engine is used to perform the natural language processing, and the transcription accuracy *should* improve as you use the service. Click on “Edit”, make any corrections

Click “Done” to save your changes.

When your video is played, there is now a button to display closed captioning.

And the transcript will be displayed as the video progresses.

When you view the transcript, you can copy the entire thing & paste the transcript into OneNote or the meeting chat to have computer-generated meeting notes. I usually edit the transcript to remove the timestamps (and remove any tangential discussions).